# Drawhistory · Design system migration spec

> Source: https://drawhistory.com  ·  Curated by OpenDesign  ·  en

> This site demonstrates a highly restrained, typography-focused editorial design with a professional and impactful tone.

## 1. Identity DNA

Drawhistory's design system is built around the analogy of a formal corporate announcement card—structured, intentional, and designed to convey weight. Every element serves the singular purpose of making strategic information feel authoritative without resorting to visual noise. The result is a system where restraint itself becomes the primary aesthetic statement.

**One-liner:** A dual-column editorial layout announcing a company merger with contrasting earthy and dark cards.
**Keywords:** impact · design · strategy · integration · announcement
**Analogy:** A formal yet warm corporate announcement card

## 2. Color

The color system operates on a high-contrast principle: deep charcoal and olive grounds meet warm off-white text, with a single vibrant orange reserved exclusively for emphasis. This chromatic discipline ensures that when color appears, it carries immediate functional meaning rather than decorative intent.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#101010` | main background |
| `--bg-soft` | `#3d3b31` | card background |
| `--bg-quiet` | `#101010` | quiet area |
| `--ink` | `#f2e9e1` | body text |
| `--ink-soft` | `#f2e9e1` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--muted-soft` | `rgba(242, 233, 225, 0.5)` | weak hint |
| `--accent` | `#ff6714` | single accent |
| `--line` | `rgba(242, 233, 225, 0.4)` | divider |

**Color principle:** High contrast between dark backgrounds and light warm text, with a single vibrant orange accent.

The principle is clear: contrast serves legibility, not decoration, and saturation is rationed to preserve the system's serious tone.

## 3. Typography

Typography speaks in two distinct registers—a geometric sans-serif for display headings set in tight-tracked all caps, and a monospace face for functional UI labels. The exclusive use of regular (400) weight across all text is a deliberate structural choice, eliminating bold as a variable and forcing hierarchy to emerge from scale and spacing alone.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 104px | 1.1 | 400 | -2px | Main headings on dark cards |
| body | 16px | 1.5 | 400 | normal | Card descriptive text |
| label | 14px | 1.4 | 400 | 0.5px | Top announcement banner and buttons |

**Type rules:**
- All caps for buttons and announcement banners
- Tight tracking on large display headings
- Monospace used for uppercase UI labels

## 4. Spacing

Spatial rhythm follows a consistent 32px and 24px internal padding logic within cards, creating breathing room that reinforces the system's measured, editorial cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 32px and 24px padding within cards

## 5. Surfaces

Surfaces are deliberately flat—no drop shadows, no elevation tricks. Depth is communicated through subtle light borders that separate internal elements, establishing hierarchy through edge definition rather than optical illusion.

- **Radius:** sm 8px · md 16px · lg 16px · pill 9999px
- **Borders:** Subtle light borders separating internal elements

## 6. Layout

The layout skeleton is a centered two-column composition of tall cards against a dark ground, crowned by a full-width announcement banner. This structure treats the viewport like a printed broadsheet, prioritizing vertical scanning and clear content zones.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 2 columns, gutter 32px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Two tall cards centered on a dark background, with a full-width top banner

## 7. Motion & Interaction

Motion follows a philosophy of quiet confirmation rather than spectacle—smooth 0.8-second cubic-bezier transitions on color, opacity, and text decoration. Every animation exists to acknowledge interaction, never to announce itself.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and opacity transitions on hover
  - Text decoration transitions

- **Hover:** Subtle transitions on interactive elements
- **Click:** Pointer cursor on all interactive elements
- **Transition:** Cubic-bezier easing for all state changes
- **Keyboard:** Not visible in static screenshot

## 8. Voice & Don'ts

The editorial voice is professional and forward-looking, with all-caps headlines and uppercase monospace calls to action reinforcing institutional gravity. Language stays impactful but avoids casual register, matching the visual system's disciplined formality.

- **Tone:** Professional, impactful, and forward-looking
- **Headline style:** All caps, tight tracking, large scale geometric sans
- **CTA style:** Uppercase monospace with thin borders
- **Avoid:** Overly casual language / Cluttered layouts / High saturation colors

### Don'ts
- ❌ Don't use colorful gradients — screenshot shows flat, solid dark surfaces
- ❌ Don't use bold font weights — screenshot shows exclusively regular (400) weight
- ❌ Don't use centered text for paragraphs — screenshot shows centered text for all elements
- ❌ Don't use bright backgrounds — screenshot shows dark, muted earthy tones
- ❌ Don't use complex drop shadows — screenshot shows flat cards with no elevation
- ❌ Don't use decorative serif fonts — screenshot shows clean geometric and monospace types

What Drawhistory deliberately omits is as defining as what it includes—no bold weights, no colorful gradients, no complex shadows, and no decorative serifs form the boundaries of this restrained visual contract.

## System Prompt (paste into AI tool)

```
This site is a design agency announcement page using a high-contrast, muted palette. The layout features two large, dark cards (dark olive #3d3b31 and charcoal #101010) centered on a dark background. Key colors are #f2e9e1 (text), #101010 (background), and #ff6714 (accent). Typography relies on geometric-sans for display and monospace for labels. Critical donts: never use bold weights (everything is regular), avoid bright or neon colors, and do not use drop shadows for elevation.
```