Overview
Build a light system that feels handcrafted, modular, and surprisingly playful. A warm operations system built from cream paper fields, dark brown controls, and toy-like isometric proof scenes.
Available Pages
Version History
Workflow Collections
Design Analysis
Fibery Home design analysis
Build a light system that feels handcrafted, modular, and surprisingly playful. A warm operations system built from cream paper fields, dark brown controls, and toy-like isometric proof scenes.
Image Direction
Use miniature workflow worlds, dusty pastel modules, hand-drawn side characters, and product screens embedded into a paper-grid stage.
Colors
Cream and warm white own the canvas. Dark brown carries the strongest text and actions. Coral, teal, and butter accents should show up as modular proof notes, never as a noisy rainbow wash.
Typography
Use a bold contemporary sans for the main hierarchy. Let the illustrations and small quote flourishes supply the eccentricity rather than overly stylized type.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Warm Modular Atlas
A warm operations system built from cream paper fields, dark brown controls, and toy-like isometric proof scenes.
warm, intricate, and friendly to explore
Primary mode: lightworkspace software marketingillustrated-product
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
warm, intricate, and friendly to explore
Density
5
Variance
4
Motion
2
Signals
cream paper canvas · dark brown buttons · peach and teal accents · isometric object worlds
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Ink Brown
#2B221C
Peach Paper
#FFF1DC
Soft Coral
#EAB188
Pastel Teal
#4E8E92
Warm White
#FFF9F3
Caramel Line
#D5B08F
Butter Yellow
#F6D3A0
Usage rules
Keep the background creamy and warm so the illustrated proof feels embedded, not pasted on.
Brown should own the strongest text and primary actions.
Use bright accent colors in pockets, never as a full-page overlay.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
10px
md
16px
lg
24px
section
96px
Token Radii
Corner radii tokens with a live surface sample.
sm
6px
md
12px
lg
20px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Inter
bold operational headline voice
Body
Inter
friendly support copy voice
Mono
IBM Plex Mono
small utility label voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4.2rem/—
Display
H2
2.4rem/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Keep the typographic hierarchy direct and practical so the illustrations can handle personality. · Use italic or serif flavor sparingly inside quotes and tiny annotations only. · Let paragraph blocks stay roomy to balance the dense diagram scenes.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
160ms-240ms
Easing
cubic-bezier(.24,.84,.22,1)
Spring
stiffness 95, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 160ms-240ms |
easing | cubic-bezier(.24,.84,.22,1) |
spring | stiffness 95, damping 18 |
Layout Principles
Alternate bold left-aligned claims with sprawling illustrated systems and warm proof cards.
Use large vertical chapters so each modular world has room to breathe.
Break dense product explanation with quote blocks, scenario pills, and template rails.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#2B221C
Text
#FFF1DC
Border
1px solid #2B221C
Radius
6px
Padding
12px 24px
Min height
44px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
#FFF7EE
Text
#2B221C
Border
1px solid #D5B08F
Radius
6px
Padding
12px 20px
Min height
44px
Shadow
none
Typography
body
Cards quote
Feature Card
Component preview content
Base Attributes
Background
#EFC9B8
Text
#2B221C
Border
1px solid #E1B79E
Radius
20px
Padding
24px
Shadow
0 10px 24px rgba(205,176,143,0.18)
Cards ui surface
Feature Card
Component preview content
Base Attributes
Background
#FFF9F3
Text
#2B221C
Border
1px solid #F0D4B8
Radius
20px
Padding
24px
Shadow
0 12px 30px rgba(213,176,143,0.14)
Navigation tab pill
OverviewFeaturesDocs
Base Attributes
Background
#FFF9F3
Text
#2B221C
Active text
#2B221C
Item padding
6px 12px
Item radius
999px
Badges promo
Base Attributes
Background
#F6D3A0
Text
#2B221C
Border
1px solid #F0C78D
Radius
16px
Padding
6px 20px
Shadow
none
Inputs field
Base Attributes
Background
#FFF9F3
Text
#2B221C
Border
1px solid #D5B08F
Radius
12px
Padding
12px 16px
Min height
44px
Placeholder
rgba(43,34,28,0.45)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Media types
- -isometric illustration
- -product ui
- -quote card
Subject patterns
- -miniature city-like workflows, pastel modules, hand-drawn mascots, and layered workspace screens
Composition logic
- -Let illustrations span wide stages and connect concept clusters.
- -Use UI surfaces as grounded proof inside the world, not floating unrelated windows.
Treatment rules
- -Keep illustration colors soft and dusty rather than synthetic.
- -Use warm shadows and fine grid texture behind modular scenes.
Generation cues
- -pastel isometric workflow city, cream paper background, brown UI chrome
Avoid
- -No hard-edged enterprise blue dashboards.
- -No dark-mode hero takeover.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not flatten the page into plain SaaS cards with no illustrative worldbuilding.
- -Do not use icy grays that kill the warmth of the paper base.
- -Do not make the main buttons pill-shaped and glossy.