Overview
This design language treats a learning product like a tactile children’s book. It uses ivory paper, chocolate serif type, hand-drawn orange annotations, illustrated notebook scenes, meadow-like bands, and very large pauses of empty space.
SuperrBook
AI notebook that makes learning fun. Understands what you write. Makes your books come alive. Always there to help you. And does it all without a single distraction.
4.0
22
Visits
Categories
Available Pages
Version History
Workflow Collections
Design Analysis
SuperrBook Home design analysis
This design language treats a learning product like a tactile children’s book. It uses ivory paper, chocolate serif type, hand-drawn orange annotations, illustrated notebook scenes, meadow-like bands, and very large paus...
Colors
Use FDFBF9 as the main canvas and FFFBF7 for raised paper surfaces. Use 2B1A07 and 171717 for text and outlines. Use FF6F1E for handwritten notes, signatures, links, and the final footer. Use green only for magic or learning-positive words. Illustrations can introduce pencil yellow, sky blue, meadow green, and soft browns. UI chrome should stay restrained.
Typography
Use a chunky storybook serif. The hero can be very large, around 104px / 100px, with playful line breaks. Section headings are smaller and calmer, around 40px / 48px. Story pages should use roomy paragraphs in a narrow reading column. Handwritten accents should stay short.
Layout
Use generous blank space as a pause in the story. Pair short copy with one large illustrated object. Alternate quiet ivory sections with illustrated bands rather than dense feature grids. Story pages should read like a letter: centered narrow column, large paragraphs, framed illustrations, and a signature moment near the end.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Storybook Learning Notebook
A warm storybook learning-product language with ivory paper, chocolate serif typography, hand-drawn orange annotations, illustrated notebook scenes, meadow bands, and playful rounded calls to action.
Warm, childlike, tactile, handwritten, and deliberately spacious, with illustrations carrying the product story.
Primary mode: lightlearning notebook and family education productcontent-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Warm, childlike, tactile, handwritten, and deliberately spacious, with illustrations carrying the product story.
Density
2
Variance
4
Motion
3
Signals
ivory paper canvas · chunky storybook serif display type · orange handwritten annotations · notebook, pencil, meadow, and framed illustration scenes · very large pauses of white space · orange storybook footer
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Ivory Page
#FDFBF9
Warm Paper
#FFFBF7
Cream Band
#F7EFE9
Chocolate Ink
#2B1A07
Soft Ink
#171717
Crayon Orange
#B94707
Meadow Green
#0B7A3B
Pencil Blue
#3B82F6
Usage rules
Keep the interface mostly ivory and chocolate; use color like children’s stationery marks.
Use orange for handwritten emphasis and story transitions.
Let illustrations add color; do not turn UI chrome into a rainbow.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
clamp(24px, 7vw, 120px)
reading_width
640px
hero_gap
28px
section_pause
clamp(96px, 18vh, 220px)
card_gap
16px
card_padding
22px
control_padding
10px 18px
Token Radii
Corner radii tokens with a live surface sample.
tiny
8px
card
14px
button
20px
panel
28px
pill
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Chunky Storybook Serif
rounded, friendly, tactile, and book-like
Body
Readable Story Serif
warm, literary, and parent-friendly
Mono
System mono
avoid except for internal IDs or tiny technical metadata
Typography Scale
Top-level typography scale rendered as live text specimens.
Hero
104px/100px
Hero
Page title
48px/56px
Page title
Section title
40px/48px
Section title
Story body
26px/40px
Story body
Body
16px/24px
Body
Control
16px/—
Control
Caption
13px/—
Caption
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 100px |
page_title | 56px |
section_title | 48px |
story_body | 40px |
body | 24px |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 600 |
title | 400 |
body | 400 |
control | 600 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use oversized display type for the first emotional hook. · Use roomy serif paragraphs for story pages. · Use handwritten accent styling only for small annotations, not long copy.
Borders
Border tokens with resolved values.
Ink
1px solid #2B1A07
Thick ink
2px solid #2B1A07
Soft
1px solid rgba(43, 26, 7, 0.16)
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
None
none
Hand button
3px 4px 0 rgba(43, 26, 7, 0.28)
Paper photo
6px 8px 0 rgba(43, 26, 7, 0.12)
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration fast
160ms
Duration base
260ms
Easing
cubic-bezier(.2, 0, 0, 1)
Borders
Resolved border token values.
| Property | Value |
|---|---|
ink | 1px solid #2B1A07 |
thick_ink | 2px solid #2B1A07 |
soft | 1px solid rgba(43, 26, 7, 0.16) |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
none | none |
hand_button | 3px 4px 0 rgba(43, 26, 7, 0.28) |
paper_photo | 6px 8px 0 rgba(43, 26, 7, 0.12) |
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration_fast | 160ms |
duration_base | 260ms |
easing | cubic-bezier(.2, 0, 0, 1) |
Layout Principles
Use generous empty space as a story pause.
Pair short copy with one large illustrated object.
Keep story pages in a narrow reading column.
Use bands of illustration instead of dense feature grids.
Let the footer become a bold orange storybook ending.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#FDFBF9
Text
#171717
Border
{tokens.borders.thick_ink}->2px solid #2B1A07
Radius
{tokens.radii.button}->20px
Padding
{tokens.spacing.control_padding}->10px 18px
Min height
44px
Shadow
{tokens.shadows.hand_button}->3px 4px 0 rgba(43, 26, 7, 0.28)
Typography
control
Buttons link
Base Attributes
Background
transparent
Text
#B94707
Border
0
Radius
0
Padding
0
Typography
body
Cards paper
Feature Card
Component preview content
Base Attributes
Background
#FFFBF7
Text
#2B1A07
Border
{tokens.borders.ink}->1px solid #2B1A07
Radius
{tokens.radii.card}->14px
Padding
{tokens.spacing.card_padding}->22px
Shadow
{tokens.shadows.paper_photo}->6px 8px 0 rgba(43, 26, 7, 0.12)
Cards feature note
Feature Card
Component preview content
Base Attributes
Background
#FDFBF9
Text
#171717
Border
{tokens.borders.soft}->1px solid rgba(43, 26, 7, 0.16)
Radius
{tokens.radii.tiny}->8px
Padding
14px 18px
Shadow
none
Navigation minimal
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#2B1A07
Logo size
48px
Iconography
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Summary
Use hand-drawn loops, notebook labels, pencils, paper frames, signature strokes, and simple learning marks.
Responsive guidance
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
- -Below 760px, reduce the hero scale heavily and keep illustration crops understandable.
- -Keep story text in a comfortable reading column with wide margins.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not make the interface feel like a generic AI SaaS dashboard.
- -Do not replace illustrated scenes with abstract gradients.
- -Do not crowd sections; pauses are part of the language.
- -Do not use many saturated UI colors outside handwritten and illustrated moments.