Skip to content
Virtus

Phase 0 foundation

Style guide

Every token the web app is built on, rendered from the same CSS the product uses. Contrast ratios are computed from the token values on this page, not typed in by hand.

Color

Warm, opaque surfaces that rise in lightness as they come forward. Gold marks the one thing to act on; green and red carry real signals.

Surfaces

Elevation by lightness. Each layer sits on the one before it.

well

surface-0

surface-1

surface-2

surface-3

surface-4

TokenHexUse
--color-well#080705Sidebar, inputs, recessed wells
--color-surface-0#100E0APage background
--color-surface-1#1A1712Sections, panels
--color-surface-2#1F1B15Cards
--color-surface-3#332E25Raised, hover, selected
--color-surface-4#524B3EPopovers, menus

Text

Ratios against the page and against a card.

  • Aa--color-fg#F4EFE4 Primary textpage16.81:1AAAcard14.93:1AAA
  • Aa--color-fg-secondary#CDC5B4 Secondary textpage11.23:1AAAcard9.98:1AAA
  • Aa--color-fg-muted#A89F8E Meta, captions, axis labelspage7.35:1AAAcard6.53:1AA
  • Aa--color-fg-subtle#8B8272 Placeholder, disabled (not for body copy)page5.08:1AAcard4.51:1AA
  • Aa--color-fg-on-accent#100E0A Text on gold, success or danger fillson gold10.54:1AAA

Gold

Brand accent. Around 5% of a screen at most; never a panel fill.

gold-100

#FFE3CA

gold

#FFB020

gold-600

#EDA50E

gold-hover

#CC8D1A

gold-700

#BD8002

  • --color-gold-100 Focus ring
  • --color-gold Primary accent, CTAs
  • --color-gold-600 Pressed accent
  • --color-gold-hover Accent hover
  • --color-gold-700 Deep accent, rails

Medals

Podium rank rings. Rank 1 uses gold; these cover 2 and 3.

--color-medal-silver#C9C3B8 Rank 2 ring and numeralcard9.77:1AAA
--color-medal-bronze#C7834F Rank 3 ring and numeralcard5.53:1AA

Status

Every status ships with an icon or label, never color alone.

VerifiedFilled
--color-success#14C25E Positive deltas, confirmations
page8.17:1AAAcard7.26:1AAAraised5.71:1AA
DeclinedFilled
--color-danger#FF8073 Errors, destructive actions
page7.88:1AAAcard7.00:1AAAraised5.51:1AA
Pending reviewFilled
--color-warning#F9C936 Caution, pending review
page12.33:1AAAcard10.96:1AAAraised8.62:1AAA
New feedbackFilled
--color-info#6AA6FF Neutral notices, links in prose
page7.81:1AAAcard6.94:1AAraised5.46:1AA

Borders

Only control outlines carry meaning, so only they need 3:1.

--color-border#332E25 Hairlines, dividers
Decorative, no contrast minimum
--color-border-strong#524B3E Card outlines on raised surfaces
Decorative, no contrast minimum
--color-border-input#7A7060 Form control outlines (3:1 non-text)
on card3.51:1AA large

Type

Archivo, wide and uppercase, for names, ranks and titles. Inter for everything you read. JetBrains Mono for labels and metadata.

Display and headings

Archivo. Display is 900 at 112% width; headings are 800 at 108%.

  • display-xl

    Player name

  • display-lg

    Top prospects

  • display-md

    Season record

  • heading / h3

    Season stats

  • heading / h5

    Upcoming sessions

  • heading / h6

    Coach feedback

Body

Inter. 14px is the working size inside the app.

  • text-lg / Inter 18

    Every stat travels with the athlete.

  • text-base / Inter 16

    Request a session with a verified coach.

  • text-sm / Inter 14

    Default size for dense app views and tables.

  • text-xs / Inter 12

    Updated after your last game.

Mono label

label-mono

How it connects

Points per game

Last updated

Stat numerals

stat-numeral, tabular figures keep columns aligned

Proportional

11.1

84.0

100.7

Tabular

11.1

84.0

100.7

Buttons

Pills built only from tokens. Press to feel the 0.97 scale; tab through them to see the gold focus ring.

Variants

primary

One per view. The thing to do next.

secondary

Gold outline for the alternative action.

ghost

Toolbars, dismissals, low-priority actions.

danger

Destructive and irreversible actions.

Sizes and states

sm 32px, md 40px, lg 48px

Shape and depth

Depth comes from lightness first. Shadows add separation; gold glows mark the single featured element.

Radii

radius-xs

4px, tags

radius-sm

8px, inputs

radius-md

12px, tiles

radius-lg

16px, cards

radius-xl

20px, panels

radius-2xl

28px, hero panels

radius-full

pills, buttons

Shadows

shadow-card

Cards

shadow-popover

Menus, popovers

shadow-glass

Sticky bars, overlays

shadow-glow

Featured stat

shadow-glow-strong

Featured, hovered

Focus

2px gold-100 outline, 3px offset, on every focusable element

Focused buttonSearch players

Charts

Seven categorical hues that sit with the gold brand and stay distinct for protanopia and deuteranopia. Assign slots in order; a series keeps its color when filters change.

Categorical palette

Ratios against the page. All clear 3:1 for marks.

  1. 1 Amber

    --color-chart-1#C98500
    6.27:1AA

  2. 2 Magenta

    --color-chart-2#D55181
    4.88:1AA

  3. 3 Blue

    --color-chart-3#3987E5
    5.29:1AA

  4. 4 Teal

    --color-chart-4#199E70
    5.66:1AA

  5. 5 Violet

    --color-chart-5#9085E9
    6.16:1AA

  6. 6 Vermilion

    --color-chart-6#D95926
    4.96:1AA

  7. 7 Cyan

    --color-chart-7#1D9AB8
    5.84:1AA

In use

Illustrative values, stacked so every adjacent pair touches

  • Series 1
  • Series 2
  • Series 3
  • Series 4
  • Series 5
  • Series 6
  • Series 7
Sample A
Sample B
Sample C
Adjacent CVD separation
ΔE 13.2
Target 8 (OKLab × 100, protan and deutan)
Normal-vision separation
ΔE 19.3
Floor 15
Scatter and maps
Slots 1 to 3
Validated for all pairs; fold the rest into Other

Motion

One curve and three durations. No scroll reveals or parallax inside the app.

Easing curve cubic-bezier(0.22, 1, 0.36, 1)

ease-out-expo

cubic-bezier(0.22, 1, 0.36, 1)

All three use the same curve. Only the duration changes.

  • 140ms Hover, press, color changes

    duration-fast

  • 220ms Panels, tabs, popovers

    duration-base

  • 360ms Sheets, dialogs, page-level changes

    duration-slow

With reduced motion enabled in your system settings, every transition completes instantly.