Documentation
Every page below is rendered directly from the validated DSDS entities in dsds/ — 51 entities, schema v0.15.2, validated on every build. Nothing here is written by hand.
Foundations
ColorstablePrint Desk color: warm paper grounds, sumi-ink text and rules, one vermillion accent used like a hanko stamp, and four status hues tuned to the paper family. Values live in tokens/color.tokens.json; the sumi (dark) theme overrides only semantic slots.TypographystableOne family runs the whole desk: Public Sans — Franklin Gothic's UI descendant — sets headings and body alike, with hierarchy carried by weight and size (the single-family product-app move; Fraunces retired 2026-07-23). Nine styles, metrics computed from real font data and snapped to the 4px grid. Values live in tokens/typography.tokens.json.Spacing & Layoutstable4px-base spatial scale (space-1 … space-10), print-plate radii, the two-weight border system, and desktop-first breakpoints. Values live in tokens/dimension.tokens.json.Elevation & DepthstablePlates on paper: depth comes from surface steps and hard offset shadows with zero blur — like printing plates lifted off the page. A fixed six-step z-index scale governs stacking. Values live in tokens/elevation.tokens.json.MotionstableQuick, physical, restrained — a stamp pressed, a page turned. Four durations, three easings, GPU-safe properties only. Values live in tokens/motion.tokens.json.
Token groups
Themes
Components
ButtonexperimentalButtons do things — they never navigate. Each surface gets one primary action, and it's an ink plate, never red. Red is saved for destructive actions, so when you see it, it always means “careful”. Secondary is the outlined workhorse, Ghost sits quietly in dense areas, and Danger warns before it deletes.Badge & StatusBadgeexperimentalA small stamp that shows the status of something at a glance. Its color always comes from the product-wide status map — active is green, scheduled is blue, drafts are quiet, warnings are ochre, failures are red. Never pick a badge color by hand: pass the status, and the map decides.ChipexperimentalA little pill for taxonomy values like genres, themes, and moods. Chips can carry a count, be selected (they flip to ink), be removable, or be deprecated — a deprecated chip wears caution colors and points at its replacement. In tight table cells, chips collapse into a “+2” overflow instead of wrapping.FormFieldexperimentalThe wrapper that gives every control a proper visible label, optional help text, and an error message that screen readers announce. A field with a problem never relies on color alone.Input & TextareaexperimentalWhere people type. The surface sits slightly raised, the border darkens on hover, and turns red with a message when something is wrong. Disabled fields sink into the page.SelectexperimentalA dropdown that opens the real system menu instead of a custom one — the platform does the hard part; we draw the box and the chevron.Checkbox & RadioexperimentalPick one or many. A checked box fills with ink and shows a paper checkmark; radios get a dot. Checkboxes wait for Save — if a change should apply the moment you click, use a Switch instead.SwitchexperimentalOn or off, right now. Flipping a switch takes effect immediately, no Save required. If the change needs saving first, it should be a checkbox.CardexperimentalA plate of paper that groups related content. Standard cards have a visible edge, quiet cards nest inside other cards with a softer one, and interactive cards lift slightly under the cursor.TabsexperimentalSwitch between views of the same thing — details, items, history. The vermillion underline marks where you are. Moving between different areas of the app is the sidebar's job, not tabs'.SpinnerexperimentalThe one looping animation in the product. It spins while something loads; for people who prefer reduced motion, it freezes into a shape that still reads as busy.KbdexperimentalA keyboard shortcut drawn as a small key cap. It's a hint, not a control — everything must stay reachable with the mouse.TableexperimentalThe frame around data: a strong rule under the header, hairlines between rows, whole rows you can click. Status columns always use Badges, never colored text.ProgressMeterexperimentalA slim bar showing how far along something is, with one rule everywhere: below 70 reads red, 70–84 ochre, 85 and up green. Tagging completeness never renders as a bare percentage — use the segmented meter so people can see which facets are missing.Modal & ConfirmDialogexperimentalA focused dialog over a dimmed page. It traps focus, closes on Escape, and hands focus back where you left off. The delete confirmation is the only place in the whole product with a solid red button.DropdownMenuexperimentalA small menu of actions on a raised plate. Dangerous ones sit last, below a divider, so they're never hit by muscle memory.ToastexperimentalA quiet confirmation that slides in at the bottom right and leaves after five seconds. Destructive actions ride along with an Undo — everyone gets a grace period.TooltipexperimentalA small ink label that appears on hover or focus with extra detail. Nothing essential ever lives only in a tooltip.Avatar & AvatarStackexperimentalA round ink coin with someone's initials. Stack a few, and you can see who's working here — that's the presence pattern.EmptyStateexperimentalAn empty screen should teach, not shrug. Say what belongs here, then offer the first step to fill it.SegmentedControlexperimentalA compact switch for changing how the same data is presented — list or grid, chart or table, desktop or TV. It never navigates.ThemeToggleexperimentalSun or moon: paper or sumi. Two themes, nothing else — the app remembers your choice, and the very first visit follows your system preference.BreadcrumbsexperimentalThe trail showing where you are. Every step is a link except the last one — you're already there, so it's plain text.PaginationexperimentalPage through long lists. The current page sits on an ink plate, and the arrows gray out at the ends.BannerexperimentalA page-wide notice tinted by tone — neutral, info, caution, or danger — with room for one action. Danger banners announce themselves to screen readers.AppShell (Sidebar + TopBar)experimentalThe frame around everything: a rail on the left for moving between areas, a top bar carrying the page title, the environment stamp, the theme toggle, and your identity. The place you're in sits on an ink plate in the rail.ToolCardexperimentalA launcher on the Home screen: an icon, the tool's name, what it's for, and a pin to keep favorites close.EntityCardexperimentalThe grid tile for collections, layouts, and campaigns: artwork on top, status badge in the corner, title and details below. The entire card is the click target.StatCardexperimentalA headline number for analytics — the metric, its value in big type, and a small note about which way it moved.CommandPaletteexperimentalPress ⌘K anywhere and start typing — pages, recent work, actions, and catalog titles come to you. The fastest way around the workspace.DataTableexperimentalThe full data experience: filters on top, a sortable table in the middle, pages below. Clicking anywhere in a row opens it — unless you clicked a button or menu inside the row, which act on their own without also opening the row.FilterBarexperimentalSearch plus a few facet dropdowns, with a live count of results — so people always see what a filter just did.DragListexperimentalA reorderable list. Drag rows by the grip, or use the always-visible arrow buttons — reordering never requires a pointer. Position numbers keep everyone oriented.DualValueDiffFieldexperimentalThe heart of the tagger. The left well holds what was imported — read-only, slightly sunken. The right well is the editorial set — raised, and yours to shape. Diverge from the import and the field says so with an Override marker; go past the slot cap and it calmly asks you to trim. Nothing ever changes silently.Charts (TrendChart / BarList / Histogram / Sparkline / ChartCard)experimentalCharts drawn like newsprint: the data series in ink, the comparison period in a lighter tone, and at most one red mark for the point that matters. Never a rainbow of lines — two series maximum, and every chart offers a table view for anyone who wants exact numbers.
Patterns
Workspace HomeexperimentalThe landing screen: a greeting, quick actions, your starred favorites, and the latest activity. Everything on it is live workspace data — nothing is decorative.Layout Editor (three-pane)experimentalThree panes for composing a page: a palette of modules, the canvas where you arrange them, and an inspector for the selected module. Preview mode renders the layout the way a viewer would see it, at any device width.Analytics dashboardexperimentalOne screen for how the catalog is doing: headline numbers, a plays trend, top collections and genres, and tagging completeness. Real catalog facts are labeled as real; demo engagement data says it's demo data.Taxonomy managerexperimentalWhere the vocabularies live. Add values, deprecate them with a migration target, and see live usage counts — a value that titles still use can be deprecated but never silently deleted.Audit trailexperimentalEvery change in one ledger: who did it, when, to what, and what exactly changed. Rows open the entity as it is now — and deleted things take you to the list instead of a dead end.Campaign plannerexperimentalTime-boxed promotions: a window, a layout takeover, and the collections being boosted. Ended campaigns become read-only — duplicate one to run it again.Smart-Collection Rules BuilderexperimentalCollections that fill themselves. Write conditions — genre includes, score at least — and watch the live match count as you edit. Membership updates as tagging changes.Search & Bulk CurationexperimentalFind titles across the whole catalog, filter by any facet, then act in bulk: select a batch and add them straight to a collection.