Overview
Build a service-page system that feels calm, trustworthy, and founder-friendly. A minimal founder-support system built from white space, black capsule CTAs, soft gray cards, and calm product proof.
3
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Hurdle Home design analysis
Build a service-page system that feels calm, trustworthy, and founder-friendly. A minimal founder-support system built from white space, black capsule CTAs, soft gray cards, and calm product proof.
Image Direction
Use soft gray media stages, minimal device proof, and quiet testimonial cards. Visuals should reassure rather than perform.
Colors
This system should live primarily in black, white, and soft gray. Any green accent must stay tiny and functional rather than decorative.
Typography
Use a clean modern sans with plenty of air. The tone should feel quietly premium and easy to trust.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Soft Launch Atelier
A minimal founder-support system built from white space, black capsule CTAs, soft gray cards, and calm product proof.
calm, clean, and quietly premium
Primary mode: lightdesign studio marketingservice-marketing
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
calm, clean, and quietly premium
Density
3
Variance
2
Motion
1
Signals
white canvas · black capsule buttons · soft gray cards · air-filled typography
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Studio Black
#1A1A1A
Paper White
#FFFFFF
Mist Surface
#F5F5F5
Quiet Border
#E7E7E7
Body Gray
#5C5C5C
Success Green
#A6D65A
Warm Shadow
rgba(0,0,0,0.08)
Usage rules
The system should live mostly in black, white, and soft gray.
Use green only inside proof or tiny status accents, never as a button replacement.
Keep gray copy readable and never let it drift into washed-out lightness.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
8px
md
16px
lg
24px
section
96px
Token Radii
Corner radii tokens with a live surface sample.
sm
16px
md
20px
lg
28px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Inter
clean founder-facing display voice
Body
Inter
calm support copy voice
Mono
IBM Plex Mono
light utility label voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
3.9rem/—
Display
H2
2.15rem/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use a modern sans with generous breathing room and clear hierarchy. · Let type stay understated so the service offer feels calm and credible. · Keep paragraphs comfortable and airy rather than tightly packed.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
140ms-200ms
Easing
cubic-bezier(.22,.8,.2,1)
Spring
stiffness 90, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 140ms-200ms |
easing | cubic-bezier(.22,.8,.2,1) |
spring | stiffness 90, damping 18 |
Layout Principles
Lead with a calm top section, then step into oversized media stages and quietly structured pricing or FAQ chapters.
Use white-space generously around every service module.
Keep the page readable from a distance with minimal decorative noise.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#1A1A1A
Text
#FFFFFF
Border
1px solid #1A1A1A
Radius
999px
Padding
12px 20px
Min height
44px
Shadow
0 6px 12px rgba(0,0,0,0.08)
Typography
body
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#1A1A1A
Border
1px solid #E7E7E7
Radius
999px
Padding
12px 20px
Min height
44px
Shadow
0 4px 10px rgba(0,0,0,0.06)
Typography
body
Cards soft
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#1A1A1A
Border
1px solid #E7E7E7
Radius
28px
Padding
24px
Shadow
0 10px 24px rgba(0,0,0,0.04)
Cards media
Feature Card
Component preview content
Base Attributes
Background
#F5F5F5
Text
#1A1A1A
Border
1px solid #F0F0F0
Radius
28px
Padding
24px
Shadow
none
Navigation item
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#1A1A1A
Active text
#1A1A1A
Item padding
0px
Item radius
0px
Badges pill
Base Attributes
Background
#FFFFFF
Text
#1A1A1A
Border
1px solid #E7E7E7
Radius
999px
Padding
6px 12px
Shadow
none
Inputs field
Base Attributes
Background
#FFFFFF
Text
#1A1A1A
Border
1px solid #E7E7E7
Radius
999px
Padding
12px 16px
Min height
44px
Placeholder
rgba(26,26,26,0.42)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Media types
- -device mockup
- -service card
- -testimonial card
Subject patterns
- -soft gray media stages, minimal device proof, and gentle rounded pricing cards
Composition logic
- -Use large pale frames to present proof calmly.
- -Keep testimonials and service modules evenly spaced with lots of air.
Treatment rules
- -Preserve subtle shadows only on the main service cards.
- -Keep the capsule button language consistent across the page.
Generation cues
- -minimal white studio site, black capsule buttons, soft gray cards
Avoid
- -No saturated gradient overload.
- -No tiny cramped modules with weak contrast.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not turn the CTA system into square enterprise buttons.
- -Do not over-accent with green.
- -Do not let soft gray cards become so pale that edges disappear.