# 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](/design-system/colors) — Ink, the rule, mint, yellow and the editor surface
- [Typography](/design-system/typography) — The type scale and the prose styles
- [Components](/design-system/components) — The Angular component library, live
- [Code blocks](/design-system/code-blocks) — Filename headers, tabs and the dcupl theme
- [Content tabs](/design-system/content-tabs) — Tabbed containers for any markdown
- [Mermaid diagrams](/design-system/mermaid) — 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