Reference

Design system

The visual language for everything FLICKED ships: the website, the launcher, the dashboard, and these docs. Dark, neutral, lots of space, and one accent.

The website is the reference implementation, and its tokens live in website/app/globals.css. This site uses the same tokens.

Principles#

Clean and quiet

Dark, neutral, lots of space. The calm of a Valve product page, not a gaming RGB setup.

One accent

Orange is the only saturated colour. If everything is orange, nothing is.

The product is the picture

Show real UI (scoreboards, queues, server status) instead of decoration. No stock art, no abstract 3D.

Plain words, and honest

Anyone should understand a label without CS jargon. FLICKED is alpha: say so, and never fake numbers.

Tried and removed#

These looked "cool" and made the product feel cheap. Do not bring them back: laser beams and glowing blobs behind content, custom crosshair cursors, text scramble effects, italic or skewed headings and buttons, animated counters, spotlight-on-hover cards, floating collage hero layouts, and em dashes in copy.

Colour#

Dark only. There is no light theme.

Neutrals#

#0c0c0d

surface

#131315

elevated

#19191c

foreground

#ffffff

muted

#b4b4b8 · body

subtle

#8d8d93 · captions

faint

#5a5a60 · decor only

Accent and status#

primary

#f65600

primary-light

#ff7a33 · text

slate

#7d8aa0 · other team

warning

#e0b341 · pending

primary is sampled from the logo: primary buttons, active states, live dots, progress fills, highlighted heading words.
primary-light is for orange text on dark: links, positive deltas, the focus ring.
Text on an orange button is near-black #0c0c0d (5.8:1), never white (3.4:1).

Contrast#

Text colour	on bg	on surface	on elevated
`foreground`	19.6	18.6	17.5
`muted`	9.5	9.0	8.5
`subtle`	5.9	5.6	5.3
`primary-light`	7.5	7.1	6.8
`primary`	5.8	5.5	5.2
`slate`	5.6	5.3	5.0
`faint`	2.9	2.7	2.6

faint fails WCAG for text and is for decoration only: dividers, disabled states, placeholder glyphs.

Typography#

Display · Barlow Condensed 700

Everything a pug night needs. Nothing rented.

Headings only. Uppercase, upright, tight line height.

UI and body · Inter

Card title, sentence case

Body text is muted, with lines kept under about sixty characters.

Data · JetBrains Mono

13 – 9 · 1,482

Numbers, IDs, logs, labels

Headings are two beats: a statement in white, then a short payoff in primary.
The FLICKED wordmark is the only italic text anywhere, matching the logo's slant.
Numbers that update or line up use font-variant-numeric: tabular-nums.

Name	Size	Style
Hero	`clamp(3.1rem, 8.5vw, 6rem)`	Display, line-height 0.92
Section heading	`clamp(2.4rem, 4.6vw, 3.7rem)`	Display, line-height 0.95
Card title	18px	Inter 600, `-0.01em`
Body large	16.5 to 17px	Inter 400, line-height 1.65
Body	14.5px	Inter 400, `muted`
Label (eyebrow)	12px	Mono 500, uppercase, `.12em`, `subtle`

Layout and shape#

Base unit 4px. Common steps: 8, 12, 16, 24, 28, 40, 56, 64, 96. Content max-width 1400px, card padding 28px, 14px between cards.

4 · tags

6 · buttons

8 · wells

10 · tiles

12 · cards

999 · dots

Depth comes from surface colour and borders, not glow. Shadows are black and soft; coloured shadows and glows are off-brand.

Plane	Background	Border	Shadow
0 · page	`bg`	none	none
1 · card	`surface`	`rgba(255,255,255,.08)`	none
2 · raised	`elevated`	`rgba(255,255,255,.10)`	`0 20px 60px rgba(0,0,0,.5)`

Components#

Buttons#

Primary is primary fill with near-black text, hover #ff6414. Outline is transparent with a .14 border, .28 on hover. 42px tall, 6px radius. One primary button per view.

Status, tags and progress#

Live Starting Finished de_mirage

Status is always a dot plus a word, never colour alone. Progress bars are 4px tall on a .08 track.

Cards#

surface background, 12px radius, .08 border. Inside: a 40px icon tile with an orange tint, an 18px title, one sentence, and a small labelled picture of the feature. Hover only brightens the border: no lifts, no glows.

Icons and motion#

Icons are line icons on a 24px grid with a 1.7px stroke, round caps and joins, no fill. Lucide matches. 20px in a 40px tile; 16px in buttons.
Motion is quiet and never needed to understand the UI: 150 to 250ms for state changes, easing cubic-bezier(.22,.61,.36,1), and prefers-reduced-motion always respected.

Writing#

Plain language. "Damage per round", not "ADR". "Match replays", not "Demos".
When a CS term is the right word, keep it and explain it once nearby.
No em dashes. Use a full stop, comma or colon.
Sentence case for buttons and labels: "Get started", "Report an issue".
Be upfront about alpha status and missing features.

The launcher#

The launcher renders web UI, so the tokens apply directly, at tool density: section padding drops to 24 to 32px and headings to the h3 size or smaller. A dark custom titlebar with a .06 hairline, a left sidebar with 36px nav items, and one orange action on screen ("Find match", "Accept", "Connect"). The match found dialog is the one place a bigger moment is fine: a plane-2 dialog with the countdown and ten player slots, filled orange when accepted.

Tokens#

Tailwind v4 · @theme

@theme {
  --color-bg: #0c0c0d;
  --color-surface: #131315;
  --color-elevated: #19191c;
  --color-foreground: #ffffff;
  --color-muted: #b4b4b8;
  --color-subtle: #8d8d93;
  --color-faint: #5a5a60;
  --color-primary: #f65600;
  --color-primary-light: #ff7a33;
  --color-slate: #7d8aa0;
  --shadow-plane2: 0 20px 60px rgba(0, 0, 0, 0.5);
}

CSS custom properties

:root {
  --line-soft: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --radius-control: 6px;
  --radius-well: 8px;
  --radius-tile: 10px;
  --radius-card: 12px;

  --ease: cubic-bezier(.22, .61, .36, 1);

  --font-display: "Barlow Condensed", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

Brand assets#

FLICKED

The logo (assests/icon.png) is an orange slanted F with a player silhouette. Do not recolour, outline or rotate it; minimum 20px tall. The wordmark is Barlow Condensed 700 italic, white, 23px next to a 30px logo.