# Design System: CalcText

> Components, tokens, and patterns that grow from actual usage — not upfront planning.

**Created:** 2026-03-17
**Phase:** 7 — Design System (optional)
**Agent:** Freya (Designer)

---

## What Belongs Here

The Design System captures reusable patterns that emerge during UX Design (Phase 4). It is not designed upfront — it crystallizes from real page specifications.

**What goes here:**
- **Design Tokens** — Colors, spacing, typography, shadows
- **Components** — Buttons, inputs, cards, navigation elements
- **Patterns** — Layouts, form structures, content blocks
- **Visual Design** — Mood boards, design concepts, color and typography explorations
- **Assets** — Logos, icons, images, graphics

---

## Folder Structure

```
D-Design-System/
├── 00-design-system.md          <- This file (hub + guide)
├── 01-Visual-Design/
│   ├── mood-boards/
│   ├── design-concepts/
│   ├── color-exploration/
│   └── typography-tests/
├── 02-Assets/
│   ├── logos/
│   ├── icons/
│   ├── images/
│   └── graphics/
└── components/
    ├── interactive/
    ├── form/
    ├── layout/
    ├── content/
    ├── feedback/
    └── navigation/
```

---

## Spacing Scale

_Will be defined during first design session._

| Token | Value | Use |
|-------|-------|-----|
| space-3xs | — | Hairline gaps |
| space-2xs | — | Minimal spacing |
| space-xs | — | Tight spacing |
| space-sm | — | Small gaps |
| **space-md** | — | **Default element spacing** |
| space-lg | — | Comfortable spacing |
| space-xl | — | Section padding |
| space-2xl | — | Section gaps |
| space-3xl | — | Page-level breathing room |

---

## Type Scale

_Will be defined during first design session._

| Token | Value | Use |
|-------|-------|-----|
| text-3xs | — | Fine print |
| text-2xs | — | Metadata |
| text-xs | — | Captions |
| text-sm | — | Labels |
| text-md | — | Body text |
| text-lg | — | Emphasis |
| text-xl | — | Subheadings |
| text-2xl | — | Section titles |
| text-3xl | — | Hero headings |

---

## Tokens

_Additional design tokens will be documented here as they emerge from page specifications._

---

## Patterns

_Patterns will be documented here as spacing objects recur across pages._

---

## Components

_Components will be documented here as patterns emerge across scenarios._

---

_Created using Whiteport Design Studio (WDS) methodology_