Illusion/sharper.ly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Match the shipped styling to the Claude Design drafts

Browse Source 
An audit of all twelve draft files against the build turned up a set of
mismatches, most of them in the tier-2 token layer rather than in any one
component. Tier 1 is untouched throughout - only the meanings moved.

SHAPE. The drafts draw three corners, not five: 2px for a tag, thumbnail,
flag or checkbox, 4px for anything with a box, and fully round for a filter
chip or status pill. Nothing in any draft is 8px or 12px. --radius-card and
--radius-surface therefore come down to radius/sm, a --radius-chip is added
for the 2px tier, and --radius-control-lg - a quirk of the Figma Button
frame's ghost cells - is retired along with its four consumers.

ELEVATION. A shadow is a fraction of the ground it falls on, and the ramp
was tuned for a white page: on the drafts' near-black ground a 12-28% black
is invisible. Tier 1 gains the two deep steps the drafts actually draw
(--shadow-dark-lg/xl), and --elevation-card/-popover/-modal move into the
per-surface blocks so the dark surface can take them while the light one
keeps the soft ramp. A resting card now has no shadow at all - the drafts
separate with a hairline - and the black is spent on what floats.

CARDS. The hover was a white-24% hairline and a faint glow; the drafts turn
the hairline accent green, lift the card 6px and land a deep black under it.
The lift is pointer-only and is dropped under prefers-reduced-motion.

GHOST IS A TEXT LINK. The drafts never fill a ghost control - every
"All updates ->" is plain text that turns green while the label-to-arrow gap
opens. The tokens carry no fill in any state and the variant opts out of the
3px lift, which also retires the WCAG workaround the old Figma hover forced
(green label on a green fill, 1.40:1).

NAVIGATION. A nav label rests in text/secondary and brightens to primary;
the current section stays primary and is marked by the accent rule, not by
green text.

HERO STRIPE. The middle block was painted near-black against a comment
claiming the redesign had dropped white; the drafts paint it #F8F9FA. Back
to background/inverse, and to the drafts' 390 : 495 : 363 split.

styles/README.md is updated to match, including a contrast table that still
described --surface-raised as the retired #2e2e2c.

Not changed, because each is a decision rather than a defect: the drafts set
every eyebrow, tag and meta line in IBM Plex Mono at 10-11px with 1.2-1.4px
tracking (a third typeface, and no Arabic counterpart); draft headings are
weight 800, which needs a font file we do not have; and the EU badge
statement stays at --text-primary, since the visibility lockup is
contractual.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Illusion
2026-09-20 11:14:15 +02:00
co-authored by Claude Opus 5
parent aedef6daeb
commit 19fab4a783
19 changed files with 197 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/styles/README.md
+49 -24
View File
@@ -60,7 +60,8 @@ A Tailwind 4 `@theme static` block. Raw ramps only, named by value:
`--font-weight-regular..black`
* space `--spacing-2xs..5xl` - radius `--radius-none..full` -
border width `--border-width-sm..xl` - opacity `--opacity-0..100`
* shadow `--shadow-xs..xl` - duration `--duration-instant..slower` -
* shadow `--shadow-xs..xl` plus the dark-ground steps `--shadow-dark-lg|xl` -
duration `--duration-instant..slower` -
easing `--ease-standard | decelerate | accelerate | emphasized`
* z ladder `--z-0..70` - containers `--container-prose | content | wide`
@@ -90,6 +91,25 @@ Plain CSS custom properties whose value is always `var(--<primitive>)`. Families
`--focus-ring-*` `--overlay-*` `--radius-*` `--control-*` `--layout-*`
`--elevation-*` `--motion-*` `--layer-*` `--type-body-base-*`
Two families are worth knowing by heart, because both were retuned to the
Claude Design drafts rather than to the older Figma Button frame:
* **Shape.** The drafts draw three corners, not five. `--radius-chip` (2px) for
a tag, thumbnail, flag or checkbox; `--radius-control` / `--radius-card` /
`--radius-surface` (all 4px) for a button, field, menu, card or panel;
`--radius-pill` for a filter chip or status pill. Nothing in the drafts is
8px or 12px, which is why the old `--radius-control-lg` is gone. The tier-1
ramp still carries `--radius-md` / `--radius-lg` - only the meanings moved.
* **Elevation.** A shadow is a fraction of the ground it falls on, so
`--elevation-card`, `--elevation-popover` and `--elevation-modal` are
declared **per surface**. On the dark surface a resting card has no shadow at
all (the drafts separate with a hairline) and the deep black - tier 1's
`--shadow-dark-lg` / `--shadow-dark-xl`, the drafts' own
`0 20px 44px rgba(0,0,0,.5)` and `0 24px 48px rgba(0,0,0,.6)` - is spent on
what actually floats: a card under the pointer, the nav dropdown. The light
surface keeps the soft ramp. Only `--elevation-flat` and `--elevation-raised`
are surface-independent.
Interactive tokens are fully regular - for each of the five Figma button
variants (`primary`, `secondary`, `dark`, `danger`, `ghost`) there is
@@ -163,12 +183,14 @@ Filenames are case-sensitive in production - match the table exactly.
## Known deviation from Figma
The published Ghost button hover paints `background/accent` (`#008764`) and keeps
`base/turquoise-dark` (`#006b4f`) as the label - 1.40:1, which fails WCAG AA.
`--interactive-ghost-fg-hover` is therefore `--color-white` on **both** surfaces
(4.52:1, passes AA for body text). The two lines are marked `(a11y)` in
`semantic.css`; revert them to `var(--color-green-700)` for pixel-exact parity
if the designer prefers the failure.
**Ghost is a text link, not a button.** The published Figma Ghost cell fills on
hover (`background/accent` behind a `base/turquoise-dark` label - 1.40:1, a
WCAG AA failure). The Claude Design drafts never fill a ghost control: every
"All updates ->" / "What we do ->" is plain text in `--text-primary` that turns
accent green under the pointer while the label-to-arrow gap opens from 8px to
12px. The drafts win, so the ghost tokens carry no fill in any state, the
variant opts out of the 3px lift in `Button.css`, and the old a11y workaround
is no longer needed.
## Contrast audit
@@ -179,25 +201,26 @@ bold) and for non-text UI boundaries (1.4.11).
### Dark surface (`:root`, `[data-surface="dark"]`)
| text token | page `#1d1d1b` | raised `#2e2e2c` | sunken `#0b0b0a` | muted (white 8%) | accent-subtle (green 24%) | danger-subtle (red 24%) |
| text token | page `#1d1d1b` | raised `#141413` | sunken `#0b0b0a` | muted (white 8%) | accent-subtle (green 24%) | danger-subtle (red 24%) |
| --- | --- | --- | --- | --- | --- | --- |
| `--text-primary` neutral-50 | 16.02 | 12.91 | 18.68 | 12.71 | 12.40 | 12.86 |
| `--text-secondary` neutral-300 | 9.46 | 7.63 | 11.04 | 7.51 | 7.32 | 7.60 |
| `--text-tertiary` neutral-400 | 5.56 | 4.48 | 6.48 | 4.41 | 4.30 | 4.46 |
| `--text-accent` / `--text-link` green-400 | 6.02 | 4.85 | 7.02 | 4.78 | 4.66 | 4.83 |
| `--text-link-hover` green-300 | 8.56 | 6.90 | 9.99 | 6.80 | 6.63 | 6.87 |
| `--text-danger` red-400 | 5.39 | 4.34 | 6.29 | 4.28 | 4.17 | 4.33 |
| `--text-disabled` neutral-500 | 2.36 | 1.91 | 2.76 | 1.88 | 1.83 | 1.90 |
| `--text-primary` neutral-50 | 16.02 | 17.49 | 18.68 | 12.71 | 12.40 | 12.86 |
| `--text-secondary` neutral-300 | 9.46 | 10.33 | 11.04 | 7.51 | 7.32 | 7.60 |
| `--text-tertiary` neutral-400 | 5.56 | 6.07 | 6.48 | 4.41 | 4.30 | 4.46 |
| `--text-accent` / `--text-link` green-400 | 6.02 | 6.57 | 7.02 | 4.78 | 4.66 | 4.83 |
| `--text-link-hover` green-300 | 8.56 | 9.35 | 9.99 | 6.80 | 6.63 | 6.87 |
| `--text-danger` red-400 | 5.39 | 5.89 | 6.29 | 4.28 | 4.17 | 4.33 |
| `--text-disabled` neutral-500 | 2.36 | 2.58 | 2.76 | 1.88 | 1.83 | 1.90 |
`--text-primary`, `--text-secondary` and `--text-link-hover` pass AA everywhere.
Everything below them is only cleared against `--surface-page` and
`--surface-sunken`, which is where the design actually uses them:
* `--surface-raised` is the drafts' `#141413`, DARKER than the page, so every
role gains contrast on it rather than losing it - the whole column clears AA.
* `--text-tertiary`, `--text-accent`, `--text-link` and `--text-danger` land
between 4.17 and 4.85 on `--surface-raised` and on the three translucent
fills - AA for large text, **not** for body text. Card bodies use
`--text-secondary`; keep tertiary/accent/danger body copy on the page or
sunken surface, or raise the text a step.
between 4.17 and 4.78 on the three translucent fills - AA for large text,
**not** for body text. Card bodies use `--text-secondary`; keep
tertiary/accent/danger body copy on an opaque surface, or raise it a step.
* `--text-disabled` is 2.36:1 by design. WCAG 1.4.3 exempts the label of a
disabled control, so this is deliberate and must not be repointed - it is
the only token allowed below 3:1.
@@ -250,16 +273,18 @@ Everything below them is only cleared against `--surface-page` and
| dark white / `bg-hover` black | 21.00 |
| dark `fg-disabled` neutral-300 / `bg-disabled` neutral-600 (dark surface) | 5.39 |
| dark `fg-disabled` neutral-200 / `bg-disabled` neutral-500 (light surface) | 4.91 |
| **ghost `fg-hover` white / `bg-hover` green-600** (was green-900, 2.62) | **4.52** |
| ghost white / `bg-active` green-700 | 6.53 |
| ghost `fg` green-400 / dark page | 6.02 |
| ghost `fg` green-600 / light page | 4.52 |
| ghost `fg` neutral-50 / dark page (no fill in any state) | 16.02 |
| ghost `fg-hover` green-400 / dark page | 6.02 |
| ghost `fg` neutral-800 / light page | 16.88 |
| ghost `fg-hover` green-700 / light page | 6.53 |
| **ghost `fg-disabled` neutral-500 / dark page** | **2.36** |
| **ghost `fg-disabled` neutral-400 / light page** | **3.04** |
| secondary `fg` neutral-50 / dark page | 16.02 |
| secondary `fg` neutral-800 / light page | 16.88 |
| **secondary `fg-disabled` neutral-500 / dark page** | **2.36** |
| **secondary `fg-disabled` neutral-400 / light page** | **3.04** |
The four bolded disabled rows are the WCAG 1.4.3 exemption again - a disabled
The bolded disabled rows are the WCAG 1.4.3 exemption again - a disabled
control has no contrast minimum. Every enabled pair clears 4.5:1.
### Fields and boundaries
apps/web/app/styles/primitives.css
+13
View File
@@ -210,12 +210,25 @@
/* --------------------------------------------------------------------
SHADOW ramp
Two ramps, because a shadow is a fraction of the ground it falls on.
The soft steps are tuned for a white page; on the drafts' near-black
ground a 12-28% black is simply invisible, so the deep steps below carry
the two shadows the drafts actually draw:
card hover 0 20px 44px rgba(0,0,0,0.5)
nav dropdown 0 24px 48px rgba(0,0,0,0.6)
`semantic.css` picks the ramp per surface via --elevation-*.
-------------------------------------------------------------------- */
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.06);
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.08);
--shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.12), 0 2px 4px -2px rgb(0 0 0 / 0.08);
--shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.18), 0 4px 8px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.28);
/* [drafts] the deep steps, for a shadow falling on the dark ground */
--shadow-dark-lg: 0 20px 44px rgb(0 0 0 / 0.5);
--shadow-dark-xl: 0 24px 48px rgb(0 0 0 / 0.6);
--shadow-none: 0 0 #0000;
/* --------------------------------------------------------------------
apps/web/app/styles/semantic.css
+49 -29
View File
@@ -121,19 +121,18 @@
--interactive-danger-border-disabled: var(--color-transparent);
/* --- interactive: ghost (text-only) -------------------------------------
DEVIATION FROM FIGMA (a11y). The published component paints the hover
background/accent (#008764) and keeps base/turquoise-dark (#006b4f) as
the label - 1.40:1, far below WCAG AA. Both surfaces therefore use white
on the accent fill, which is 4.52:1 and passes AA for body text. The two
lines marked (a11y) are the only ones that differ from Figma; reverting
them to var(--color-green-700) restores pixel parity and the failure. */
The drafts never fill a ghost control. Every "All updates ->" / "What we
do ->" link is plain text in --text-primary that turns accent green under
the pointer while the label-to-arrow gap opens; the fill the old Figma
Button frame painted on hover (background/accent behind a green label,
1.40:1) is gone, and with it the a11y deviation it forced. */
--interactive-ghost-bg: var(--color-transparent);
--interactive-ghost-bg-hover: var(--color-green-600);
--interactive-ghost-bg-active: var(--color-green-700);
--interactive-ghost-bg-hover: var(--color-transparent);
--interactive-ghost-bg-active: var(--color-transparent);
--interactive-ghost-bg-disabled: var(--color-transparent);
--interactive-ghost-fg: var(--color-green-400);
--interactive-ghost-fg-hover: var(--color-white); /* (a11y) 4.52:1 on green-600; figma: green-700 = 1.40:1 */
--interactive-ghost-fg-disabled: var(--color-green-400);
--interactive-ghost-fg: var(--color-neutral-50);
--interactive-ghost-fg-hover: var(--color-green-400); /* 6.02:1 on the page ground */
--interactive-ghost-fg-disabled: var(--color-neutral-500);
--interactive-ghost-border: var(--color-transparent);
--interactive-ghost-border-hover: var(--color-transparent);
--interactive-ghost-border-disabled: var(--color-transparent);
@@ -165,6 +164,14 @@
they carry the same value on either surface. */
--overlay-picture-shade: var(--color-black-a20);
--overlay-picture-tint: var(--color-green-200-a12);
/* --- elevation ----------------------------------------------------------
The drafts give a resting card a hairline and no shadow at all, and keep
the black for what genuinely floats: a card under the pointer and the
navigation dropdown. */
--elevation-card: var(--shadow-none);
--elevation-popover: var(--shadow-dark-lg);
--elevation-modal: var(--shadow-dark-xl);
}
/* ---------------------------------------------------------------------------
@@ -262,14 +269,14 @@
--interactive-danger-border-hover: var(--color-transparent);
--interactive-danger-border-disabled: var(--color-transparent);
/* --- interactive: ghost (text-only) - see the a11y note above ---------- */
/* --- interactive: ghost (text-only) - see the note above --------------- */
--interactive-ghost-bg: var(--color-transparent);
--interactive-ghost-bg-hover: var(--color-green-600);
--interactive-ghost-bg-active: var(--color-green-700);
--interactive-ghost-bg-hover: var(--color-transparent);
--interactive-ghost-bg-active: var(--color-transparent);
--interactive-ghost-bg-disabled: var(--color-transparent);
--interactive-ghost-fg: var(--color-green-600);
--interactive-ghost-fg-hover: var(--color-white); /* (a11y) 4.52:1 on green-600; figma: green-700 = 1.40:1 */
--interactive-ghost-fg-disabled: var(--color-green-600);
--interactive-ghost-fg: var(--color-neutral-800);
--interactive-ghost-fg-hover: var(--color-green-700); /* 6.53:1 on white */
--interactive-ghost-fg-disabled: var(--color-neutral-400);
--interactive-ghost-border: var(--color-transparent);
--interactive-ghost-border-hover: var(--color-transparent);
--interactive-ghost-border-disabled: var(--color-transparent);
@@ -299,6 +306,11 @@
they carry the same value on either surface. */
--overlay-picture-shade: var(--color-black-a20);
--overlay-picture-tint: var(--color-green-200-a12);
/* --- elevation - the soft ramp; the deep black belongs on the dark ground */
--elevation-card: var(--shadow-md);
--elevation-popover: var(--shadow-lg);
--elevation-modal: var(--shadow-xl);
}
/* ---------------------------------------------------------------------------
@@ -308,7 +320,7 @@
------------------------------------------------------------------------ */
:root {
/* --- shape -------------------------------------------------------------
--radius-control / --radius-control-lg / --radius-card / --radius-surface
--radius-chip / --radius-control / --radius-card / --radius-surface
/ --radius-pill are declared in the @theme block near the bottom of this
file so that they also generate rounded-* utilities. They are tier-2
tokens like everything else here. */
@@ -348,12 +360,13 @@
--layout-content-max: var(--container-content);
--layout-prose-max: var(--container-prose);
/* --- elevation ---------------------------------------------------------- */
/* --- elevation ----------------------------------------------------------
Only the two flattest steps are surface-independent. A shadow is a
fraction of the ground it falls on, so --elevation-card / -popover /
-modal are declared inside each surface block above: the dark surface
takes the drafts' deep black, the light one keeps the soft ramp. */
--elevation-flat: var(--shadow-none);
--elevation-raised: var(--shadow-sm);
--elevation-card: var(--shadow-md);
--elevation-popover: var(--shadow-lg);
--elevation-modal: var(--shadow-xl);
/* --- focus ring geometry ------------------------------------------------- */
--focus-ring-width: var(--border-width-lg);
@@ -430,7 +443,6 @@
--color-interactive-dark-hover: var(--interactive-dark-bg-hover);
--color-interactive-danger: var(--interactive-danger-bg);
--color-interactive-danger-hover: var(--interactive-danger-bg-hover);
--color-interactive-ghost-hover: var(--interactive-ghost-bg-hover);
--color-field-bg: var(--field-bg);
--color-field-border: var(--field-border);
@@ -443,13 +455,21 @@
}
/* Shape semantics that also need to exist as Tailwind utilities
(rounded-control / rounded-card / rounded-surface). They alias tier 1
directly - never a tier-2 name, which would self-reference. */
(rounded-chip / rounded-control / rounded-card / rounded-surface). They
alias tier 1 directly - never a tier-2 name, which would self-reference.
THE DRAFTS DRAW THREE CORNERS, NOT FIVE. Every panel, card, button, input
and menu in the Claude Design drafts is 4px; every tag, thumbnail, flag and
checkbox is 2px; filter chips and the status pill are fully round. Nothing
in the drafts is 8px or 12px, so `--radius-card` and `--radius-surface` come
down to radius/sm and the old `--radius-control-lg` (radius/md, a quirk of
the Figma Button frame's ghost cells) is gone. The tier-1 ramp is untouched:
only the meanings moved. */
@theme static {
--radius-control: var(--radius-sm);
--radius-control-lg: var(--radius-md);
--radius-card: var(--radius-md);
--radius-surface: var(--radius-lg);
--radius-chip: var(--radius-xs); /* 2px - tags, thumbnails, checkboxes */
--radius-control: var(--radius-sm); /* 4px - buttons, fields, menu items */
--radius-card: var(--radius-sm); /* 4px */
--radius-surface: var(--radius-sm); /* 4px */
--radius-pill: var(--radius-full);
}