Monad

# Monad — Style Reference > field journal in serif and mono **Theme:** light · **Source:** https://www.monad.com · **Analyzed:** 2026-08-25 Monad reads like a beautifully typeset engineering field journal. The page is warm off-white paper (#f8f3f1) with a single off-black ink (#242424); hierarchy comes from an unusual two-voice type system — Untitled Serif speaks the headlines in calm regular weight, and ABC Diatype Mono answers in the body, so every paragraph, label, nav item, and button reads like annotated source. Nothing is bold anywhere: all type is weight 400, headings tracked at -0.02em, mono eyebrows loosened to +0.05em in caps. Color is deliberate and scarce: one cobalt blue (#2b59d1) owns the primary CTA and interactive chips, mint (#a7fccd) tints integration pills, and soft airbrushed watercolor washes — periwinkle, rose, amber — bloom in card corners as the only atmosphere. Cards are precise: hairline borders (10% ink), 16px radii, generous padding, arranged in tidy grids with white diagram nodes and dashed connectors that make the product feel like a living schematic. Buttons are mono caps pills. The overall effect is technical credibility rendered with editorial warmth. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Paper | `#f8f3f1` | `--color-paper` | Page canvas — warm off-white | | Cloud | `#f6f3f1` | `--color-cloud` | Chip fills, alternate card surfaces | | White | `#ffffff` | `--color-white` | Diagram nodes, elevated mini-cards, ghost button fill | | Ink | `#242424` | `--color-ink` | Headings, body, dark buttons, announcement bar | | Ink 80 | `rgba(36,36,36,0.8)` | `--color-ink-80` | Body copy at reading weight | | Ink 60 | `rgba(36,36,36,0.6)` | `--color-ink-60` | Captions, muted labels | | Hairline | `rgba(36,36,36,0.1)` | `--color-hairline` | Card and chip borders — the system's only divider | | Gray | `#9c9998` | `--color-gray` | Footer eyebrows, timestamps | | Cobalt | `#2b59d1` | `--color-cobalt` | Primary CTA, logic chips (ALWAYS/AND/OR), links | | Periwinkle | `#cfdaf5` | `--color-periwinkle` | Cool watercolor washes, cobalt chip fills | | Mint | `#a7fccd` | `--color-mint` | Integration pill tint, success wash | | Black | `#000000` | `--color-black` | Announcement bar, max-contrast moments | Watercolor washes (radial gradients at card corners, never full fills): periwinkle, rose `#f5cfd0`-ish, amber `#f5d8a7`-ish — always fading into paper. ## Tokens — Typography **Headlines:** Untitled Serif — weight 400 only. Fallback: `Georgia, serif`. **Body & UI:** ABC Diatype Mono — weight 400 (500 for rare emphasis). Fallback: `ui-monospace, monospace`. Buttons and eyebrows are ALL CAPS mono. **Support:** Untitled Sans appears sparingly inside dense product diagrams. Fallback: `system-ui, sans-serif`. | Step | Size / Weight / Line | Tracking | Face | |------|---------------------|----------|------| | h1 | 80px · 400 · 1.2 | -0.02em | Untitled Serif | | h2 | 64px · 400 · 1.2 | -0.02em | Untitled Serif | | h3 | 48px · 400 · 1.2 | -0.02em | Untitled Serif | | h4 | 40px · 400 · 1.2 | -0.02em | Untitled Serif | | h5 | 32px · 400 · 1.2 | -0.02em | Untitled Serif | | h6 | 24px · 400 · 1.2 | -0.02em | Untitled Serif | | body | 20px · 400 · 1.35 | -0.02em | Diatype Mono | | body-sm | 16px · 400 · 1.35 | -0.02em | Diatype Mono | | eyebrow | 16px · 400 · 1.3 | +0.05em | Diatype Mono, ALL CAPS | | caption | 12px · 400 · 1.3 | -0.03em | Diatype Mono | ## Tokens — Spacing & Shape | Purpose | Value | |---------|-------| | Density | Editorial — centered hero column, tidy 2-col card grids | | Base unit | 8px | | Section gap | 120–160px | | Card padding | 40px | | Chip padding | 8px | | Element | Radius | |---------|--------| | Chips & mini-cards | `8px` | | Cards | `16px` | | CTA panels | `40px` | | Buttons & pills | `100px` (pill) | | Logo dots / avatars | `50%` | **Shadows** — one whisper: `0 0 10px rgba(0,0,0,0.1)` on floating diagram nodes. Cards rely on hairline borders, not elevation. ## Guidelines - Keep the two-voice rule absolute: Untitled Serif for headlines and card titles, Diatype Mono for everything else — swapping voices breaks the system - Set every character at weight 400 — emphasis comes from size, caps, or the serif/mono contrast, never from boldness - Write buttons and eyebrows in ALL CAPS mono with +0.05em tracking; buttons are pills (ink fill, cobalt fill, or white with hairline border) - Reserve cobalt (#2b59d1) for the primary action and interactive logic chips; mint tints passive integration pills only - Paint atmosphere with corner watercolor washes that fade into paper — never fill a whole card with color - Border every card and chip with the 10%-ink hairline; 16px card radius, 8px chip radius, 40px on hero CTA panels - Draw product diagrams as white rounded nodes with hairline borders and dashed connectors — the schematic is the brand illustration - Add journal details: local-time stamps, numbered rules, tiny caps annotations **Don't** - Do not use bold or semibold anywhere — 400 is the only weight in the system - Do not set body copy in the serif or headlines in the mono — voices never swap roles - Do not add drop shadows to cards — separation is hairline borders on flat paper - Do not use saturated full-bleed color sections; color exists only as chips, one CTA, and fading washes - Do not use more than one accent hue per component — a card gets one wash, not a rainbow - Do not sharpen corners below 8px or exceed 16px on standard cards — the radius ladder is 8 / 16 / 40 / pill