Conversation shell / brand system
Dark community chrome, pale blue-gray text, oversized pill actions, and bright commercial modules that still read as a social product.
Dense but readable: strong title, cool metadata, compact actions, and media embedded inside the conversation.
01 / Colors
Orange owns intent, blue owns utility, and plum/mint/sun stay contained inside promo modules.
Primary CTA and core brand cue.
Pressed state and upvote energy.
Utility action state.
Links and product navigation accents.
Main dark shell for the feed.
Conversation cards and modules.
Nested controls and sub-panels.
High-emphasis text on dark UI.
Low-glare reading color.
Distinct vote opposition signal.
Promo banner tile.
Editorial stat block.
02 / Typography
Display moments are loud and blocky. UI language stays dense, weighty, and practical.
Big internet energy
Reach people ready to talk
Community questions, useful answers, and dense editorial modules
Popular communities
Ad performance summary
Hot post
Longer support or marketing copy opens slightly, but still feels straightforward rather than polished.
Body text on Reddit is functional and comfortable, especially on dark surfaces with cooler gray copy.
COMMUNITY / SORT / GEO / VIEW
12 members online right now
--color-brand-gradient-default: linear-gradient(180deg,#D93900,#AE2C00);
03 / Buttons
Oversized capsule buttons handle big moments; smaller pills handle feed behavior and discovery.
04 / Cards & Surfaces
Dark product containers and lighter business-editorial cards keep the split personality visible.
Dark container for title, body, media, and actions.
Mist surface for testimonials and campaign metrics.
Bright branded block for standout stats.
High-contrast black card for bold claims.
Selective business-card lift, not core product chrome.
Cooler technical contrast, still recognizably Reddit.
05 / Brand-Specific Product Patterns
These mini mockups are the proof: subreddit discovery, voting, threaded comments, help search, and ad storytelling.
Cooler gray copy keeps long threads readable on dark surfaces.
Hierarchy comes from indent and spacing, not heavy decoration.
Commercial modules break out with contained high-chroma storytelling cards.
06 / Forms
Product controls stay dark and framed, while help/docs search can flip to a bright capsule field.
Dark fill, faint border.
Focus uses cooler product blue, not orange.
Keep sort controls compact.
Destructive feedback uses the darker system error tone.
Long-form fields stay plain and readable.
Keep surrounding chrome restrained.
07 / Spacing
Small operational steps inside the product, larger jumps for bands and storytelling.
08 / Radius
Dark cards use soft corners; search and action controls push all the way to capsules.
09 / Elevation
Core product surfaces are flat. Broad soft lift appears only on selected business-stat cards.
Depth comes from contrast, spacing, and containment.
Feed modules rely on borders and tone shifts, not stacked shadows.
Exact extracted business-card shadow on a light surface.
10 / Extracted Component Tokens
The visual preview still exposes the core token layer in developer-readable form.
:root {
--brand-primary: #FF4500;
--brand-ink: #EEF1F3;
--brand-body: #B7CAD4;
--brand-muted: #8BA2AD;
--brand-canvas: #0E1113;
--brand-surface: #181C1F;
--brand-surface-alt: #21272A;
--brand-border: #FFFFFF33;
--brand-border-strong: #FFFFFF7F;
--brand-link: #648EFC;
--brand-accent: #115BCA;
--brand-upvote: #D93900;
--brand-downvote: #6A5CFF;
--brand-mint: #00E2B7;
--brand-plum: #D3168B;
--brand-sun: #FFBF0B;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 20px;
--radius-xl: 32px;
--radius-pill: 9999px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-section: 64px;
--shadow-stat: 0px 5px 30px 5px rgba(0,0,0,0.06);
}
Build with the system
This is not a generic like button. The stacked vote mechanic defines the product silhouette.