Tumblr DESIGN.md

1. Visual Theme & Atmosphere

Tumblr's iOS app is a deep-navy canvas built for an endlessly scrolling dashboard of expressive, multi-format posts. The signature background is a rich midnight blue (#001935) — not black, not gray, a saturated navy that feels like the inside of a zine printed on dark stock. Posts sit on slightly lighter navy surfaces (#001020 and #0B2A45) so the dashboard reads as a stack of cards floating in blue space. The atmosphere is intentionally moody and creative: this is a place for GIFs, fan art, text essays, and reblog chains, and the dark navy lets full-bleed imagery and animated GIFs glow without UI competing for attention.

The accent system is unusually multi-chromatic for a social app — Tumblr leans into its playful, anti-corporate identity with three accents: Tumblr Blue (#00B8FF) for primary actions, links, and the active tab; a punchy green (#00CF35) for follow/confirm and notes-positive states; and a hot pink-red (#FF4930) for the like heart and its burst animation. This trio is deliberate brand personality — Tumblr has never been monochrome-minimal, and the colors signal "expressive, irreverent, yours." The single most distinctive interaction is the like: tapping the heart triggers a confetti-like heart-burst that scatters tiny hearts outward, a beloved micro-moment of Tumblr delight.

Typography is the system font (San Francisco) mapped to an Inter/Helvetica fallback, used cleanly so the content — long text posts, quotes, photo sets, GIF reblogs — carries the expression. The structurally distinctive component is the reblog chain: a thread of indented, attributed blocks where each reblogger's commentary stacks beneath the original, with the source blog name in blue at the top of each segment and a left rule indenting the quoted ancestry. The tag bar (a row of #tags under each post) and the notes-count row ("1,204 notes") are first-class Tumblr metadata. The whole system says: deep, moody, expressive, and built for remix culture.

Key Characteristics:

• Deep-navy canvas (#001935) with darker navy surfaces — a midnight zine, not black
• Three accents: Blue #00B8FF (actions/links), Green #00CF35 (follow/notes), Pink-red #FF4930 (like)
• Heart-burst on like — scattered confetti hearts, the signature delight moment
• Reblog chain — indented, attributed commentary blocks stacked with a left rule
• Tag bar (#tags) and notes-count row as first-class post metadata
• Multi-format dashboard: text, photo, GIF, quote, link, audio, video posts
• "Radar" / recommended widget surfacing a featured post
• System font (Inter/Helvetica fallback), clean so content expresses
• Bottom tabs (Home / Search / New post-center / Activity / Account), dark default

2. Color Palette & Roles

Primary

• Tumblr Blue (#00B8FF): Primary CTA, links, active tab, reblog-source blog name, the "+" new-post FAB.
• Blue Pressed (#0090CC): Active/pressed state for blue CTAs.
• Tumblr Green (#00CF35): Follow button, confirm/success, positive notes accent.
• Tumblr Pink-Red (#FF4930): The like heart, the heart-burst confetti, liked-state.

Canvas & Surfaces (Dark — the default)

• Navy Canvas (#001935): The signature deep-navy dashboard background.
• Surface 1 (#001020): Lowest surface — nav bars, deep wells, the darker navy.
• Surface 2 (#0B2A45): Post cards, elevated rows, the card the dashboard stacks.
• Surface 3 (#13395B): Pressed states, hover-equivalent, input fields.
• Divider (#36465D): Hairline separators, reblog-chain left rule.
• Text Primary (#FFFFFF): Post body, blog names, headlines.
• Text Secondary (#8A9AAE): Timestamps, notes counts, metadata, reblog "via".
• Text Tertiary (#5C6B80): Disabled labels, low-emphasis hints.

Semantic

• Like Pink-Red (#FF4930): Like heart active + burst (same as accent pink-red).
• Notes Green (#00CF35): Positive notes / new-activity accent.
• Error Red (#FF4930): Destructive confirms reuse the pink-red.
• Warning Amber (#FFB300): Mature-content / flagged-post labels.
• Link Blue (#00B8FF): In-body links and @mentions (same as accent blue).

Light Mode (Limited Use)

Tumblr offers a light theme, but the iOS default and the brand-defining experience is the deep navy. A light variant exists for users who choose it.

• Light Canvas (#FFFFFF)
• Light Surface (#F4F6F8)
• Light Text (#001935)

3. Typography Rules

Font Family

• Primary: SF Pro Text / SF Pro Display (system) on iOS
• Cross-platform parity: Inter, then Helvetica Neue
• Fallback Stack: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif
• Quote / serif posts: an optional serif (Georgia) for quote-type posts — Tumblr renders quotes with editorial weight

Hierarchy

Principles

• Long-form friendly: 16pt body at 1.5 line height — Tumblr text posts can be essays
• Quote posts get editorial weight: 26pt, optionally serif — quotes are a first-class post type
• Weight at 400 / 600 / 700: regular body, semibold notes/meta, bold names/buttons
• Blue is the link/source color: reblog-source blog names and in-body links are #00B8FF
• Clean type, expressive content: the system font stays neutral so GIFs/art/essays carry the voice

4. Component Stylings

Buttons

Primary Button ("Post" / "Reblog")

• Background: #00B8FF
• Text: #001935 (dark navy text on bright blue for contrast)
• Padding: 12pt vertical, 24pt horizontal
• Corner radius: 6pt (Tumblr uses tight, slightly-soft rectangles)
• Font: SF Pro Text 16pt weight 700
• Pressed: #0090CC, scale 0.98

Follow Button

• Background: transparent
• Text: #00CF35
• Border: 1.5pt solid #00CF35
• Padding: 8pt vertical, 18pt horizontal
• Corner radius: 6pt
• Active "Following": filled #00CF35 with #001935 text
• Pressed: background #13395B

New Post FAB (Center Tab)

• Shape: Circle, 52pt, raised in the center of the tab bar
• Background: #00B8FF
• Icon: SF Symbol plus 24pt in #001935
• Shadow: rgba(0,184,255,0.35) 0 6px 18px
• Pressed: scale 0.94, #0090CC, soft haptic; opens the post-type picker (text/photo/quote/link/chat/audio/video)

Post Action Icons (Reply / Reblog / Like / Share)

• Size: 22pt glyph, 44pt hit area
• Default: #8A9AAE
• Reblog active: #00CF35 (green)
• Like active: #FF4930 (pink-red) + heart-burst
• Spacing: evenly distributed across the post footer; notes count leading-left

Cards & Containers

Dashboard Post Card (THE core unit)

• Background: #0B2A45 on the #001935 navy canvas
• Corner radius: 8pt; full content width with 8pt horizontal margins (near edge-to-edge)
• Margin: 8pt between cards (navy shows as a thin gutter)
• Header: 36pt rounded-square avatar (6pt radius) → blog name (16pt w700) → trailing follow + ⋯
• Body: format-dependent —
  • Text: 16pt w400, 1.5 line height
  • Photo/GIF: full-bleed media, 0pt radius inside the card top, no letterboxing
  • Quote: 26pt editorial (optionally serif) + "— source" attribution
  • Link: a preview block (thumbnail + title + domain) with 6pt radius
• Tag bar: a wrapping row of #tags (14pt w400 #8A9AAE, tap → blue)
• Footer: notes count (13pt w600) on the left, then Reply · Reblog · Like · Share on the right
• The whole card is a single tappable surface; pressed state lifts to #13395B

Reblog Chain (the signature)

• A vertical stack of attributed segments inside the post body
• Each segment: blue source blog name (14pt w700 #00B8FF) at top, then that blogger's commentary (15pt w400)
• Each ancestor level is indented with a 2pt #36465D left rule and ~12pt left padding (deeper = older)
• The newest commentary sits at the bottom, unindented; the original post is the deepest-indented block
• Tapping a source name opens that blog

Notes Sheet

• Bottom sheet listing likes/reblogs/replies, each row: avatar + blog name + action glyph (green reblog, pink like)
• Tabbed: "All" / "Comments" / "Reblogs" / "Likes"

Radar / Recommended Widget

• An inset card between dashboard posts: "Radar" label + a single featured post preview + "Why you're seeing this"
• Slightly brighter #13395B background to distinguish from organic posts

Profile / Blog Header

• Customizable header image (blogs are themeable) full-width, 140pt
• Avatar 64pt rounded-square (8pt radius), 4pt navy ring
• Blog title 20pt w700 + bio
• "Follow" green primary + message + ⋯
• Post-count / following stat line

Navigation

Bottom Tab Bar

• Height: 52pt + safe area
• Background: #001020 (deep navy, opaque) with a 0.5pt #36465D top hairline
• Tabs: Home, Search, New post (center raised FAB), Activity, Account
• Icon size: 26pt
• Active: #00B8FF; Inactive: #8A9AAE
• Labels: SF Pro Text 10pt w600 (often icon-only)
• Activity tab shows a pink-red unread dot badge

Top Nav (Dashboard)

• Height: 48pt + safe area
• Left: Tumblr wordmark / "t" logomark (white), 24pt
• Right: messaging (22pt) + settings (22pt)
• Sits on navy; subtle hairline on scroll

Input Fields

Search Field

• Background: #13395B with no border
• Height: 40pt, corner radius 6pt
• Leading magnifyingglass 16pt #8A9AAE
• Placeholder: "Search Tumblr", 15pt w400 #8A9AAE
• Focus: 1.5pt #00B8FF ring

Post Composer

• Navy sheet (#001020), format-aware editor (text body, photo grid, quote field, link URL)
• Tag input row at the bottom: type #tag chips, each becomes a pill
• "Post now / Schedule / Draft / Private" options
• Audience: public blog vs. a secondary/private blog selector

Distinctive Components

Heart-Burst Like

• Tapping the like heart fills it #FF4930 and emits 6–10 tiny hearts that scatter outward and fade over ~600ms — the iconic Tumblr delight; double-tap on media also triggers it with a centered burst
• Paired with a light impact haptic; the notes count increments

Reblog Chain

• The defining Tumblr structure: indented, attributed commentary stacked with a left rule — remix culture made into a component

Tag Bar

• The wrapping #tag row under posts — taps route to the tag feed; tags turn blue on press; first-class discovery metadata

Radar Widget

• The "Radar" recommended-post inset — a brighter card surfacing one featured post from across Tumblr

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 52
• Standard margin: 8pt horizontal (cards are near edge-to-edge on the navy gutter)
• Card rhythm: 8pt gap between dashboard posts

Grid & Container

• Content width: full device width, 8pt card margins, media full-bleed inside cards
• Photoset grid: 2–3 column mosaic inside a post, 2pt gaps
• Reblog chain: progressive 12pt left indentation per ancestor level

Whitespace Philosophy

• Content-dense, edge-to-edge media: GIFs and photosets bleed to the card edges — minimal chrome around imagery
• Long-form breathing: text posts get 1.5 line height for essay readability
• Cards float on navy: the thin 8pt navy gutter separates stacked post cards

Border Radius Scale

• Square (0pt): Full-bleed media inside a card
• Soft (6pt): Buttons, link-preview blocks, avatars (rounded-square), search field
• Card (8pt): Dashboard post cards, larger avatars
• Comfortable (14–16pt): Bottom sheets, modals
• Circle (50%): The center New-post FAB, like-burst hearts, some inline avatars
• Note: Tumblr avatars are rounded-squares (6–8pt), matching its blog-tile heritage

6. Depth & Elevation

Shadow Philosophy: On the deep navy, shadows are dark and soft but subtle — cards separate mostly through surface-tone steps (#001935 → #0B2A45 → #13395B) rather than heavy drop shadows. The brighter Radar inset uses tone, not elevation, to stand apart. The two real elevations are the blue center FAB and modal sheets. The most memorable "motion-as-depth" is the like burst — additive pink hearts that pop above the content layer.

Motion

• Heart-burst: heart fills #FF4930, 6–10 small hearts scatter outward on randomized vectors and fade/scale-down over ~600ms; light haptic; notes count rolls
• Reblog: icon turns #00CF35 with a quick 1.0 → 1.15 → 1.0 bounce, success haptic
• Double-tap media: centered large heart pop + burst over the image
• FAB press: scale 0.94, #0090CC, soft haptic; post-type picker rises 0.3s ease-out
• Tag press: tag flashes to #00B8FF then routes to the tag feed with a 0.25s push
• Pull-to-refresh: a playful custom spinner (Tumblr has historically used branded refresh art); fall back to system spinner

7. Do's and Don'ts

Do

• Use deep navy #001935 as the canvas with #0B2A45 post cards — a midnight zine, not black
• Use all three accents with intent: Blue #00B8FF actions/links, Green #00CF35 follow/notes, Pink-red #FF4930 like
• Make the like a confetti heart-burst — it's Tumblr's signature delight
• Render reblogs as an indented, attributed chain with a left rule and blue source names
• Show the tag bar and notes count as first-class post metadata
• Let media (GIFs, photosets) bleed full-width inside cards with no letterboxing
• Use rounded-square avatars (6–8pt) — Tumblr's blog-tile heritage
• Support quote posts with editorial 26pt (optionally serif) weight

Don't

• Don't use pure black or gray as the canvas — the saturated navy is the identity
• Don't flatten to a single accent — the blue/green/pink trio is Tumblr's personality
• Don't make the like a static toggle — the heart-burst is essential
• Don't collapse reblog ancestry into a quote blob — the indented chain is the structure
• Don't letterbox or heavily pad GIFs/photosets — media goes edge-to-edge in the card
• Don't make avatars circular — rounded-squares match the blog-tile lineage
• Don't over-chrome the dashboard — content (art, GIFs, essays) is the voice
• Don't drop the tag bar — tags are core Tumblr discovery

8. Responsive Behavior

Device Sizes

Dynamic Type

• Post body, blog names, quote posts: full scale (long-form — honor it)
• Notes count, timestamps, tags: scale modestly
• Tab labels: fixed 10pt
• Reblog source names: scale modestly, fixed minimum 14pt

Orientation

• Dashboard / Blog: portrait and landscape (iPad masonry)
• Media lightbox / GIF viewer: rotates to landscape for wide media
• Composer: portrait-locked on iPhone

Touch Targets

• Post action icons: 22pt glyph, 44pt hit area
• Center New-post FAB: 52pt
• Tab icons: 26pt glyph, 44pt effective hit
• Tags: each #tag minimum 32pt tappable height with hit-slop

Safe Area Handling

• Top: wordmark and dashboard sit below safe area / Dynamic Island
• Bottom: tab bar (with raised center FAB) respects the home indicator; sheets dock above it
• Sides: 8pt card margins; media full-bleed within cards

9. Agent Prompt Guide

Quick Color Reference

• Navy canvas: #001935
• Surface 1 (nav/wells): #001020
• Surface 2 (cards): #0B2A45
• Surface 3 (pressed/inputs): #13395B
• Divider / chain rule: #36465D
• Text primary: #FFFFFF
• Text secondary: #8A9AAE
• Tumblr Blue (action/link): #00B8FF
• Blue pressed: #0090CC
• Tumblr Green (follow/notes): #00CF35
• Tumblr Pink-Red (like/burst): #FF4930

Example Component Prompts

• "Create a SwiftUI Tumblr dashboard post card: #0B2A45 card on a #001935 navy canvas, 8pt corner radius, 8pt gutter. Header: 36pt rounded-square avatar (6pt radius), blog name 'wanderlust-archive' in SF Pro 16pt weight 700, trailing green outline 'Follow' + ⋯. Full-bleed GIF media at the card top (0pt radius, no letterboxing). A wrapping tag bar of #tags 14pt #8A9AAE. Footer: '1,204 notes' 13pt weight 600 on the left, then Reply · Reblog · Like · Share 22pt on the right."
• "Build the Tumblr like heart-burst: tapping a 22pt heart fills it #FF4930 and emits 8 small hearts that scatter outward on randomized vectors, scaling down and fading over ~600ms, with a light impact haptic and the notes count rolling up by one. Double-tapping media triggers a centered large heart-pop with the same burst."
• "Design a Tumblr reblog chain: a vertical stack of attributed segments inside the post body; each segment shows the source blog name in #00B8FF 14pt weight 700 at the top, then that blogger's commentary 15pt weight 400. Each ancestor level is indented with a 2pt #36465D left rule and 12pt left padding (deeper = older); the newest commentary is unindented at the bottom."
• "Create the Tumblr center New-post FAB: a 52pt #00B8FF circle raised into the center of the bottom tab bar, SF Symbol plus 24pt in #001935, shadow rgba(0,184,255,0.35) 0 6px 18px. Pressed: scale 0.94, #0090CC, soft haptic; opens a post-type picker (text / photo / quote / link / chat / audio / video)."
• "Build a Tumblr quote post: editorial 26pt weight 700 (optionally a serif like Georgia) quoted text on a #0B2A45 card, an em-dash attribution '— Source' in 14pt #8A9AAE, then the tag bar and the notes/actions footer."

Iteration Guide

1. Canvas is deep navy #001935; cards step up through #0B2A45 → #13395B — never black or gray
2. Use the full accent trio: Blue #00B8FF actions/links, Green #00CF35 follow/notes, Pink-red #FF4930 like
3. The like is a confetti heart-burst — it is Tumblr's signature; never a static toggle
4. Reblogs are an indented, attributed chain with a left rule and blue source names
5. Media (GIFs, photosets) bleeds full-width inside cards — no letterboxing or heavy padding
6. Tag bar + notes count are first-class metadata under every post
7. Avatars are rounded-squares (6–8pt) — the blog-tile heritage; quote posts get 26pt editorial weight
8. Dark navy is the default; a light theme exists but the brand experience is the midnight dashboard