Overview
Build a system that feels media-savvy, personal, and unmistakably creator-economy. A creator-economy system built from warm photography, charcoal stages, high-voltage yellow typography, and white arrow pills.
Colin & Samir
Colin and Samir are YouTube creators and podcasters that break down the latest in the Creator Economy from a creator's perspective.
3.0
5
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Colin & Samir Home design analysis
Build a system that feels media-savvy, personal, and unmistakably creator-economy. A creator-economy system built from warm photography, charcoal stages, high-voltage yellow typography, and white arrow pills.
Image Direction
Use warm creator portraits, behind-the-scenes studio shots, and dark content panels that feel like productized media offers.
Colors
Yellow is the loudest accent, but white pills and white copy must still carry the reading structure. The dark charcoal stage should stay dominant once the photo hero ends.
Typography
Use a bold clean sans that can scale from giant program names to tight promotional copy. This system should sound broadcast-ready, not luxury or formal.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Creator Broadcast Contrast
A creator-economy system built from warm photography, charcoal stages, high-voltage yellow typography, and white arrow pills.
bold, personable, and broadcast-ready
Primary mode: darkcreator media marketingmedia-brand
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
bold, personable, and broadcast-ready
Density
4
Variance
4
Motion
2
Signals
warm photo hero · charcoal stage · electric yellow text · white CTA pills with yellow arrow discs
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Studio Yellow
#F6E921
Broadcast Black
#1F1F22
Hero White
#FFFFFF
Warm Photo Brown
#5E3A22
Panel Charcoal
#232327
Line Gray
#36363A
Creator Blue
#4154E1
Usage rules
Yellow is loud and must stay attached to hero highlights, large type, and arrow discs.
Most reading happens on charcoal or dark gray, with white copy holding the structure together.
White pills should punctuate actions and remain brighter than the surrounding dark cards.
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
broadcast headline voice
Body
Inter
straightforward creator support voice
Mono
IBM Plex Mono
small support label voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4.8rem/—
Display
H2
2.5rem/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Let the bold sans headline system carry the media-brand confidence. · Use huge yellow type selectively for section anchors and channel naming. · Body copy should stay compact and easy to skim.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
160ms-220ms
Easing
cubic-bezier(.22,.8,.2,1)
Spring
stiffness 95, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 160ms-220ms |
easing | cubic-bezier(.22,.8,.2,1) |
spring | stiffness 95, damping 18 |
Layout Principles
Lead with warm editorial photography, then pivot into charcoal information stages and bright yellow signposts.
Keep large program names and creator offerings legible from a distance.
Use repeated CTA pills to make each content product feel tangible and clickable.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#FFFFFF
Text
#1F1F22
Border
1px solid #FFFFFF
Radius
999px
Padding
12px 20px
Min height
44px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
#4154E1
Text
#FFFFFF
Border
1px solid #4154E1
Radius
999px
Padding
12px 20px
Min height
44px
Shadow
none
Typography
body
Cards promo
Feature Card
Component preview content
Base Attributes
Background
#232327
Text
#FFFFFF
Border
1px solid #36363A
Radius
20px
Padding
24px
Shadow
none
Cards photo overlay
Feature Card
Component preview content
Base Attributes
Background
#232327
Text
#FFFFFF
Border
none
Radius
20px
Padding
24px
Shadow
0 16px 32px rgba(0,0,0,0.24)
Navigation item
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#FFFFFF
Active text
#FFFFFF
Item padding
0px
Item radius
0px
Badges arrow disc
Base Attributes
Background
#F6E921
Text
#1F1F22
Border
1px solid #F6E921
Radius
999px
Padding
10px 10px
Shadow
none
Inputs field
Base Attributes
Background
#232327
Text
#FFFFFF
Border
1px solid #36363A
Radius
999px
Padding
12px 16px
Min height
44px
Placeholder
rgba(255,255,255,0.45)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Media types
- -editorial photography
- -program card
- -charcoal content stage
Subject patterns
- -creator portraits, behind-the-scenes studio images, and dark media cards with bright yellow accents
Composition logic
- -Let photography establish personality before the dark productized content blocks appear.
- -Use large yellow section names as wayfinding across the dark stage.
Treatment rules
- -Keep CTA shells white with dark text and yellow arrow anchors.
- -Use blue only in secondary community actions.
Generation cues
- -creator media brand, charcoal cards, electric yellow section text, white pill CTA
Avoid
- -No low-contrast gray text on charcoal cards.
- -No soft beige lifestyle palette.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not replace the white CTA pills with yellow full pills.
- -Do not let yellow become the body text color on white surfaces.
- -Do not flatten the warm editorial photography into generic stock crops.