Overview
Use a calm storybook forest language: layered hills, trees, clouds, water, dashed trail paths, hand-drawn headings, and warm paper-like content moments.
The Cozy Hollow
A cozy nature inspired, play-based space for children and caregivers to connect and explore.
3.0
10
Visits
Styles
Available Pages
Version History
Workflow Collections
Design Analysis
The Cozy Hollow Home design analysis
Use a calm storybook forest language: layered hills, trees, clouds, water, dashed trail paths, hand-drawn headings, and warm paper-like content moments.
Colors
Use misty blue and spruce greens for scenery. Use deep pine for dark story sections, cream for friendly text and cards, and warm orange only for labels or small woodland markers.
Typography
Use a chunky hand-drawn display face for titles around 56px and 40px. Keep body copy in a readable humanist sans with enough weight for caregivers to scan comfortably.
Layout
Open with full-viewport illustration. Alternate light scenic areas with deep forest content sections. Keep content blocks broad and simple rather than card-heavy.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Forest Play Space
A nature-play design language with layered forest illustration, hand-drawn display type, muted blue-green scenery, cream story cards, rounded FAQ rows, and warm orange woodland accents.
Gentle, storybook, grounded, and unhurried.
Primary mode: mixedchild-centered community spacecontent-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Gentle, storybook, grounded, and unhurried.
Density
4
Variance
4
Motion
2
Signals
layered hills and trees · hand-drawn type · forest silhouettes · dashed trail paths · postcard photos · cream paper cards
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Misty Sky
#E3EEF3
Blue Spruce
#2F4B59
Deep Pine
#141E16
Warm Cream
#F6E8CC
Trail Orange
#D98A4E
Earth Brown
#6E5338
Usage rules
Use illustrated scenery as the main identity, not generic cards.
Pair dark pine sections with cream type for story moments.
Use orange sparingly for labels and playful markers.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
clamp(24px, 5vw, 70px)
section_padding
80px 70px
card_padding
24px
faq_gap
16px
Token Radii
Corner radii tokens with a live surface sample.
small
8px
card
14px
photo
0
pill
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Rounded hand-drawn display
chunky, playful, and handmade
Body
Readable humanist sans
clear caregiver-facing copy
Mono
System mono
not central; avoid unless needed
Typography Scale
Top-level typography scale rendered as live text specimens.
Hero
56px/1
Hero
Section
40px/1.05
Section
Small title
30px/—
Small title
Body
16px/1.35
Body
Label
18px/1.2
Label
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 1 |
section | 1.05 |
body | 1.35 |
label | 1.2 |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 300 |
body | 600 |
regular | 400 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use display type for place names, section titles, and friendly labels. · Keep longer copy in the readable sans with sturdy weight.
Borders
Border tokens with resolved values.
Paper
10px solid #F6E8CC
Trail
8px dashed rgba(246, 232, 204, 0.22)
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
None
none
Photo
0 0 0 1px rgba(20, 30, 22, 0.10)
Borders
Resolved border token values.
| Property | Value |
|---|---|
paper | 10px solid #F6E8CC |
trail | 8px dashed rgba(246, 232, 204, 0.22) |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
none | none |
photo | 0 0 0 1px rgba(20, 30, 22, 0.10) |
Layout Principles
Open with a full illustrated landscape, not a conventional nav/hero.
Alternate scenic light sections with dark forest story sections.
Use large simple content blocks; avoid dense grids.
Treat photos like postcards inside the illustrated world.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Cards photo postcard
Feature Card
Component preview content
Base Attributes
Background
#F6E8CC
Text
#141E16
Border
{tokens.borders.paper}->10px solid #F6E8CC
Radius
0
Padding
0
Shadow
{tokens.shadows.photo}->0 0 0 1px rgba(20, 30, 22, 0.10)
Cards paper note
Feature Card
Component preview content
Base Attributes
Background
#F6E8CC
Text
#1D1613
Border
0
Radius
{tokens.radii.card}->14px
Padding
{tokens.spacing.card_padding}->24px
Shadow
none
Lists faq row
Base Attributes
Background
#E3EEF3
Text
#000000
Border
0
Radius
{tokens.radii.small}->8px
Padding
24px
Min height
68px
Icon
plus
Buttons woodland
Base Attributes
Background
#D98A4E
Text
#141E16
Border
0
Radius
{tokens.radii.pill}->999px
Padding
12px 20px
Min height
44px
Typography
body
Illustration
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Summary
Use flat layered hills, clouds, conifers, trails, water, and small woodland badges in muted greens and creams.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not use glossy SaaS cards.
- -Do not replace illustration with generic stock photography.
- -Do not make the palette bright primary colors.
- -Do not over-tighten the copy; the pace should feel unhurried.