Fitted · v1

Fitted design system

A small, token-based system with a Stripe-inspired structure: one primary and one secondary colour, calm neutrals, light and dark themes, and WCAG AA contrast throughout. Every screen in Fitted is built from the tokens and components on this page.

Use the theme toggle in the header to see dark mode.

26

Colour tokens

2

Themes

13

Components

AA

Contrast

How tokens work

Colours are CSS custom properties. Dark mode swaps the values under one attribute, so components never branch on theme and a single utility class works in both.

CSS variable → Tailwind utility

/* 1. app/globals.css: a raw value per theme */
:root               { --c-primary: #0b63ce; }
[data-theme="dark"] { --c-primary: #4c9aff; }

/* 2. Expose it to Tailwind v4 */
@theme inline {
  --color-primary: var(--c-primary);
}

/* 3. Components use the utility, never the hex */
<button className="bg-primary text-on-primary hover:bg-primary-hover">

Colour

Each swatch shows the variable, the Tailwind utility it powers and its light and dark values. Swatches render the live variable, so they follow the current theme.

Brand

One primary blue for action and focus, one secondary teal for success and accepted changes.

  • --c-primary

    bg-primary

    Primary actions, focus rings

    Light value #0b63ce, dark value #4c9aff

  • --c-primary-hover

    bg-primary-hover

    Primary hover

    Light value #0a56b3, dark value #6aabff

  • --c-on-primary

    text-on-primary

    Text on primary

    Light value #ffffff, dark value #0b1220

  • --c-primary-subtle

    bg-primary-subtle

    Info tints, ring track

    Light value #e8f1fc, dark value #13294a

  • --c-primary-text

    text-primary-text

    Links, active tab

    Light value #0a56b3, dark value #8cc2ff

  • --c-secondary

    bg-secondary

    Accepted, success actions

    Light value #0d7a70, dark value #2cc3b0

  • --c-secondary-hover

    bg-secondary-hover

    Secondary hover

    Light value #0a665e, dark value #4fd3c2

  • --c-on-secondary

    text-on-secondary

    Text on secondary

    Light value #ffffff, dark value #0b1220

  • --c-secondary-subtle

    bg-secondary-subtle

    Insertions, success tints

    Light value #d9f3ef, dark value #0f2f30

  • --c-secondary-text

    text-secondary-text

    Success text

    Light value #08594f, dark value #8ce8db

Neutrals

Surfaces step up from canvas; ink steps down in emphasis. Borders separate, inputs outline.

  • --c-canvas

    bg-canvas

    Page background

    Light value #f7f8fa, dark value #0b1220

  • --c-surface

    bg-surface

    Cards, header

    Light value #ffffff, dark value #0f1829

  • --c-surface-muted

    bg-surface-muted

    Hover, wells

    Light value #f2f4f7, dark value #141f33

  • --c-band

    bg-band

    Hero band

    Light value #e8f1fc, dark value #0f2340

  • --c-ink

    text-ink

    Body text, headings

    Light value #0d1b2a, dark value #e6ebf2

  • --c-ink-2

    text-ink-2

    Secondary text

    Light value #475467, dark value #a3b0c2

  • --c-ink-3

    text-ink-3

    Captions, labels

    Light value #5d6b7e, dark value #8b99ad

  • --c-border

    border-border

    Dividers, card edges

    Light value #e4e7ec, dark value #1f2b40

  • --c-border-strong

    border-border-strong

    Secondary buttons

    Light value #d0d5dd, dark value #2b3a55

  • --c-input

    border-input

    Form control outline (3:1)

    Light value #7d8799, dark value #62738f

Meaning

Reserved for state. Danger for errors and deletions, warning for things to double-check.

  • --c-danger

    text-danger

    Errors, deletions

    Light value #b42318, dark value #ff8a80

  • --c-danger-hover

    bg-danger-hover

    Destructive button hover

    Light value #912018, dark value #ffa39b

  • --c-on-danger

    text-on-danger

    Text on danger

    Light value #ffffff, dark value #0b1220

  • --c-danger-subtle

    bg-danger-subtle

    Error backgrounds

    Light value #fef3f2, dark value #3a1414

  • --c-warning-text

    text-warning-text

    Warning text

    Light value #8a4b00, dark value #ffc97a

  • --c-warning-subtle

    bg-warning-subtle

    Warning backgrounds

    Light value #fff4e0, dark value #33270f

Typography

Inter throughout. Size / weight / letter-spacing; tight tracking on large sizes only.

  • Display

    48 / 700 / -2.5%

    Tailor your resume

  • H1

    24 / 600 / -2.5%

    Your match score

  • H2

    16 / 600

    Missing keywords

  • Body

    15 / 400 / 1.6

    Fitted suggests honest changes line by line and never adds experience you don't have.

  • Small

    14 / 400

    Paste the full posting for the best match.

  • Caption

    12 / 400 · ink-3

    Saved on this device · 2 minutes ago

Spacing, radius, shadow

A 4px base grid, three radii plus pill, and three soft shadows tinted by the theme.

Spacing

  • 4px, Tailwind step 1
  • 8px, Tailwind step 2
  • 12px, Tailwind step 3
  • 16px, Tailwind step 4
  • 24px, Tailwind step 6
  • 32px, Tailwind step 8
  • 48px, Tailwind step 12
  • 64px, Tailwind step 16

Bars drawn at 3× scale. Labels show the Tailwind step (p-4 = 16px).

Radius

  • sm

    6px

    Badges, inline marks

  • md

    10px

    Inputs, alerts

  • lg

    14px

    Cards, panels

  • pill

    9999px

    Buttons, chips

Shadow

  • shadow-sm

    Resting cards, buttons

  • shadow-md

    Hover, popovers

  • shadow-lg

    Raised panels

Components

Small primitives in components/ui hold every styling decision; screens only compose them. Overrides go through cn(), which merges Tailwind classes safely.

Button

Pill-shaped. One primary action per view; secondary for alternatives, ghost for low-emphasis, success to confirm an accepted state, danger for destructive confirmations.

<Button variant="primary" size="md"> · buttonClasses("secondary") for links

Size md

Size sm

States

Link styled as button

Badge

Short status labels. Tone carries meaning; pill for keyword chips.

<Badge tone="success" pill>

NeutralPrimarySuccessWarningDanger
TypeScriptReactKubernetesGraphQL

Field and Textarea

Label above, hint below, 4px focus ring in primary.

<Field id label hint hintId><Textarea aria-describedby /></Field>

Paste the full posting for the best match.

Alert

Inline messages on a subtle tinted background. role="alert" for errors, "status" for notes.

<Alert tone="warning" title actions>

Couldn't read that file

The PDF looks scanned. Paste the text instead.

Check two suggestions

They add details we couldn't find in your resume.

Sample data

You're viewing a demo run with a sample resume.

Saved to history

This run is stored on this device only.

Tabs

Radix Tabs: arrow-key navigation, panels stay mounted.

<Tabs><TabList><Tab /></TabList><TabPanel /></Tabs>

Match score, matched and missing keywords, strengths and gaps.
Line-by-line suggestions you accept, reject or edit.
A short cover letter drafted from your real experience.

ScoreRing and Stat

The match score at a glance, with supporting numbers.

<ScoreRing score={72} size="md" /> · <Stat value label />

357294

12

Keywords matched

4

Missing

9 / 11

Accepted

Skeleton

Loading placeholders shaped like the content they replace; pulse stops with reduced motion.

<Skeleton className="h-4 w-2/3" />

CopyButton

Copies to the clipboard and announces the result to screen readers.

<CopyButton text label="Copy letter" />

ConfirmDialog

Replaces browser confirm boxes (lint bans alert, confirm and prompt). Focus starts on Cancel; Escape cancels, the backdrop doesn't. An async onConfirm shows Working… until it settles.

<ConfirmDialog open onOpenChange title description confirmLabel tone="danger" onConfirm />

SuggestionCard

The core review unit: a word-level diff with accept, reject and edit. Try the buttons; these examples are live.

<SuggestionCard original newText reason verify decision onChange />

pending

Check this: it adds a detail not found in your resume

Original

Built dashboards for the sales team.

Suggested

Built React dashboards that cut weekly sales reporting time by 40%.

Names the stack the posting asks for and shows the impact.

accepted

Original

Worked on the design system.

Suggested

Led a token-based design system used across four product teams.

Leadership and scope are in your resume; this makes them visible.

rejected

Rejected

Original

Helped with testing.

Suggested

Introduced Playwright end-to-end tests covering checkout.

The posting emphasises automated testing.

Principles

  • One primary action per view

    Every screen has a single blue button. Everything else is secondary or ghost.

  • Colour carries meaning, not decoration

    Blue means act, teal means accepted, red means wrong, amber means check this.

  • Every state is designed

    Loading, empty, partial and error states get the same care as the happy path.

  • Accessible by default

    AA contrast in both themes, visible focus rings, full keyboard support and reduced motion.