Design system

The docs are the reference room of the dcupl website: the same type, the same black rules, the same mint for the answer you copy. This section documents the tokens, type, components and patterns that keep them that way.

Principles

• Ink and rules. Black and white ink, structure drawn with a hard 1.5px rule. No gradients, no glass, no glow; panels are flat, and only floating overlays get a shadow.
• Mint is the answer, yellow is the gotcha. Mint fills mark what you copy, the active item and confirmations. Yellow marks things to watch out for and demo data. Both always carry black text.
• Code is dark everywhere. Code sits on the dark editor surface in both themes (#202020, #161616 on the dark page), highlighted with the dcupl Shiki theme.
• Square-ish shapes. 3px chips, 4px buttons, inputs, pills and tags (the same as dcupl.com), 6px panels. Full rounding is left for the pill-shaped controls (tabs, toggles, chip links), dots and spinners.
• Two typefaces. Hanken Grotesk for everything you read, JetBrains Mono only for code, keys, file names, commands and data values.
• The page says where it is. A breadcrumb above the title (SDK / Core concepts / Models) instead of a label above the heading.

Contents

• Colors→Ink, the rule, mint, yellow and the editor surface
• Typography→The type scale and the prose styles
• Components→The Angular component library, live
• Code blocks→Filename headers, tabs and the dcupl theme
• Content tabs→Tabbed containers for any markdown
• Mermaid diagrams→Diagrams drawn in ink and mint

Built with

• Tailwind CSS v4: tokens registered under @theme in src/styles.css
• @tailwindcss/typography: the prose styles, tuned to the docs type scale
• Fontsource: @fontsource-variable/hanken-grotesk and @fontsource-variable/jetbrains-mono, self-hosted
• Shiki: the dcupl theme (src/lib/shiki-dcupl-theme.ts) with custom transformers
• Mermaid: diagrams themed to the palette (src/app/directives/mermaid-themes.ts)
• Angular 22: standalone components, signals