Swipe your screenshots into three piles.

Principles

Global rules, in force on every screen: no borders (the focus ring is the one exception) · no emoji · no icon tiles · no color-only meaning · no dark mode.

Color

Every value is one fixed OKLCH literal in DSColor.swift; the hex below and the contrast table are generated from it. The app is light only: canvas and surface are both pure white so a screenshot is never tinted.

Verdicts — main / on / soft

Ink

Surfaces and accent

Expressive palette — blocks only, never verdicts

Two blocks borrow from elsewhere: onboarding is trash.main (the reference hero is tomato, and onboarding precedes any verdict) and the limited-access interstitial is fave.soft. Nothing runs the other way — an expressive color never means a verdict.

Measured contrast — 43 pairs, 0 failures

Typography

Two voices. Forager Bold Overlap is the display face, at its single weight of 700 — wordmark, display, headline, title and stamp all sit on it. Pretendard is the text face — Regular, Medium, SemiBold, Bold. Eleven roles, mirroring DSTextRole. Ten bind to a Dynamic Type style through relativeTo:; stamp is the exception, returning a fixed-size font so its 44 pt cap cannot be scaled twice, with the call site owning @ScaledMetric.

Spacing & Radius

Spacing is 6 · 8 · 12 · 16 · 24 · 28 · 32, inherited verbatim from the previous system (ADR-018). Radius is not a fixed decoration: it tracks the element's inner padding.

Spacing scale — DSSpace

Radius — DSRadius

Icons

Twelve glyphs, bold and solid, sourced from the Noun Project on the free plan. They are template images that inherit currentColor; there is never a filled tile behind a glyph. Until an asset lands in the catalog, DSIconRef.image falls back to the listed SF Symbol — development scaffolding, not a shipping state (ADR-017).

Elevation & Layering

Borders are forbidden; the focus ring is the only line the system draws. Surfaces separate by tint and by whitespace. Shadows exist only for things that float — the front card, a committed stamp, the verdict buttons, the toast, sheets — and are two soft layers at 10 % and 5 % of the ink.

In SwiftUI every shadow goes through .dsShadow(_:), which applies compositingGroup() first — otherwise each child is shadowed separately and a card grows a halo.

Layering — DSLayer

Interaction & Motion

Only transform and opacity animate; transition: all is banned. Entries ease out, exits are faster, and every animation is gated on Reduce Motion through DSMotion.gated(_:reduce:). Press is scale(0.90) on every button — press one below.

Buttons

Primary is a navy pill with a white label — the accent is the ink. Secondary is surfaceRaised with ink. Destructive is tomato with a navy label at 4.61:1. A 16 pt bold label is not WCAG large text, which starts at 19 pt bold, so white on tomato at 3.51 would not clear the 4.5 bar. It always carries the number. Tab to any of them for the ink focus ring.

The pill is never a free choice between navy and white. Filled with the block’s own ink it clears 4.61 against tomato at worst and 14.01 against pale yellow at best, and its label clears 16.16 either way. The retired wording would have put a white pill on lime at 1.15:1 and a navy pill on violet at 2.33:1 — invisible as shapes (ADR-023).

Chips on soft tints

Text on a soft tint is always ink, never main — a verdict color on its own tint is the one combination the table does not clear.

Verdict buttons — the gesture's second route

Solid main circles with the on glyph — 64 pt for the two side verdicts, 56 pt for Fave raised 8 pt, so the row reads as a direction map rather than a toolbar. Rewind is a 44 pt ghost pinned to the leading edge and drops to 45 % opacity when there is no history. Tapping runs the same exit pipeline as a swipe.

Motion tokens

Curves: enter cubic-bezier(.23, 1, .32, 1) · exit cubic-bezier(.32, 0, .67, 0) · standard cubic-bezier(.40, 0, .20, 1). Springs: snap-back 0.35/0.70, land 0.45/0.78, stamp pop 0.28/0.50, press 0.25/0.55. The throw's length is not a constant — it is clamp(720 / |v|, 0.18, 0.32), so momentum is never cut.

Toast and the destructive ladder

Rung 0 (verdicts, viewer trash, library moves, restore) is reversible and asks nothing. Rung 1 (one item, permanently) is confirmed by the iOS dialog alone. Rung 2 (everything) adds the sheet above, which names the count and the size and pre-announces the second dialog, then hands over to iOS. The scrim behind it is ink at 35 %.

Haptics — DSHaptic

Snap-back and the down dead zone are silent — a non-event should not buzz. There is no sound in v1: with no settings screen, a sound that cannot be turned off would be a defect.

Swipe Deck

The product, running. This deck implements DSSwipe and DSMotion exactly as the app will: four 90° sectors with 6° of hysteresis, a commit at 120 pt or 800 pt/s, a velocity-derived throw, and promotion at 60 % of the exit. Drag a card, press a verdict button, or focus the phone and use ← → ↑ and Z.

The numbers — DSSwipe and the stack

Screens

Four screens, and that is the whole app: Permission, Review, Trash, Library. No settings, no statistics, no AI. Review is the root; Trash and Library are icon buttons in its header that push onto a navigation stack — a tab bar would take 83 pt away from the card and imply three equal destinations.

Color blocks — DSBlock and DSFace

A face is one line: a pair of round brackets in the display face for the head, and a single letter borrowed from a world script doing the eyes and the mouth at once. Seven blocks, seven scripts, no letter twice — Naskapi, Tamil, Katakana, Greek, Telugu, Kannada and Cyrillic, each listed with its code point in DSFace.origin. Only the brackets are Forager; every centre glyph is drawn by the system font that carries its script, and that weight contrast is the intended look. A face is decorative and hidden from VoiceOver; the headline under it carries the meaning. Violet is the only block that takes white ink, at 6.95:1. Six blocks, one per DSBlock case besides onboarding: the limited-access interstitial borrows fave.soft, the second of the two exceptions ADR-016 records.

Grid & Responsive

One breakpoint, 1200 px. Above it, the desktop grid: 14 columns where the two ends are fluid margins and content lives in 2–13, gutter 24. Below it, the mobile grid: 4 columns, margin 16, gutter 8. The app only ever uses the mobile grid; this guide is the thing that uses the desktop one.

Desktop — 14 columns, ends are margins

Mobile — 4 columns, margin 16, gutter 8

Checklist

Run this before a screen leaves your hands.

• Every color comes from a token — no literal hex outside DesignSystem/, and no opacity used to invent a text color.
• On a verdict main fill only the 32 pt stamp word and the glyphs use on; every smaller label is ink, and text on a soft tint is ink.
• Nothing depends on the edge of fave.main — the yellow exemption is acknowledged wherever yellow appears.
• No borders anywhere. The focus ring is the only line, and surfaces separate by tint and whitespace.
• Shadows appear only on things that float — front card, committed stamp, verdict buttons, toast, sheets — and go through .dsShadow(_:).
• Radius tracks the element's inner padding, and a nested radius is the outer radius minus the gap.
• Type uses only the eleven DSTextRole roles — Forager Bold Overlap for display, Pretendard for text — and caption never sits above body.
• Every hit target is at least 44 pt; the hit area is padded, never the glyph.
• Every animation is gated on Reduce Motion through DSMotion.gated, and only transform and opacity animate.
• VoiceOver reads the front card as one element, with custom actions in the order Trash → Archive → Favorite → Rewind last.
• Every shipped Noun Project glyph has its CC BY line in DSIconCredits.entries, and no glyph sits inside a filled tile.
• All four verification commands are green: ds_tokens.py contrast, ds_tokens.py emit-css, ds_tokens.py lint, typecheck-ds.sh.