Overview
Use a warm cream canvas, huge bold type, dark rounded download buttons, tactile product mockups, and oversized line icons. The interface should feel satisfying and physical.
35
Visits
Categories
Available Pages
Version History
Workflow Collections
Design Analysis
Klack Home design analysis
Use a warm cream canvas, huge bold type, dark rounded download buttons, tactile product mockups, and oversized line icons. The interface should feel satisfying and physical.
Colors
Use cream instead of white as the main atmosphere. Use warm dark ink for text, icons, and primary buttons. Use purple as a small highlight behind important words or active switch states.
Typography
Use system sans typography with heavy weight. Hero type can be 96px / 96px; feature labels should be bold and large.
Layout
Lead with a big left-aligned headline and product proof below. Follow with large icon feature grids. Support pages may invert to a dark shell with cream text.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Cream Tactile Utility
A warm Mac utility design language with cream canvas, huge bold system type, dark rounded download buttons, purple highlight marks, tactile app mockups, and large line-icon feature grids.
Tactile, warm, satisfying, and product-demo-led.
Primary mode: lightdesktop utility appui-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Tactile, warm, satisfying, and product-demo-led.
Density
4
Variance
3
Motion
3
Signals
cream canvas · huge bold headline · purple highlight slab · dark Mac mockup · large line icons · dark FAQ variant
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Cream Canvas
#FFF7ED
Warm Ink
#292524
Muted Stone
#A8A29E
Purple Hit
#E9A5FF
Dark Panel
#1C1917
Keycap Yellow
#FDE68B
Usage rules
Use cream as the main atmosphere, not white.
Use purple as a small tactile highlight, not a full brand gradient.
Dark mode can appear for FAQ or app mockups, but not as the default shell.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
32px
hero_top
120px
section_gap
96px
feature_gap
56px
button_padding
16px 20px
Token Radii
Corner radii tokens with a live surface sample.
button
16px
app
40px
panel
24px
badge
8px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
System sans
heavy, friendly, and direct
Body
System sans
plain product utility copy
Mono
System mono
optional for version and technical notes
Typography Scale
Top-level typography scale rendered as live text specimens.
Hero
96px/1
Hero
Feature title
30px/1.15
Feature title
Faq title
96px/—
Faq title
Body
20px/1.5
Body
Control
18px/1.2
Control
Badge
14px/—
Badge
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 1 |
feature_title | 1.15 |
body | 1.5 |
control | 1.2 |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
hero | 700 |
title | 700 |
body | 500 |
control | 700 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use bold weight for hero and feature names. · Keep paragraphs secondary; the product mockup should explain the app.
Borders
Border tokens with resolved values.
Subtle
1px solid rgba(41, 37, 36, 0.15)
Dark
1px solid rgba(255, 247, 237, 0.10)
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
Button
0 18px 30px rgba(41, 37, 36, 0.20)
Mockup
0 32px 80px rgba(41, 37, 36, 0.24)
Borders
Resolved border token values.
| Property | Value |
|---|---|
subtle | 1px solid rgba(41, 37, 36, 0.15) |
dark | 1px solid rgba(255, 247, 237, 0.10) |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
button | 0 18px 30px rgba(41, 37, 36, 0.20) |
mockup | 0 32px 80px rgba(41, 37, 36, 0.24) |
Layout Principles
Lead with oversized left-aligned type and a product mockup below.
Use feature grids with large simple icons.
Allow dark pages for support/FAQ content.
Keep the top nav minimal and spacious.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#292524
Text
#FFF7ED
Border
0
Radius
{tokens.radii.button}->16px
Padding
{tokens.spacing.button_padding}->16px 20px
Min height
60px
Shadow
{tokens.shadows.button}->0 18px 30px rgba(41, 37, 36, 0.20)
Typography
control
Buttons subtle
Base Attributes
Background
rgba(41, 37, 36, 0.05)
Text
#292524
Border
0
Radius
{tokens.radii.button}->16px
Padding
{tokens.spacing.button_padding}->16px 20px
Min height
60px
Typography
control
Cards app mockup
Feature Card
Component preview content
Base Attributes
Background
#1C1917
Text
#FFF7ED
Border
{tokens.borders.dark}->1px solid rgba(255, 247, 237, 0.10)
Radius
{tokens.radii.app}->40px
Padding
32px
Shadow
{tokens.shadows.mockup}->0 32px 80px rgba(41, 37, 36, 0.24)
Cards faq row
Feature Card
Component preview content
Base Attributes
Background
transparent
Text
#FFF7ED
Border
0 0 1px 0 solid rgba(255, 247, 237, 0.12)
Radius
0
Padding
28px 0
Lists feature
Base Attributes
Text
#292524
Gap
18px
Icon color
#292524
Icon size
64px
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not use sterile white backgrounds.
- -Do not make feature icons tiny.
- -Do not turn the purple highlight into a gradient brand wash.
- -Do not hide the product mockup behind abstract art.