Overview
Use oversized commerce energy: condensed black headlines, bright green calls to action, floating locked media, and direct creator-marketplace copy.
5
Visits
Categories
Available Pages
Version History
Workflow Collections
Design Analysis
unlock Home design analysis
Use oversized commerce energy: condensed black headlines, bright green calls to action, floating locked media, and direct creator-marketplace copy.
Colors
Use 00B92B as the conversion color. It can fill whole FAQ or utility sections. Pair it with 262626 for text and dark pills. Use white for the main hero canvas and 2D2D2D for editorial/news pages.
Typography
Use a heavy condensed display face for hero and section titles. Hero type can sit around 100px with tight leading. Body and navigation should be plain and functional.
Layout
Center the main headline and surround it with floating media cards. Stack primary actions when the user has two clear paths. Blog and creator pages can switch to dark card grids.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Creator Unlock Green
A loud creator-commerce language with condensed black headlines, electric green conversion surfaces, floating locked media cards, dark editorial listings, and oversized FAQ blocks.
Bold, commercial, social, direct, and deliberately oversized.
Primary mode: mixedcreator monetization and locked contentui-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Bold, commercial, social, direct, and deliberately oversized.
Density
5
Variance
5
Motion
3
Signals
giant condensed uppercase headlines · neon green CTAs · floating blurred content cards · lock icons · dark news cards
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Creator Green
#00B92B
Ink
#262626
White
#FFFFFF
Soft Gray
#F1F1F1
Dark Editorial
#2D2D2D
Creator White
#F8F8F8
Usage rules
Use green as a conversion and category color, including full-page moments.
Use dark editorial pages for content/news, not for the main conversion hero.
Let creator imagery be messy and social; keep controls simple.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
clamp(24px, 5vw, 70px)
hero_gap
32px
card_gap
36px
section_gap
90px
button_padding
16px 32px
Token Radii
Corner radii tokens with a live surface sample.
media
8px
nav
28px
button
999px
card
24px
accordion
12px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Condensed heavy sans
compressed, poster-like, loud
Body
Plain grotesk
simple app and commerce copy
Mono
System mono
rare; only for codes or system text
Typography Scale
Top-level typography scale rendered as live text specimens.
Hero
100px/.86
Hero
Section
70px/.9
Section
Subhead
47px/—
Subhead
Body
18px/1.35
Body
Control
14px/1.2
Control
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | .86 |
section | .9 |
body | 1.35 |
control | 1.2 |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 900 |
title | 900 |
body | 400 |
control | 400 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use uppercase condensed headlines as the main graphic object. · Keep body and nav labels plain so the display type can dominate.
Borders
Border tokens with resolved values.
Dark
2px solid #262626
White
2px solid #FFFFFF
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
Soft
0 8px 24px rgba(0, 0, 0, 0.14)
None
none
Borders
Resolved border token values.
| Property | Value |
|---|---|
dark | 2px solid #262626 |
white | 2px solid #FFFFFF |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
soft | 0 8px 24px rgba(0, 0, 0, 0.14) |
none | none |
Layout Principles
Center the conversion headline and surround it with floating media.
Make primary actions large, green, and stacked when needed.
Use dark editorial grids for news and creator stories.
Use FAQ pages as bold full-green utility surfaces.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#00B92B
Text
#262626
Border
0
Radius
{tokens.radii.button}->999px
Padding
{tokens.spacing.button_padding}->16px 32px
Min height
52px
Typography
body
Buttons nav dark
OverviewFeaturesDocs
Base Attributes
Background
#262626
Text
#FFFFFF
Border
0
Radius
{tokens.radii.button}->999px
Padding
10px 24px
Min height
44px
Typography
control
Cards locked media
Feature Card
Component preview content
Base Attributes
Background
#F1F1F1
Text
#FFFFFF
Border
0
Radius
{tokens.radii.media}->8px
Padding
0
Shadow
{tokens.shadows.soft}->0 8px 24px rgba(0, 0, 0, 0.14)
Treatment
blurred image with lock overlay
Cards editorial
Feature Card
Component preview content
Base Attributes
Background
#2D2D2D
Text
#F8F8F8
Border
0
Radius
{tokens.radii.card}->24px
Padding
20px
Shadow
none
Lists faq row
Base Attributes
Background
#F1F1F1
Text
#00B92B
Border
0
Radius
{tokens.radii.accordion}->12px
Padding
28px 36px
Min height
86px
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not make the hero subtle.
- -Do not use muted green as the primary CTA.
- -Do not replace creator media with generic illustrations.
- -Do not over-round media cards into cute bubbles.