Remin's app and this website share one set of tokens. The app is the product and the source of
truth: color, type, spacing, radius and shadow are defined in Swift, exported to
tokens.css, and consumed here. Change a value in Swift, re-run the exporter, and every
surface follows.
Three layers, in order of authority. Nothing below invents a value that belongs above.
ReminDesignTokens.swift — spacing, radius, shadow.
ReminTheme.swift — type scale.
Assets.xcassets — brand color.
A build artifact — never hand-edited. Holds --c-*, --s-*,
--r-*, --sh-*, --fs-*/--fw-*.
python3 scripts/export_design_tokens.py
Owns the --site-* layer: the night background, glass surfaces, section
rhythm, display type and device mockups. These have no app counterpart, and saying so
explicitly is the point.
Single source: the ReminPrimary / ReminSecondary colorsets. The 135°
gradient is a token in its own right — no local re-definitions.
Semantic only. Never a raw named color for state — the app forbids .orange /
.blue literals for status, and so does the site. Values shown are the light-mode
reference of the UIKit system colors.
Thirteen steps, mirroring ReminTypography. The app renders several of them in SF
Pro Rounded; the web substitutes Inter / Noto Sans, which is a deliberate difference. 10px is
the floor — nothing smaller ships.
| Token | Size | Specimen |
|---|---|---|
--fs-large-title |
34 | Remin |
--fs-title |
28 | Your Journey |
--fs-title-2 |
24 | Section title |
--fs-title-3 |
20 | Card title |
--fs-subtitle |
20 | Subtitle |
--fs-headline |
17 | Button label |
--fs-body |
17 | Body copy |
--fs-callout |
16 | Callout |
--fs-caption |
14 | Caption |
--fs-footnote |
13 | Footnote |
--fs-caption-2 |
12 | Timestamp |
--fs-label |
11 | TAB LABEL |
--fs-micro |
10 | BADGE |
A 4pt grid, eight steps, from ReminSpacing. Values off the scale (9, 18, 95…) are
not allowed. The site adds its own larger rhythm above 32px — see the
--site-* layer.
| Token | Value | Use | |
|---|---|---|---|
--s-xxs |
2 | icon-to-label minimum | |
--s-xs |
4 | inside a badge | |
--s-sm |
8 | within a related group | |
--s-md |
12 | default gap inside a card | |
--s-lg |
16 | screen edge, section inset | |
--s-xl |
20 | generous card padding | |
--s-xxl |
24 | between sections | |
--s-xxxl |
32 | major separation |
Six steps and a pill, from ReminRadius. Adding a seventh is not a small decision —
snap to the nearest instead. Capsules use --r-pill.
| Token | Value | Use | |
|---|---|---|---|
--r-xs |
4 | inline tag, mini badge | |
--r-sm |
8 | chip, thumbnail | |
--r-md |
12 | button, row, input | |
--r-lg |
16 | card, sheet container | |
--r-xl |
20 | floating bar, large card | |
--r-xxl |
24 | modal, overlay container | |
--r-pill |
999 | capsule |
Four presets from .reminShadow(_:). --sh-floating is two layers with a
brand tint; --sh-brand is the gradient button's glow. Ad-hoc shadows are not a
thing.
Remin speaks about moments, not files. The app's Korean brand phrases — 담아온 순간 (moments you kept), 마음에 남은 장면 (scenes that stayed with you), 걸었던 길 (the path you walked) — set the tone that the English and Japanese copy follows. Eight emotion tags are fixed:
Some app tokens have no honest web equivalent. They stay in Swift, and
tokens.css records why.
| App token | Why it stops at the app |
|---|---|
adaptiveText, adaptiveBackground, … |
Derived from UIKit dynamic colors; no static CSS equivalent, and the site is dark-only, using a warm charcoal backdrop that complements the app’s coral palette. |
overlayText, overlayBackground |
Fixed white/black for text over photos. The site has no photo-overlay UI. |
design: .rounded |
SF Pro Rounded isn't shipped as a web font. Inter / Noto Sans stand in. |
| Dynamic Type scaling | The web handles this with relative units and media queries instead. |
| Liquid Glass materials | backdrop-filter approximates it; the --site-glass-* layer
owns those values. |