Overview
- Build the page like a calm interaction monograph rather than a product launch site.
- Let diagrams and reference fragments carry the identity.
- Use orange only when the page needs to point or commit.
Devouring Details
An interactive reference manual for interaction-curious designers.
4.0
7
Visits
Categories
Sections
Available Pages
Workflow Collections
Design Analysis
Devouring Details Home design analysis
Build the page like a calm interaction monograph rather than a product launch site. Let diagrams and reference fragments carry the identity. Use orange only when the page needs to point or commit. Favor line diagrams, cr...
Key Takeaways
- Build the page like a calm interaction monograph rather than a product launch site.
- Let diagrams and reference fragments carry the identity.
- Use orange only when the page needs to point or commit.
- Favor line diagrams, cropped UI artifacts, and atlas-style galleries over photography.
- Treat each card like a paper exhibit tile.
- Keep the shell almost entirely paper white.
Image Direction
- Favor line diagrams, cropped UI artifacts, and atlas-style galleries over photography.
- Treat each card like a paper exhibit tile.
Colors
- Keep the shell almost entirely paper white.
- Use quiet gray for supporting explanation and orange for the rare signal or CTA.
- Let cards stay only slightly darker than the page.
Typography
- Use a clean editorial sans for the main reading voice.
- Bring in italic or serif flavor only as a small tonal shift, not as the structural type system.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Monograph Interaction Atlas
An editorial interaction reference language built from paper-white space, ink text, bright orange signal marks, soft gray cards, and diagram-first chapter layouts.
Calm, literate, and diagram-forward.
Primary mode: lightinteraction design monographcontent-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Calm, literate, and diagram-forward.
Density
5
Variance
5
Motion
3
Signals
orange signal marks · soft gray tiles · paper margins
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Paper White
#FCFCFC
Ink Black
#171717
Quiet Gray
#6F6F6F
Card Mist
#F8F8F8
Signal Orange
#FF5A10
Usage rules
Keep most of the shell paper white.
Use orange only for signals, CTAs, and tiny directional punctuation.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
0.5rem
sm
0.875rem
md
1.25rem
lg
2rem
xl
3rem
section_gap
clamp(4rem, 8vw, 6rem)
panel_padding
1.5rem
Token Radii
Corner radii tokens with a live surface sample.
sm
8px
md
12px
lg
18px
xl
24px
full
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
DD
clean editorial heading voice
Body
DD
reading-friendly explanation voice
Accent
Georgia
occasional literary or italic aside
Mono
IBM Plex Mono
diagram labels and code fragments
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
clamp(2.8rem, 5vw, 4.5rem)/—
Display
H2
clamp(1.8rem, 3vw, 2.5rem)/—
H2
H3
1.1rem/—
H3
Body
1rem/—
Body
Label
0.88rem/—
Label
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Keep the reading rhythm comfortable and unhurried. · Use serif or italic accents sparingly, mostly for tone shifts and section markers.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
180ms-260ms
Easing
cubic-bezier(.22, 1, .36, 1)
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 180ms-260ms |
easing | cubic-bezier(.22, 1, .36, 1) |
Layout Principles
Lead with generous white margins.
Group proof into calm atlases rather than crowded boards.
Use one orange signal move per section at most.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Actions orange cta
Base Attributes
Background
#FF5A10
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.95rem 1.35rem
Actions text link
Base Attributes
Background
transparent
Text
#171717
Border
none
Radius
4px
Padding
0px
Cards diagram tile
Feature Card
Component preview content
Base Attributes
Background
#F8F8F8
Text
#171717
Border
1px solid rgba(23,23,23,0.04)
Radius
12px
Padding
1.25rem
Shadow
none
Scroll motion
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Scroll driver
native
Cadence
calm chapter progression
Patterns
- -sticky reference
- -section reveal
Page logic
- -One proof zone may stay visible while nearby explanation advances.
- -The page should still read clearly as static editorial content.
Constraints
- -Never make motion the only way to understand the chapter.
- -Keep scroll effects subtle and reading-first.
Reduced motion
- -Remove sticky behaviors when needed.
- -Preserve section grouping and hierarchy without animation.
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Media types
- -diagram grid
- -UI fragment
- -orange-node illustration
Subject patterns
- -signal dots
- -thin strokes
- -soft gray tiles
Composition logic
- -Keep diagrams centered inside quiet cards.
- -Use one atlas grid per idea cluster.
Treatment rules
- -Prefer white and light gray over colorful panels.
- -Use orange as the only high-saturation signal.
Generation cues
- -Ask for an editorial design reference page with orange signal dots and calm diagram grids.
- -Mention paper margins and low-chrome cards.
Avoid
- -No gradient hero fog.
- -No neon code-editor aesthetic.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not flood the page with orange.
- -Do not add heavy shadows or glossy card chrome.
- -Do not compress the editorial spacing into a busy dashboard grid.