Design Language
Relevant source files
The following files were used as context for generating this wiki page:
The Delano Design Language is centered around the "Creative North Star" of a Local Dossier. It is designed to feel like a precise, quiet, and operational tool for managing delivery contracts. The visual system prioritizes legibility, trust, and provenance over decorative elements, positioning the interface as a "read-only" surface that supports maintainers, operators, and coding agents in their daily workflows.
The design is intentionally flat and document-like, utilizing warm neutral paper surfaces and tinted inks rather than pure black or white. This approach ensures that the "product"—the delivery contracts stored in .project/—remains the focus, while the UI "chrome" remains secondary and non-distracting.
Sources: DESIGN.md:104-124, README.md:20-22, PRODUCT.md:22-35
Core Visual System
The system is built on a foundation of specific color tokens, typography rules, and layout structures that reinforce the dossier aesthetic.
Color Palette (OKLCH)
The palette uses warm neutrals for surfaces and semantic colors for status. It strictly avoids pure white or pure black to maintain a "warm paper" feel.
| Token | OKLCH Value | Usage |
|---|---|---|
document-bg | oklch(0.985 0.004 85) | App background, default button fill |
paper-surface | oklch(0.995 0.003 85) | Sidebar, panels, code blocks, table headers |
ink | oklch(0.21 0.008 80) | Primary text, selected nav, checked tasks |
slate-accent | oklch(0.52 0.08 245) | Active workflow signal, rare emphasis |
brand-forest | oklch(0.27 0.025 165) | Primary brand tone (logo only) |
success | oklch(0.62 0.10 155) | Completion and validation status |
warning | oklch(0.62 0.13 55) | Blockers and incomplete health |
Sources: DESIGN.md:14-34, DESIGN.md:154-184
Typography
The system uses Inter for standard UI elements and JetBrains Mono for data requiring exact provenance (paths, IDs, timestamps).
- Display: 26px, 600 weight (Titles)
- Headline: 20px, 600 weight (Markdown H2)
- Document Body: 15px, 400 weight, 1.65 line height (Prose reading)
- Mono: 12.5px (Paths, IDs, metadata)
Sources: DESIGN.md:204-233
Structural Architecture
The layout reflects a "Ledger" or "Table" structure, avoiding common SaaS tropes like card-based layouts.
The diagram above illustrates the spatial relationship of the Viewer components, emphasizing the fixed sidebar and sticky navigation. Sources: DESIGN.md:255-265
Layout and Elevation Rules
- Flat Ledger Rule: Depth is conveyed through 1px hairline borders (
hairline) and tonal shifts rather than shadows. - Source Visibility: File paths and timestamps must remain visible near content.
- Reading Comfort: Markdown prose is kept between 65 to 75 characters per line for optimal readability.
Sources: DESIGN.md:270-290, PRODUCT.md:37-45
Component Design
Status Indicators
Status is communicated through a combination of labels, pill shapes, and color-coded dots. This ensures accessibility by not relying on color alone.
The design of status chips emphasizes clarity in task state transitions. Sources: DESIGN.md:321-326, src/cli/lib/project-state.js:10-11
Data Flow for Project State
The design language is mirrored in how the CLI manages markdown artifacts. Frontmatter serves as the "source of truth" for the UI's metadata panels.
| Component | Target File | Template Source |
|---|---|---|
| Spec | spec.md | .project/templates/spec.md |
| Plan | plan.md | .project/templates/plan.md |
| Task | tasks/T-XXX.md | .project/templates/task.md |
| Workstream | workstreams/WS-X.md | .project/templates/workstream.md |
Sources: src/cli/lib/project-state.js:63-70, README.md:73-82
Design Constraints (Do and Do Not)
To maintain the "Operational Dossier" feel, the system enforces strict boundaries on visual styles.
Prohibited Elements
- No Decorative Shadows: Depth is tonal or line-based only.
- No SaaS Tropes: No hero metrics, promotional compositions, or card grids.
- No Pure Neutrals: Never use
#000or#FFF; use tinted tokens likedocument-bgandink. - No "Flashy" Brand Usage: The
brand-forestandbrand-mintcolors are reserved for the logo assets and are not to be used for general UI elements like success buttons.
Sources: DESIGN.md:368-386, PRODUCT.md:27-35
Required Practices
- Monospace for Evidence: Use JetBrains Mono for IDs (e.g.,
T-001,WS-A) and timestamps. - Hairline Borders: Use
hairline(1px) for structural separation. - Provenance: Always display the source path of the document being viewed.
Sources: DESIGN.md:238-245, DESIGN.md:353-356
Summary
The Delano Design Language creates a high-trust, low-distraction environment for managing technical debt and delivery progress. By adhering to the "Contract Ink Rule"—where text and structure carry the interface—the system ensures that the information itself is the primary focus. This deliberate, document-centric approach differentiates Delano from standard project management tools, prioritizing the needs of operators and agents working within complex source-controlled environments.