C. Cassel
0d38bd3108
Transform CalcText from a single-document calculator into a full workspace application with multi-document support, theming, and responsive mobile experience. - Theme system: 5 presets (Light, Dark, Matrix, Midnight, Warm) + accent colors - Document model with localStorage persistence and auto-save - Tab bar with keyboard shortcuts (Ctrl+N/W/Tab/1-9), rename, close - Sidebar with search, recent, favorites, folders, templates, drag-and-drop - 5 templates: Budget, Invoice, Unit Converter, Trip Planner, Loan Calculator - Status bar with cursor position, engine status, dedication to Igor Cassel - Results panel: type-specific colors, click-to-copy, error hints - Format toolbar: H, B, I, //, color labels with live preview toggle - Syntax highlighting using theme CSS variables - Error hover tooltips - Mobile: bottom results tray, sidebar drawer, touch targets, safe areas - Docker multi-stage build (Rust WASM + Vite + Nginx) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
105 lines
2.5 KiB
Markdown
105 lines
2.5 KiB
Markdown
# 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_
|