Overview
Editorial Conversion Grid is a conversion studio system that trades generic startup polish for sharp typography, clean white space, and visible annotation energy. It should feel fast, opinionated, and highly legible.
Quick14
Not just another design agency, we analyze the market to craft websites that increase your conversion rates and generates more revenue in just 14 days
3.0
162
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Quick14 Home design analysis
Editorial Conversion Grid is a conversion studio system that trades generic startup polish for sharp typography, clean white space, and visible annotation energy. It should feel fast, opinionated, and highly legible.
Image Direction
Use minimal but intentional media: annotated UI fragments, proof logos, compact portrait crops, and scheduling or quote modules that feel operational. Any imagery should support the editorial grid rather than overwhelm it.
Colors
The palette is mostly black, white, and quiet rule gray, with orange used like markup from a designer or strategist. Keep the page clean enough that the orange accents read as editorial notes rather than brand wallpaper.
Typography
Build hierarchy through a contrast between a crisp sans and a sharper serif display. Serif usage should stay concentrated in hero or section-level statements. The rest of the system should read with plain, direct sans text that feels conversion-focused and unsentimental.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Editorial Conversion Grid
A sharp studio-marketing system built from white editorial space, black grotesk headlines, orange markup accents, and serif drama inside lightly beveled frames.
editorial, sharp, white, and high-contrast with annotation energy
Primary mode: lightconversion-focused design studio marketinglanding-page
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
editorial, sharp, white, and high-contrast with annotation energy
Density
3
Variance
4
Motion
3
Signals
white field · orange markup accent · serif contrast moments · gridline framing
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Studio Black
#111111
Paper White
#FFFFFF
Grid Gray
#E7E7E2
Markup Orange
#F1882A
Mist Gray
#818181
Soft Panel
#F7F7F4
Usage rules
Let white dominate.
Use orange for emphasis, not as a major background fill.
Keep black crisp and decisive for headlines and dense content areas.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
10px
md
16px
lg
24px
section
80px
Token Radii
Corner radii tokens with a live surface sample.
sm
10px
md
16px
lg
20px
full
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Instrument Serif
editorial contrast with understated drama
Body
Inter
direct conversion copy and UI text
Accent
Britti Sans
slightly characterful support sans for utility moments
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
clamp(3.2rem, 6vw, 5.2rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use high-contrast display moments sparingly but decisively. · Most body and UI copy should remain plain, crisp, and direct. · Preserve strong hierarchy through scale before weight.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
180ms-360ms
Easing
cubic-bezier(.16,1,.3,1)
Spring
stiffness 125, damping 17
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 180ms-360ms |
easing | cubic-bezier(.16,1,.3,1) |
spring | stiffness 125, damping 17 |
Layout Principles
Use white editorial columns separated by rules and light framing.
Support headline drama with small annotation chips rather than many decorative elements.
Scheduling and proof modules can introduce one stronger dark counterweight.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#FFD0A7
Text
#ED7000
Border
1px solid #FDA05D
Radius
8px
Padding
8px 16px
Min height
37px
Shadow
0 4px 8px -4px rgba(204, 106, 19, 0.75), inset 0 -3px 0 #FFAB5E, inset 0 3px 0 rgba(255,255,255,0.25)
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#ED7000
Border
1px solid #AAAAAA
Radius
8px
Padding
8px 12px
Min height
36px
Shadow
inset 0 -3px 0 #BFBFBF, inset 0 3px 0 rgba(255,255,255,0.25)
Cards default
Feature Card
Component preview content
Base Attributes
Background
#F7F7F4
Text
#111111
Border
1px solid #E7E7E2
Radius
16px
Padding
24px
Shadow
none
Cards dark
Feature Card
Component preview content
Base Attributes
Background
#1A1A1A
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.06)
Radius
16px
Padding
24px
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#111111
Height
54px
Active text
#111111
Item padding
0.5rem 0.75rem
Item radius
12px
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Summary
Use editorial screenshots, annotated UI crops, testimonials, and lightly staged interface or brand artifacts.
Guidance
- -Let orange behave like markup or underlining.
- -If photography appears, keep it sharp, sparse, and subordinate to typography.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -No generic SaaS gradients.
- -No bubbly startup illustration kits.
- -No soft, low-contrast gray-on-gray hierarchy.
- -No excessive orange coverage across whole sections.