A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
7type steps
2radius steps
3pxspacing base
Reddit, in one page
Reddit's iOS app is a card-based community reader organized around the single most recognizable interactive control in consumer tech: the upvote/downvote column. Every post in a feed — whether from r/aww, r/AskReddit, or r/programming — is laid out the same way: a horizontal card with the vote arrow stack on the left (up arrow, karma number, down arrow), a subreddit avatar + "r/subredditname", a post title, optional media preview, and a row of actions (comments count, share, save, more). The consistency of this unit is the brand. A Reddit power user can scan 50 cards in 20 seconds because every card is structurally identical.
Reddit's color system is a two-pole light-mode vs dark-mode pair stitched together by the Reddit Orange-Red (#FF4500) — the single brand accent seen in the app logo, subreddit pill tints, and (historically) the upvote hover. The functional accent work, though, is done by a smaller palette: Upvote Orange (#FF8717) on active upvotes, Downvote Blue-Purple (#7193FF light / #9494FF dark) on active downvotes, and a grayscale for dormant votes. This is a meaningful chromatic decision: orange + blue-purple are complementary, they read semantically (warmth vs coolness) for approve vs disapprove, and they NEVER both light up at once because a user can only vote one way.
The mood is information-density-first. Reddit is a reading and scrolling app — people spend minutes in a thread, not seconds — so the app tolerates high-density cards with small type (14pt body, 12pt metadata) and uses ample white space ONLY inside cards (16pt internal padding), not between them. Newer Reddit iOS adds media-first card variants — photo-dominant, video-autoplaying — but the bone structure (vote column + meta + title + actions) stays. Subreddit customization is a signature feature: each community can set its own accent color (the "subreddit color"), its own banner image, its own sidebar rules, so a thread in r/AnimalCrossing looks cozy green and a thread in r/programming looks cool steel.
Key Characteristics:
- Reddit Orange-Red (
#FF4500) as the brand color — logo, subreddit pill accent, rare CTAs - Vote column on every post/comment — up arrow, karma number, down arrow in a vertical stack
- Upvote orange (
#FF8717) and downvote blue-purple (#7193FF) as complementary semantic pair - Card-first feed UI — every post is a self-contained card with avatar + title + preview + actions
- Subreddit avatars as circular icons — and subreddit accent color customization per community
- Flair pills (rectangular 4pt-radius chips) for post tags — per-subreddit styled
- Comment thread indentation lines — thin vertical rules on the leading edge of nested replies
- Snoo (the alien mascot) as the fallback avatar and Empty State character
- Chat Channels with real-time chat — a newer feature with Discord-like group messaging
- Media-first post variants — full-bleed image cards, video autoplay with mute toggle
- Light mode (
#F6F7F8new /#DAE0E6old) and dark mode (#1A1A1Bcanvas,#272729cards) - Reddit Sans (custom font, 2023+) with Noto Sans and SF Pro fallbacks
Do's and don'ts
Do
- Use
#FF4500(Reddit Orange-Red) as the single brand accent — logo, key CTAs - Use the semantic vote pair:
#FF8717upvote orange and#7193FFdownvote blue-purple - Show the vote column on EVERY post and comment — it's the brand
- Keep cards flat — use corner radius (16pt in card view, 0pt in classic) not shadows
- Render Markdown inline: bold, italic, quote, code, link
- Support subreddit accent color customization — the Join button should tint to community color
- Use circular subreddit avatars —
r/subredditnamepill next to avatar - Indent comment replies 10pt per level with a 2pt vertical rule on the leading edge
- Use Reddit Sans (fallback Noto Sans, then SF Pro) at 14pt body / 18pt title / 12pt meta
- Offer both card view (16pt corners) and classic view (0pt full-bleed) as a user preference
Don't
- Don't flip the semantic vote colors — upvote MUST be warm (orange) and downvote cool (blue-purple)
- Don't put the vote column anywhere other than left of post content (or below media in media-first)
- Don't use drop shadows on post cards — Reddit is flat
- Don't skip the subreddit
r/namepill — every post must identify its community - Don't use brand red
#FF4500for the upvote — that's#FF8717orange - Don't use blue
#0079D3as an accent — that's the LINK color, not the brand color - Don't round subreddit avatars to anything other than circles
- Don't compress the metadata row —
r/subreddit • timestamp • commentsshould be readable - Don't use Discord-style role colors for usernames — Reddit keeps usernames neutral
- Don't animate vote state changes too aggressively — a subtle bounce + color swap is enough
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Reddit design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Reddit Orange-Red: #ff4500
- Reddit Red: #ff585b
- Orange-Red Pressed: #cc3700
- Upvote Orange: #ff8717
- Upvote Orange (Dark Mode): #ffaa66
- Downvote Blue-Purple (Light): #7193ff
- Downvote Blue-Purple (Dark): #9494ff
- Vote Arrow Inactive: #878a8c
- Canvas (New): #f6f7f8
- Canvas (Classic): #dae0e6
Type:
- families: Reddit Sans, Noto Sans, SF Pro Text, SF Pro Display
- scale: 11, 12, 13, 14, 17, 18, 24
- weights: 400, 500, 600, 700
Shape:
- radius: 0, 20
Spacing: 3, 8, 12
Rules:
- Use `#FF4500` (Reddit Orange-Red) as the single brand accent — logo, key CTAs
- Use the semantic vote pair: `#FF8717` upvote orange and `#7193FF` downvote blue-purple
- Show the vote column on EVERY post and comment — it's the brand
- Keep cards flat — use corner radius (16pt in card view, 0pt in classic) not shadows
- Render Markdown inline: bold, italic, quote, code, link
- Support subreddit accent color customization — the Join button should tint to community color
Avoid:
- Don't flip the semantic vote colors — upvote MUST be warm (orange) and downvote cool (blue-purple)
- Don't put the vote column anywhere other than left of post content (or below media in media-first)
- Don't use drop shadows on post cards — Reddit is flat
- Don't skip the subreddit `r/name` pill — every post must identify its community
- Don't use brand red `#FF4500` for the upvote — that's `#FF8717` orange
- Don't use blue `#0079D3` as an accent — that's the LINK color, not the brand color
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary Brand
- Reddit Orange-Red (
#FF4500): The single brand accent — logo, primary CTA pill, subreddit pill accent, occasional button. - Reddit Red (
#FF585B): Alerts, destructive banners, "community removed" warnings. - Orange-Red Pressed (
#CC3700): Pressed state for primary CTAs.
Vote Colors (The Semantic Pair)
- Upvote Orange (
#FF8717): Active upvote — slightly yellower than Reddit Red, intentionally distinct from the brand red. - Upvote Orange (Dark Mode) (
#FFAA66): Lighter variant for dark mode contrast. - Downvote Blue-Purple (Light) (
#7193FF): Active downvote — indigo-adjacent, cold. - Downvote Blue-Purple (Dark) (
#9494FF): Lighter variant for dark mode. - Vote Arrow Inactive (
#878A8Clight /#818384dark): Gray dormant state.
Canvas & Surfaces (Light Mode)
- Canvas (New) (
#F6F7F8): Default light canvas — a cool very-light gray. - Canvas (Classic) (
#DAE0E6): The "old Reddit" blue-tinged light canvas, still used in some contexts. - Card Surface (
#FFFFFF): Post cards and comment threads sit on white. - Surface 2 (
#F2F3F5): Hovered/pressed card state. - Divider (
#EDEFF1): Hairline between cards, between comments. - Subreddit Banner Placeholder (
#0079D3): Default blue tint if no custom banner.
Canvas & Surfaces (Dark Mode)
- Canvas (Dark) (
#1A1A1B): Primary dark canvas. - Card Surface (Dark) (
#272729): Post cards and comment threads. - Surface 2 (Dark) (
#343536): Hovered / pressed card state, input backgrounds. - Divider (Dark) (
#343536): Dark-mode separator. - Chat Surface (Dark) (
#161617): Slightly darker than canvas for chat screens.
Text
- Text Primary (Light) (
#1A1A1B): Post titles, body text. - Text Secondary (Light) (
#7C7C7C): Metadata — "2h ago", "r/subreddit • 125 comments". - Text Tertiary (Light) (
#AFAFAF): Placeholder, disabled. - Text Primary (Dark) (
#D7DADC): Dark-mode primary. - Text Secondary (Dark) (
#818384): Dark-mode metadata. - Text Link (
#0079D3): Hyperlinks in comments and post body.
Subreddit Accent Colors
Each subreddit can set its own "accent color" — seen on the join button, the sidebar, and the banner tint. This is configurable per-community, commonly:
- Default (
#0079D3), Gaming (#24A0ED), AskReddit (#FF4500), Memes (#A5A4A4), etc.
Semantic
- Success Green (
#46D160): Successful actions. - Warning Yellow (
#FFB000): Warning banners. - Error Red (
#FF585B): Error messages. - Gold Award (
#FFB000): Gold Award badge (Reddit removed in 2023 but still in historical data). - Silver Award (
#C7C7C7): Silver Award badge. - Reddit Premium (
#FFD635): Premium subscriber badge, Reddit Gold era. - NSFW Tag (
#F3B200pill with black text): "NSFW" post flair. - Spoiler Tag (
#000000pill with white text): "SPOILER" flair.
Type scaleRead the full spec
Font Family
- Primary (2023+):
Reddit Sans(proprietary, released 2023) — a humanist sans with gentle curves, designed for long reading sessions. Has Regular, Medium, SemiBold, Bold, Black. - Secondary (Fallback):
Noto Sans— used for non-Latin scripts. - Tertiary (Fallback):
SF Pro Text/SF Pro Display— iOS native fallback. - Monospace:
Reddit Mono(2023+) for code blocks; fallbackSF Mono. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Noto Sans', Helvetica, Arial, sans-serif
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Large Title | Reddit Sans | 24pt | 700 | 1.2 | -0.3pt | "Home", "Popular", subreddit name on detail |
| Post Title | Reddit Sans | 18pt | 600 | 1.25 | -0.2pt | The post title card headline |
| Body Text | Reddit Sans | 14pt | 400 | 1.5 | -0.1pt | Post body, comment body |
| Comment Body | Reddit Sans | 14pt | 400 | 1.5 | -0.1pt | Same as body (comments are first-class) |
| Metadata | Reddit Sans | 12pt | 400 | 1.3 | 0pt | "r/subreddit • 2h ago • 125 comments" |
| Karma (Vote Column) | Reddit Sans | 12pt | 700 | 1.0 | 0pt | The number between up/down arrows |
| Subreddit Pill | Reddit Sans | 12pt | 600 | 1.0 | 0pt | "r/AnimalCrossing" pill |
| Flair Pill | Reddit Sans | 11pt | 600 | 1.0 | 0.2pt | Per-subreddit colored flair tags |
| Username | Reddit Sans | 12pt | 500 | 1.2 | 0pt | "u/username" in comments |
| Button (Primary) | Reddit Sans | 14pt | 600 | 1.0 | 0pt | "Join", "Continue" |
| Tab Label | Reddit Sans | 11pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Nav Title | Reddit Sans | 17pt | 600 | 1.2 | -0.2pt | Top nav bar title |
| Section Header | Reddit Sans | 13pt | 700 | 1.2 | 0.5pt | "COMMUNITY INFO" tracked uppercase |
| Code (Mono) | Reddit Mono | 13pt | 400 | 1.5 | 0pt | Inline + block code in comments |
Principles
- 14pt is the workhorse: Post body, comments, replies all at 14pt regular. This is tuned for long-form reading in a chat-like density.
- 12pt for metadata: Timestamps, subreddit pills, comment context all at 12pt — small but scannable.
- 18pt for post title is the hero — big enough to catch attention on a card, small enough to fit multi-line titles.
- Dynamic Type respected: Body text and post titles scale; vote-column karma number, tab labels, and flair pills are fixed for layout.
- Username hierarchy: "u/username" in 12pt weight 500 — not as prominent as subreddit
r/pills, because Reddit is community-first, not user-first. - Markdown rendering: Post and comment bodies render full Markdown —
bold,*italic*,~~strike~~,> quote,[link](url), `
Components and layoutRead the full spec
Buttons
Primary Pill (Join / Continue)
- Shape: Pill, 24pt corner radius (or 500pt for full-capsule)
- Background:
#FF4500for universal primary; subreddit-accent color for community-specific CTA - Text: white, Reddit Sans 14pt weight 600
- Padding: 8pt vertical, 20pt horizontal
- Pressed: darker shade + scale 0.97
- Used for: "Join" (subreddit), "Continue", "Create Post"
Secondary Outline
- Background: transparent
- Text: subreddit accent color (or
#1A1A1B/#D7DADCdefault) - Border: 1pt solid
#EDEFF1(light) or#343536(dark) - Pressed: background
#F2F3F5/#343536 - Used for: "Joined" (after joining), "Follow"
Subreddit Join Button
- Same as primary pill, but tinted in the subreddit's custom accent color
- When joined, shifts to outline style with "Joined" text
- Icon prefix:
+(not joined) orcheckmark(joined)
Vote Arrow (The Signature Button)
- Two stacked icons with a karma number between them
- Arrow icon: upward/downward chevron, 18pt
- Default (inactive):
#878A8C/#818384 - Active up:
#FF8717(orange) - Active down:
#7193FF/#9494FF(blue-purple) - Hit target: 36pt × 36pt per arrow
- Tap: immediate state change + soft haptic + brief scale bounce (1.0 → 1.2 → 1.0)
- Karma number: Reddit Sans 12pt weight 700, center-aligned between arrows, color matches active vote state (orange/blue-purple/gray)
Icon Actions (Comments, Share, Save, More)
- Size: 18pt icon + optional count
- Layout: horizontal row below post content
- Default:
#878A8C/#818384 - Active (saved):
#FFB000gold - Tap hit area: 44pt
Cards & Containers
Post Card (The Signature Component) A self-contained post as a card with structured sections.
- Background:
#FFFFFFlight /#272729dark - Corner radius: 0pt (old Reddit style) or 16pt (new card style — user preference toggle)
- Padding: 12pt internal
- Structure (TOP to BOTTOM): 1. Header row (10pt height): subreddit avatar (20pt circular) +
r/subredditpill +•+ timestamp +•+ optional "Pinned" or "Crosspost" tag 2. Title row: post title in Reddit Sans 18pt weight 600,#1A1A1B/#D7DADC, up to 3-line clamp 3. Flair row (optional): horizontal row of pill tags, 11pt weight 600 4. Preview row (optional): image, video, gallery, link card, or text preview 5. Action row (32pt height): Vote arrow column + karma (left) + comments count + share + save + more (right side) - Between cards: 8pt gap with canvas color showing through
- Tap: slight background tint (
#F2F3F5/#343536) + navigate to detail
Post Card — Media-First Variant For image/video-dominant posts, the media takes the top 60% of the card with title + vote column overlaid or below:
- Image: full-width, up to 16:9 or 1:1 aspect
- 16pt radius on corners (when cards enabled); 0pt when classic view
- Title below image in 18pt weight 600
- Vote column at bottom-left; actions bottom-right
Comment
- Leading indentation line: 2pt
#EDEFF1/#343536vertical bar,Int × 10ptfrom leading edge (each reply level indents 10pt) - Structure: avatar (optional, 20pt circular) + username +
•+ timestamp +•+ karma (if not hidden) — then body text - Body: 14pt weight 400, line-height 1.5
- Trailing actions: reply, vote arrows, share, more (ghost/muted icons)
- Collapse indicator:
[-]or[+]at leading edge to toggle thread collapse
Subreddit Banner (Detail Screen)
- Full-width banner image OR solid color matching subreddit accent
- Height: 120-180pt
- Subreddit avatar: circular 72pt, overlapping the bottom of banner by 36pt, white 3pt border
- Below: subreddit name (Reddit Sans 22pt weight 700), member count (12pt
#7C7C7C) - Trailing "Join/Joined" button at top-right of banner
Chat Channel Card
- Newer Reddit feature — group chat rooms
- Similar card layout to posts but with "Live" badge if active
- Member count + "chatting now" indicator
Navigation
Bottom Tab Bar
- Height: 49pt + safe area
- Background:
#FFFFFF(light) /#1A1A1B(dark) — solid, no blur - Tabs: Home, Communities, Create (center, with
+FAB-style), Chat, Inbox - Active color:
#FF4500(brand red) or#D7DADC(neutral — varies) - Inactive:
#878A8C/#818384 - Labels: Reddit Sans 11pt weight 500
- Badge: red
#FF585Bcircle with white count
Top Nav (Feed)
- Height: 44pt + safe area
- Leading: profile avatar (28pt circular)
- Center: subreddit name or "Home" / "Popular" / "All" switcher (tap to open sheet)
- Trailing: search + sort + more
- Background:
#FFFFFFlight /#1A1A1Bdark with bottom 1pt divider
Top Nav (Subreddit Detail)
- Transparent over banner image when scrolled to top
- Collapses to solid surface with subreddit name + back chevron on scroll
- Trailing: Join button + search + more
Input Fields
Compose (Create Post)
- Full-screen modal
- Subreddit picker at top (pill with
r/pickmeplaceholder) - Title input: 18pt weight 600 placeholder "Title"
- Body input: 14pt regular placeholder "body (optional)"
- Formatting toolbar: Bold, Italic, Link, Quote, Code, List (flat icons, 20pt)
- Attach row: Photo/Video, Poll, Link, GIF
- Submit button:
#FF4500pill "Post" in top-right nav
Search Bar
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Vote column collapses to 32pt; title clamp 2 lines |
| iPhone 13/14/15 | 390pt | Standard 44pt vote column; 3-line title clamp |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in nav |
| iPhone 15/16 Pro Max | 430pt | Standard layout with slightly wider cards |
| iPad | 768pt+ | Two-column feed in landscape |
Dynamic Type
- Post title, body, comment body: respect Dynamic Type
- Karma number, tab labels, flair pills, vote arrow icons: fixed size
- Timestamp / metadata: respects Dynamic Type but capped at 14pt
Orientation
- Feed, thread, chat: portrait-locked on iPhone (except video posts in landscape)
- Image / video viewer: rotates to landscape
- iPad: all orientations; feed becomes 2-column in landscape
Touch Targets
- Vote arrows: 36pt × 36pt each, stacked
- Card tap: full card surface
- Action row icons: 44pt hit area
- Subreddit pill tap: hit area expands around pill
- Comment collapse arrow: 32pt hit area
Safe Area Handling
- Top: nav bar respects safe area; transparent over banner scrolls into solid
- Bottom: tab bar respects home indicator; chat compose bar floats above safe area
- Sides: 16pt content insets
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-reddit {--page-bg: #f6f7f8;
--page-bg-gradient: none;
--text-color: #000000;
--heading-color: #000000;
--link-color: #c33400;
--link-hover-color: #902600;
--border-color: #cacbcb;
--card-bg: #f6f7f8;
--card-shadow: 0 1px 2px rgba(0,0,0,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
--header-bg: #000000;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #f6f7f8;
--footer-text-color: #565657;
--button-bg: #ff4500;
--button-text-color: #000000;
--button-hover-bg: #cc3700;
--button-border: none;
--button-border-radius: 20px;
--button-secondary-bg: #e7e8e9;
--button-secondary-text-color: #000000;
--button-secondary-hover-bg: #d8d9da;
--button-secondary-border: 1px solid #cacbcb;
--prompt-bg: #eaebec;
--prompt-text-color: #000000;
--base-font: var(--font-helvetica);
--heading-font: var(--font-mono);
--card-border-radius: 20px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/social/reddit/DESIGN.md· 27.2 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.