Jump to section

Product design language

Built for the
decisions behind
the squad.

A practical reference for FC Club Tracker: dark surfaces, exact-card clarity, deliberate actions, and honest status. The examples below use real HTML, CSS, and a little JavaScript so you can inspect them on desktop or phone.

System statusA reference to refine together

This page documents the current visual language and proposes consistent component behavior. It is a design reference; changes to the application are separate work.

01 / FOUNDATIONS → 02 / COMPONENTS

01 / Foundations

Color

Orange carries primary actions and active selection. Semantic colors communicate outcome and risk; neutral surfaces keep dense data readable.

01—11

Background#0C1117

--bg

Surface / navigation#171D24

--surface · --nav

Elevated#232A32

--elevated

Input#0D1218

--input

Action orange#FF7800

--orange

Orange hover#FF922E

--orange-hover

Orange muted#4B2D1D

--orange-muted

Border#2B3540

--border

Success#22C55E

--success

Warning#F59E0B

--warning

Danger#EF4444

--danger

Info#4EA1FF

--info

Text hierarchy

Primary #F3F4F6

Names, headings, values

Secondary #A8B1BF

Descriptions and table cells

Muted #718096

Metadata; avoid for critical instructions

02 / Foundations

Typography

Inter carries the interface; IBM Plex Mono makes IDs, scores, and timestamps easy to scan.

TYPE / 02

Display / 58The squad at a glance

Page / 34My Club

Section / 20Recent imports

Card / 15Player details

Body / 14Review each exact card before changing your club.

Small / 12Last updated 12 minutes ago

Eyebrow / 10Workspace overview

Numerical clarity

Use mono for numbers that people compare or copy. Keep prose in Inter.

87.4 / 100

FC26 · CLUB-000184 · 2026-09-23

Typography tokens

Inter 400 / 500 / 600 / 700 / 800IBM Plex Mono 400 / 500 / 600

Keep labels human

Use “Player score” in prose and reserve abbreviated IDs for metadata.

03 / Foundations

Spacing & shape

A compact rhythm creates room for dense information without crowding the controls.

4 / 8 / 12 / 16 / 24 / 32 / 48

Spacing scale

Use the scale for padding, gaps, and section rhythm.

Radius & borders

Use 7–10px for controls and panels; full pills for compact status labels. Prefer a one-pixel border to heavy shadow.

7px / controls

10px / panels

Pill / status

border: 1px solid var(--border)

04 / Foundations

Layout & navigation

Desktop uses a persistent left rail; narrow screens use a bottom bar. Panels collapse to one column when space gets tight.

DESKTOP → MOBILE

Application shell

Real links and layout elements, scaled down for the reference.

Responsive

● Workspace synced locallyFC26⌄

Club overview

Your exact-card workspace at a glance.

Ready

Responsive grid

Four columns on wide screens, two on medium screens, one on narrow screens.

Players

124

Current copies

Scored

FC26 cards

Imports

Reviewed batches

Reviews

Need attention

Illustrative values only. This reference does not connect to club data.

05 / Components

Actions

One primary action per decision area. Use clear verbs and preserve a visible secondary path.

BUTTONS / LINKS

Button hierarchy

Hover, focus, press, and disabled states are live.

Size options

Links & action copy

Use links for navigation, buttons for changes, and an ellipsis when an action opens a confirmation step.

View player details →

Go to Import Center →

Choose words by outcome

“Commit import” is clearer than “Continue” at the final approval gate.

06 / Components

Forms & selection

Native inputs stay keyboard friendly. Labels, help, validation, and unknown values remain visible.

INPUT / SELECT / CHOICE

Fields

Try entering a search, changing a select, and submitting the example form.

Choices & progressive controls

Keep “Unknown” distinct from “No” when the underlying fact is missing.

Ownership source

First ownerAcquired directly in this release.Transfer marketPurchased from another player.UnknownThe source has not been confirmed.

Keep missing snapshot rowsNo club copy is removed automatically.Show EVO fieldsScore priority 7

07 / Components

Feedback & status

Use plain text alongside color. Tell users what happened and what they can do next.

STATUS / ALERT / DIALOG

Status badges

Compact labels for rows, cards, and summary areas.

✓ Ready! Review required× Blockedi EditableSystem controlled

Progress with a text equivalent

72%

72% of cards have complete attributes.

Inline alerts

Placed near the decision or result they describe.

Import committed safely

Club copies and audit history were saved.

Three rows need review

Choose exact cards before you commit.

Changes were not saved

Check the connection and try again.

Steps, dialogs & toasts

Show where the user is, confirm destructive changes, and acknowledge lightweight success.

✓UploadFile received

2ReviewResolve exact cards

3CommitSave audit record

08 / Components

Data display

Scan by name first, then exact card, score, and ownership. Mobile rows become readable cards.

TABLE / CARD / EMPTY

Club copies

124

FC26 inventory

Highest score

91.8

Based on active profile

Unknown ownership

Review when ready

Player table

Table on desktop; stacked record on mobile. Values are illustrative.

FC26

Example club inventory
Player	Card	Score	Ownership	Status
Alex Morgan CLUB-000184	Special · 90 OVR · ST	91.8	First owner	Ready
Sam Kerr CLUB-000185	Gold · 89 OVR · ST	87.4	Unknown	Review

Alex Morgan

CLUB-000184

Ready

Card: Special · 90
Score: 91.8
Position: ST
Owner: First

Player card

Exact identity and key attributes without relying on an image.

Alex MorganSpecial · ST · FC26In My Club

92PAC

91SHO

86PAS

89DRI

54DEF

82PHY

91.8

Empty state

State the missing content and offer the next useful action.

No club copies yet

Add a card from the Player Database or import a reviewed club export.

09 / Product patterns

Real workflows

These patterns show how the component pieces work together around imports, history, and squad decisions.

IMPORT / HISTORY / SQUAD

Import review

Upload is followed by exact-card review and an explicit commit.

Choose a club CSV

Preview changes before anything is saved.

Choose file

No file selected

Missing snapshot rows need a choice

Keep or remove each missing copy explicitly. Import never deletes it for you.

History timeline

Events expose provenance and keep changes understandable.

Club copy added23 SEP 2026 · 10:30
Imported from a reviewed CSV batch.
Ownership updated23 SEP 2026 · 11:15
First owner changed from unknown to yes.
EVO noted23 SEP 2026 · 12:00
Evolution details attached to the same permanent club entry.

Tabs & comparison

Use tabs for related views of the same item.

Exact card: Special · 90 OVR · ST · FC26.
Club Entry ID: CLUB-000184

Squad pitch

Position slots are real buttons; the pitch lines are CSS.

10 / Quality rules

Accessible by default

Accessibility is part of the component contract, from keyboard states to honest status messages.

KEYBOARD / SEMANTICS / MOTION

Interaction rules

Visible focus: every interactive element gets a clear orange outline.
Keyboard first: links, buttons, selects, tabs, and dialog work without a pointer.
Native semantics: use button, input, select, table, dialog, and time for their actual roles.
Text with color: “Review required” stays clear without orange or amber perception.
Reduced motion: animation and smooth scrolling respect system preference.

Content rules

Preserve uncertainty: show “Unknown” instead of guessing a value.
State consequences: destructive actions say what is removed and what is kept.
Make recovery clear: errors give the next usable action.
Use exact identities: reveal release, card variant, and permanent Club Entry ID where decisions need them.
Keep mobile complete: all critical data and controls must remain reachable at narrow widths.

Built for thedecisions behindthe squad.