OLVYX / Design system
Shared HTML referenceChoices open
Product design language

One language.
Many OLVYX
products.

A shared foundation for every OLVYX Lab app. The FC Club Tracker look is the provisional visual base, with FC Coach differences preserved as visible choices. Product-only patterns have dedicated sections below. Every specimen is HTML and CSS, with small JavaScript interactions.

System statusOne source to refine together

Review the paired colors and component variants below. Your selections will turn this draft into the final global standard. Existing app design references remain untouched.

FOUNDATIONS / COMPONENTS / PROJECTS
Open decisions / 01

Compare & choose

Each pair shows the two original values edge to edge, with no border or gap between the colors. FC Club Tracker is on the left, FC Coach on the right. The left palette powers this draft while your choices are open.

LEFT / CLUB · RIGHT / COACH
Decision status: open. These pairs are alternatives, not two simultaneous production tokens. Tell me which side to keep for any row, or ask for a new value. Exact matches are shared directly.

Canvas

Canvas#0C1117
Canvas#0D1117
FC Club Tracker #0C1117FC Coach #0D1117

Surface

Surface#171D24
Surface#161B22
FC Club Tracker #171D24FC Coach #161B22

Elevated

Elevated#232A32
Elevated#21262D
FC Club Tracker #232A32FC Coach #21262D

Input

Input#0D1218
Input#0D1117
FC Club Tracker #0D1218FC Coach #0D1117

Border

Border#2B3540
Border#30363D
FC Club Tracker #2B3540FC Coach #30363D

Action orange

Action orange#FF7800
Action orange#FF7A00
FC Club Tracker #FF7800FC Coach #FF7A00

Orange hover

Orange hover#FF922E
Orange hover#FF9A3D
FC Club Tracker #FF922EFC Coach #FF9A3D

Primary text

Primary text#F3F4F6
Primary text#F0F3F6
FC Club Tracker #F3F4F6FC Coach #F0F3F6

Secondary text

Secondary text#A8B1BF
Secondary text#8C959F
FC Club Tracker #A8B1BFFC Coach #8C959F

Metadata muted

Metadata muted#718096
Metadata muted#8C959F
FC Club Tracker #718096FC Coach #8C959F

Success

Success#22C55E
Success#3FB950
FC Club Tracker #22C55EFC Coach #3FB950

Danger / error

Danger / error#EF4444
Danger / error#F85149
FC Club Tracker #EF4444FC Coach #F85149

Information

Information#4EA1FF
Information#1F6FEB
FC Club Tracker #4EA1FFFC Coach #1F6FEB

Colors with different meanings

FC Club Tracker warning #F59E0B and FC Coach draw #F2B84B are both warm amber, but they communicate different facts. Keep both semantic names until you decide whether their hues should match.

Warning#F59E0B
Draw outcome#F2B84B
FC Club TrackerFC Coach

Typography choice

Both use compact type, but the font family and weight hierarchy differ.

FC Club Tracker · InterPage title
Body 14 / 400
IBM Plex Mono for IDs
FC Coach · Segoe UIPage title
Body 14 / 400
System font for metadata

Primary button choice

The orange hues and label colors differ. Compare these on the same background.

FC Club Tracker
FC Coach

Active navigation choice

The Club treatment is a filled tab; Coach adds a left rail.

FC Club TrackerDashboard
FC CoachDashboard

Selected checkbox choice

The Club variant outlines the selected row. Coach uses an orange rail and fade.

FC Club Tracker
FC Coach

Geometry and responsive behavior

  • Sidebar widthClub 254px · Coach 248px
  • Control heightClub 38px · Coach select 36px
  • Control radiusClub 7px · Coach select 4px; general control 7px
  • Small-screen navigationClub bottom bar · Coach desktop reference hides the sidebar at narrow width
  • Shared valuesCard radius 10px · 20px card padding · 10px action gap · dark surfaces · orange active state
01 / Foundations

Color

This is the provisional global palette based on FC Club Tracker. The paired alternatives above stay open for review; semantic names describe use, not a final hue choice.

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

The provisional global typography uses the Club Tracker pairing. The Coach system-font option remains visible in Compare & choose.

TYPE / 02
Display / 58The workspace at a glance
Page / 34My workspace
Section / 20Recent activity
Card / 15Item details
Body / 14Review the details before saving a change.
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
APP · RECORD-000184 · 2026-09-23
Typography tokens
Inter 400 / 500 / 600 / 700 / 800IBM Plex Mono 400 / 500 / 600
i
Keep labels human

Use a clear metric name in prose and reserve abbreviated IDs for metadata.

03 / Foundations

Spacing & shape

Shared compact rhythm. The 4/8/12/16/24/32/48 scale is provisional; FC Coach also uses 14/20/28/36 in its retrospective reference.

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

Spacing scale

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

4
8
12
16
24
32
48

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

The Club Tracker shell is the provisional web pattern. The FC Coach desktop shell differs in active rail and sidebar width; see the comparison above.

DESKTOP → MOBILE

Application shell

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

Responsive
● Workspace synced locallyWorkspace⌄

Workspace overview

The next useful action at a glance.

Ready

Responsive grid

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

Players
124
Current copies
Complete
98
Reviewed items
Updates
7
Recent changes
Reviews
3
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.

i
Choose words by outcome

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

06 / Components

Forms & selection

Labels, help, validation, and unknown values remain visible. The shared dropdown already draws on the FC Coach field, arrow segment, and dark option menu.

INPUT / SELECT / CHOICE

Dropdown states

Choose a value, open the menu, or use Arrow keys, Enter, and Escape. The disabled example stays unavailable.

Closed / default
Disabled
Open menu

The selected option uses an orange label on a warm dark row. Selecting an option closes the menu.

Fields

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

Category

Choices & progressive controls

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

Source
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 items are complete.

Inline alerts

Placed near the decision or result they describe.

Changes saved

Records and history were saved.

Three rows need review

Resolve each item before you commit.

Steps, dialogs & toasts

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

✓UploadFile received
2ReviewResolve open items
3CommitSave audit record
08 / Components

Data display

Use clear headings, aligned values, readable status text, and an explicit empty state. Tables, cards, and metrics should use the same global tokens.

TABLE / METRIC / EMPTY
Active items
124
Example value
Completed
98
Example value
Needs attention
3
Example value

Data table

Use semantic table markup when comparing rows. Put the identity first, then status and last change.

Example workspace items
ItemStatusUpdated
Example AReadyToday
Example BReviewYesterday

Empty state

Say what is missing and offer a useful next step.

No items yet

Create the first item to fill this workspace.

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 relevant record IDs, provenance, and versions where decisions need them.
  • Keep mobile complete: all critical data and controls must remain reachable at narrow widths.
FC Club Tracker / Data

Exact-card 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
6
Review when ready

Player table

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

FC26
Example club inventory
PlayerCardScoreOwnershipStatus
Alex Morgan
CLUB-000184		Special · 90 OVR · ST91.8First ownerReady
Sam Kerr
CLUB-000185		Gold · 89 OVR · ST87.4UnknownReview
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.

90
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.

FC Club Tracker / Workflows

Club workflows

These examples apply to the club product: exact-card import, ownership history, card views, and squad placement. The components above remain global.

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.

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.

  1. Club copy added

    Imported from a reviewed CSV batch.

  2. Ownership updated

    First owner changed from unknown to yes.

  3. EVO noted

    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.

FC Coach / Product patterns

Evidence-led coaching

These patterns belong to the Coach product. Their dark surfaces, action hierarchy, and status rules use the shared foundation; the details below describe recording and coaching workflows.

PLAYBACK / OBSERVATION / MATCH
FC COACH ONLY

Playback and observation

Pause on a decision, choose a range, classify it, and save a durable observation. The timeline is CSS and the controls are HTML.

1:00–1:07 · Central recovery

I forced the pass instead of recycling possession.

Manual observation
FC COACH ONLY

Match outcome is context

W/D/L is a compact match result beside the score, separate from analysis and coaching quality. The warm draw color has a distinct meaning from a warning.

Match
D2 – 2
Result entered manually · evidence remains independent
W · winD · drawL · loss— · not set
FC COACH ONLY

Training and improvement

Choose one to three focus rules after reviewing a match. Show trend only when the evidence supports it; keep self-assessment distinct.

Current focus

Central recovery

9 saved moments across 3 matches.

Improving
FC COACH ONLY

Operational trust gates

Local jobs, storage, provider cost, and automated analysis availability need explicit prerequisites and recovery copy.

  1. Labelled set

    Enough reviewed observations exist.

  2. Approved results

    Evaluation evidence has passed review.

  3. Local gate

    Only then can an automated package be built.

Capability is not a result

“Automated analysis available” says nothing about whether a match was analyzed.

Adoption / One source

Use in an OLVYX app

Start with the global tokens and components. Add a named project section here only when a pattern or rule has meaning in one product.

SHARED FIRST

Implementation contract

  • Global: load tokens.css and styles.css as the visual baseline.
  • Semantic tokens: use action, surface, text, border, success, warning, danger, and info by meaning.
  • Product variation: document the reason and examples in that product's section here. Avoid a separate design-system site.
  • Pending choices: keep the left-hand Club values as provisional defaults until you select final variants.

Sources and scope

This shared reference was assembled from the public FC Club Tracker design page and the local FC Coach retrospective design document. Both originals are preserved.

FC Club Tracker reference ↗

FC Coach source: local retrospective HTML, inspected 25 September 2026. This page uses no bitmap images or SVG illustrations; visual elements are HTML and CSS.

Design reference

The controls here demonstrate interaction and styling. They do not connect to either app's data or change either app.

Remove this club copy?

This example shows the confirmation pattern. In the app, removal keeps the history record and requires an explicit decision.