Design Analysis
This design language is a quiet workspace for delegating tasks to an AI assistant. The screen should feel spacious, personal, and utilitarian: a mostly white canvas, a slim persistent tool rail, one centered work object,...
This design language is a quiet workspace for delegating tasks to an AI assistant. The screen should feel spacious, personal, and utilitarian: a mostly white canvas, a slim persistent tool rail, one centered work object, and compact controls that do not fight for attention. The system works best when the main surface is obvious: a composer, suggestion list, pricing panel, reading article, or task replay. Avoid turning the page into a broad marketing dashboard.
Use white as the dominant canvas and active surface. Use very pale grays for containment: F7F7F7 for active pills, nested bands, and rail fills; F8F8F8 for hover surfaces and replay trays; EEEEEE for hairline borders. Use 1B1B1B for primary text and dark action buttons. Use 585858 for secondary copy, inactive navigation, metadata, and footer links. Use B7B7B7 for placeholders and disabled affordances.
Use a rounded circular grotesk for nearly everything. Most product text should be medium weight and compact. Page and section headings are modest at 24px / 32px, while body copy is 16px / 24px. Navigation and controls use 14px / 20px. An occasional soft slab display treatment can appear on identity-rich headers, around 48px / 48px, but it should be rare. Do not make the application feel editorial by default.
Keep a narrow icon rail pinned to the left and leave the rest of the canvas open. Center the primary work surface horizontally. Typical task surfaces can be around 448px wide; a bottom composer can be wider, around 708px, but should still feel centered and calm. Use narrow reading columns around 544px for documentation-like content, paired with a compact sticky outline. Pricing or option cards can sit in a row on desktop, but their interiors should remain soft and uncluttered.
Core identity and authoring metadata from the refto.one design model.
A sparse white AI workspace with a persistent icon rail, centered task surfaces, soft nested panels, compact pill controls, and tiny warm or green signals.
Quiet, assistant-led, roomy, and personal without becoming decorative.
Fields outside the primary renderer remain visible here as structured fallback content.
Primitive palettes and resolved token colors for the active preview mode.
Spacing scales rendered as tokens with a simple length specimen.
Corner radii tokens with a live surface sample.
Font families from the current design YAML, including fallback stacks and usage character.
Top-level typography scale rendered as live text specimens.
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
decorative_title | 48px |
page_title | 32px |
section_title | 32px |
body | 24px |
control | 20px |
caption | 19.5px |
micro_label | 15px |
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
title | 700 |
decorative | 500 |
control | 500 |
body | 500 |
Fields outside the primary renderer remain visible here as structured fallback content.
Border tokens with resolved values.
Shadow tokens with resolved values and shadow samples where applicable.
Motion tokens rendered as resolved values for timing and personality.
Resolved border token values.
| Property | Value |
|---|---|
hairline | 1px solid #EEEEEE |
soft | 1px solid #F7F7F7 |
mist | 1px solid rgba(247, 247, 247, 0.70) |
dark_ring | 1px solid #1B1B1B |
Resolved shadow token values.
| Property | Value |
|---|---|
none | none |
soft_control | 0 1px 2px rgba(0, 0, 0, 0.05) |
dark_control | 0 1px 3px rgba(0, 0, 0, 0.20), inset 0 1.5px 0.5px rgba(255, 255, 255, 0.10) |
warm_inner_glow | inset 0 -28px 50px rgba(251, 166, 42, 0.08) |
Resolved motion token values.
| Property | Value |
|---|---|
duration_fast | 150ms |
duration_base | 200ms |
easing | cubic-bezier(.4, 0, .2, 1) |
active_scale | 0.99 |
Low-complexity component tokens rendered as design-system specimens.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Compact list of patterns the design system explicitly avoids.
