Print Desk

The Atom design system, rendered live from its own tokens and components — it cannot drift from what ships.

Color ramps

Washi to sumi, plus the hanko vermillion and three status hues. Component code never touches these — semantic tokens only.

neutral
50#FFFDF8
100#F7F3EC
200#F0EBE1
250#EDE7DC
300#E4DCCE
400#CFC4AB
500#A39A8A
600#948A78
700#6E675D
750#4A443A
800#3A342C
900#24201B
925#1C1917
950#14120F
hanko
50#FDF0EE
100#FBE5E2
200#ECB4AC
300#F0A296
400#F26D5B
500#D93A2B
600#B32E21
700#A02417
800#7A1B10
900#571209
950#241512
moss
100#E7F0E4
200#B5CDB4
300#9CCB9F
500#4F7D59
700#2E5F3C
ai
100#E7ECF8
200#B9C6E8
300#A9BCEA
500#3B5BB5
700#2C4A9A
ochre
100#FCE8D9
200#E8B888
500#A85F0B
700#8A4B00

Semantic slots

What components are allowed to reference, with both theme resolutions. Every pairing is contrast-checked on build.

TokenPaperSumiRole
color.bg.canvas#F7F3EC#14120FPage background.
color.bg.surface#FFFDF8#1C1917Cards, panels, tables.
color.bg.raised#FFFDF8#24201BModals, popovers, inputs. Same as surface on paper; separates on sumi.
color.bg.sunken#F0EBE1#14120FWells, alt table rows, recessed areas.
color.bg.inverse#1C1917#EDE7DCInverse blocks: active nav, tooltips.
color.text.primary#1C1917#EDE7DCDefault ink: all reading text and headings.
color.text.muted#6E675D#A39A8ASecondary text, captions, labels. Never below AA.
color.text.inverse#F7F3EC#1C1917Text on bg.inverse.
color.border.hairline#E4DCCE#3A342CDefault separators, table row lines.
color.border.strong#CFC4AB#4A443AInput borders, meter tracks.
color.border.rule#1C1917#948A78The signature 1.5px ink plate rule: card frames, table header rules, section dividers.
color.accent.base#D93A2B#F26D5BPrimary action fill.
color.accent.text#B32E21#F26D5BAccent-colored text/links; darker than base for AA.
color.accent.on-accent#FFFDF8#241512Text on accent.base.
color.focus.ring#3B5BB5#A9BCEAFocus indicator. Indigo so it never collides with vermillion danger/primary.
color.preview.bg#1C1917#1C1917Preview frame surface — always ink.
color.preview.text#F7F3EC#F7F3ECText inside the preview frame — always paper.
color.preview.accent#D93A2B#D93A2BAccent tint inside the preview (hero gradient) — fixed, never the lifted sumi vermillion.
color.chart.ink#1C1917#EDE7DCThe data series. Bars, lines, dots — newsprint ink.
color.chart.context#A39A8A#948A78De-emphasis series: previous period, reference lines, sparkline body. Sub-3:1 by design; values always reachable via labels or the table view.
color.chart.accent#D93A2B#F26D5BThe one highlighted mark — current point on a sparkline, hovered bar. A hanko stamp, never a whole series fill.
color.chart.grid#E4DCCE#3A342CGridlines and axis rules. Follows border.hairline in both themes — solid, 1px, recessive.

Status trios

Wash fill + edge border + text, never color alone.

successText holds AA on this wash in both themes.
infoText holds AA on this wash in both themes.
cautionText holds AA on this wash in both themes.
dangerText holds AA on this wash in both themes.

Type scale

Public Sans for everything — headings are weight and size, not a second family. Tracking is welded to each style.

Curation is publishingtype.display — 600 42px/48px
Curation is publishingtype.h1 — 600 32px/40px
Curation is publishingtype.h2 — 600 24px/28px
Curation is publishingtype.h3 — 600 19px/24px
Curation is publishingtype.body-lg — 400 16px/24px
Curation is publishingtype.body — 400 14px/20px
Curation is publishingtype.body-sm — 400 13px/20px
Curation is publishingtype.caption — 400 12px/20px
Curation is publishingtype.label — 500 11px/16px

Spacing

4px base. The scale is the law.

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-7
32px
space-8
40px
space-9
48px
space-10
64px

Shape & elevation

Print-plate radii; hard offset shadows only — plates lifted off the page.

radius-xs · 4px
radius-sm · 6px
radius-md · 10px
radius-lg · 14px
plate-sm
plate-md