Overview
Build a system that feels cinematic, editorial, and quietly ambitious. An editorial studio system that stages oversized serif statements on cinematic gradients with lightweight translucent pills.
New Genre
We are a global design & technology studio creating strategies, brand systems, digital products, and experiences with the world's most disruptive thinkers.
3.0
7
Visits
Sections
Available Pages
Version History
Workflow Collections
Design Analysis
New Genre Home design analysis
Build a system that feels cinematic, editorial, and quietly ambitious. An editorial studio system that stages oversized serif statements on cinematic gradients with lightweight translucent pills.
Image Direction
Use full-height gradients, sparse floating notes, and minimal proof fragments. The page should feel atmospheric first, then informational.
Colors
Let the gradient move from dark brown through cool sky into warm light. White and navy stabilize reading surfaces and controls once the mood field begins to recede.
Typography
Display moments should lean into a refined serif. Everything else stays simple, modern, and unobtrusive so the hero still feels expansive.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Gradient Venture Editorial
An editorial studio system that stages oversized serif statements on cinematic gradients with lightweight translucent pills.
airy, cinematic, and founder-facing
Primary mode: lightdesign and technology studio marketingeditorial-studio
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
airy, cinematic, and founder-facing
Density
2
Variance
4
Motion
3
Signals
full-height gradient chapters · oversized serif hero · translucent pills · minimal navigation
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Sky Fade
#AFC8E6
Dawn Brown
#3C180E
Late Sun
#F8B05A
Paper White
#F7F7F5
Ink Navy
#132240
Glass White
rgba(255,255,255,0.14)
Quiet Line
#D8DCE2
Usage rules
Let gradients do the heavy atmospheric lifting while keeping text and controls sparse.
Use white and navy to stabilize the system once the gradient stage begins to fade out.
Translucent pills should remain light and delicate, never chunky.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
8px
md
16px
lg
24px
section
120px
Token Radii
Corner radii tokens with a live surface sample.
sm
8px
md
18px
lg
28px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Cormorant Garamond
elegant editorial headline voice
Body
Inter
clean studio support voice
Mono
IBM Plex Mono
quiet metadata voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4rem/—
Display
H2
2.25rem/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Let the serif display establish the tone; keep everything else restrained and modern. · Use generous leading and empty space so the gradient chapters feel expansive. · Avoid dense UI language in the hero stage.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
220ms-320ms
Easing
cubic-bezier(.24,.78,.22,1)
Spring
stiffness 88, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 220ms-320ms |
easing | cubic-bezier(.24,.78,.22,1) |
spring | stiffness 88, damping 18 |
Layout Principles
Start with a fully immersive gradient field and only introduce structure once the editorial statement has landed.
Keep navigation light and peripheral so the hero stage can dominate.
Use whitespace as a structural device equal to the gradients themselves.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
rgba(255,255,255,0.16)
Text
#F7F7F5
Border
1px solid rgba(255,255,255,0.22)
Radius
999px
Padding
14px 24px
Min height
44px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
#132240
Text
#F7F7F5
Border
1px solid #132240
Radius
999px
Padding
14px 24px
Min height
44px
Shadow
none
Typography
body
Cards note
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#132240
Border
1px solid #D8DCE2
Radius
18px
Padding
20px
Shadow
0 12px 24px rgba(19,34,64,0.06)
Cards chapter
Feature Card
Component preview content
Base Attributes
Background
transparent
Text
#F7F7F5
Border
none
Radius
28px
Padding
0px
Shadow
none
Navigation micro item
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#F7F7F5
Active text
#F7F7F5
Item padding
6px 10px
Item radius
8px
Badges ghost
Base Attributes
Background
rgba(255,255,255,0.14)
Text
#F7F7F5
Border
1px solid rgba(255,255,255,0.22)
Radius
999px
Padding
8px 14px
Shadow
none
Inputs field
Base Attributes
Background
#FFFFFF
Text
#132240
Border
1px solid #D8DCE2
Radius
18px
Padding
12px 16px
Min height
44px
Placeholder
rgba(19,34,64,0.42)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Media types
- -gradient field
- -minimal editorial card
- -case-study note
Subject patterns
- -expansive gradients, white notes, and sparse founder-facing proof fragments
Composition logic
- -Use gradients as full-stage backgrounds, not boxed cards.
- -Let small floating notes punctuate the field rather than overfill it.
Treatment rules
- -Keep controls delicate and translucent in the hero.
- -Return to paper white when detailed reading begins.
Generation cues
- -brown to blue to cream cinematic gradient, oversized serif editorial hero
Avoid
- -No dense dashboard UI in the hero.
- -No low-contrast white text drifting onto pale backgrounds.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not replace the serif hero with a generic bold sans block.
- -Do not make pills opaque and heavy.
- -Do not force dark tiny text onto the lightest gradient zones without a support surface.