Sted design system · Foundations · Batch 1

Tokens that make Sted feel consistent.

Colour, contrast, type, rhythm, grid and social formats from tokens/sted.tokens.json. Toggle the theme to see the semantic mapping. Statuses come from tokens/status.json.

Core palette CANONICAL

Brand colours do not change between themes

Supportive palette CANONICAL

Labels and categories · Ink text only · never a whole ground

Source tiles PROPOSED

From the iOS app · Ink glyph on pastel · min contrast 11.1:1

Dark set PROPOSED

Semantic mapping only, not new brand colours

Historical HISTORICAL

Detected by the audit; never render
Legacy yellow#FEBC23
#FFD5C2replaced by tile.reddit #FFC9AE
#EDEBE7replaced by core.subtle #F7F7F5

Semantic mapping PROPOSED

Same slot names in both themes

Contrast DERIVED

WCAG 2.1 · AA ≥ 4.5 · large ≥ 3.0 · AAA ≥ 7.0
Foreground on groundSampleRatioVerdict

Typography PROPOSED

Inter · 400 / 500 / 600 / 700 · web scale is fluid

Social type scale PROPOSED

px on a 1080 canvas, shown at 50%

Spacing rhythm PROPOSED

4px base · 2px optical step

Radius PROPOSED

6 · 8 · 12 · 16 · 20 · 24 · 32 · pill

Shadows and borders PROPOSED

Low contrast by default · no hard offsets

Subtle

Quiet containers.

Card

Default product elevation.

Floating

Temporary objects and props.

Social card

Cards inside a slide.

Outline

1px translucent ring on Cream.

3px social border

The Graveyard object language.

Grid and breakpoints PROPOSED

12 columns · 24px gutter · margins 20 / 32 / 48 · max 1200
Resize the window: margin follows the breakpoint
sm 640md 768lg 1024xl 1280content 1200reading 680

Social formats PROPOSED

Dashed line = safe area

Batch 1 · Proposed for approval. Open questions Q1-1 to Q1-7 in design-system/decisions.md. Values in tokens/sted.tokens.json; web variables in tokens/tokens.css.