Tumblr Design System

Overview

Tumblr's logged-out home page is one of the few mainstream social surfaces that commits its entire chrome to dark and lets the content cards carry every warm tone. The outer frame is navy ("#001935", wired through --chrome, --top-menu, --side-menu, --content-tint, and --overlay-tint), with a sticky white login modal floating at the top of the viewport and a scrolling feed of light "#ffffff" post-cards beneath it — gifs, fan-art quotes, fandom screenshots, reblog chains — each at a 16px corner radius with #4c5e72 secondary text. Where most social marketing chrome opens with a hero band and stacks the feed below, Tumblr presents the feed as the hero — the dashboard preview is the pitch.

Two-tier canvas: the navy chrome carries the application shell (nav, scrim, side-rail) while the white post-cards carry the content. This is not a single dark canvas with brighter sections — it is two distinct surfaces, each with its own type color, its own button geometry, and its own role. The cyan accent ("#00b8ff", --brand-blue / --accent / --color-primary-link) lives in exactly two roles across both surfaces: the Sign-up pill CTA in the welcome modal, and the inline-link color inside post-card bodies. The brand voltage is small on purpose; the dual-canvas figure-ground does the page's heavy lifting.

Rainbow as register, not accent: Tumblr exposes seven brand hexes (#00b8ff, #7c5cff, #e8d73a, #ff8a00, #ff4930, #ff61ce, #01cf35) wired through --color-rainbow-0 through --color-rainbow-10 and 19 tint/shade aliases per color. The rainbow is documented but used scarcely — most colors appear only 1-2 times on the captured chrome — which means the system is built to host high-chroma in-product features (tag chips, post-type badges, reaction icons) without those features falling off-system.

Key Characteristics:

• Navy "#001935" application chrome with white "#ffffff" post-cards floating as the content surface — the two-tier canvas is the load-bearing visual decision
• Single-accent cyan "#00b8ff" reserved for the Sign-up pill CTA and inline links — nothing else on chrome carries chroma
• Documented rainbow register (cyan, purple "#7c5cff", yellow "#e8d73a", orange "#ff8a00", red "#ff4930", pink "#ff61ce", green "#01cf35") wired across 100+ CSS variables for in-product feature color
• Dual-Favorit typeface split — Favorit for reading body and the 26px weight-400 hero, Favorit Modern at weight 500 for UI labels and the pill CTA
• Pill-first shape geometry: "9999px" radius on every button, "16px" on cards and modals, "8px" on chips, "4px" on the smallest atoms
• Light hero treatment — the h1 (Trending) renders Favorit at 26px weight 400, the lightest hero weight a major social brand ships
• Welcome-modal-as-hero pattern: a 16px-radius white card pinned to the top of the dark feed, not a banner above the feed

Colors

The palette divides into chrome (navy register), content (post-card register), and brand (the documented rainbow). Quoted hex on every token because YAML treats unquoted #000 as a comment.

• Navy chrome (#001935) — frequency 10. Used as background (6), gradient (4). The load-bearing application surface; wired to --chrome, --top-menu, --side-menu, --content-tint, --overlay-tint. Every dark surface on the captured page resolves to this one hex.
• Chrome panel (#0d243f) — frequency 2. Used as background (2). Slightly elevated navy for --chrome-panel; the next step up the navy register before flipping to a content surface.
• Ink (#000000) — frequency 3429. Used as text (1710), border (1708), background (10). The dominant text color on white post-cards and the border tone for every hairline; wired through 30+ CSS variables.
• Body (#4c5e72) — frequency 1238. Used as text (619), border (619). The post-card secondary text and metadata color (--content-fg-secondary, --color-navy-70); the workhorse non-headline tone on every white card.
• Canvas (#ffffff) — frequency 402. Used as text (182), background (32), border (182), gradient (6). The post-card surface and the welcome-modal fill; appears in 50+ CSS variables across --content-fg, --chrome-fg, and the white-tint scale.
• Body soft (#99a3ae) — frequency 108. Used as text (49), background (10), border (49). The placeholder and tertiary-metadata tone (--content-fg-tertiary, --color-navy-40); appears on the email-input placeholder and the smallest post-card timestamps.
• Accent (#00b8ff) — frequency 23. Used as text (11), background (1), border (10), shadow (1). Reserved for the Sign-up pill CTA, inline link color, and focus-ring; wired through --brand-blue, --accent, --color-primary-link, --chrome-ui-focus, and 25+ tint aliases. The system's only chrome chroma.
• Brand purple (#7c5cff) — frequency 2. Used as background (2). The --color-rainbow-10 slot; --brand-purple, --education. Scoped to in-product features.
• Brand yellow (#e8d73a) — frequency 2. Used as background (2). The --color-rainbow-3 slot; --brand-yellow. Reserved for premium / highlight features in-product.
• Brand orange (#ff8a00) — frequency 2. Used as background (2). The --color-rainbow-4 slot; --brand-orange. Reserved for in-product feature accents.
• Brand red (#ff4930) — frequency 2. Used as background (2). The --color-rainbow-6 slot; doubles as --danger. The error / destructive register.
• Brand pink (#ff61ce) — frequency 2. Used as background (2). The --color-rainbow-8 slot; --brand-pink. Reserved for in-product feature accents.
• Brand green (#01cf35) — frequency 1. Used as background (1). The --color-rainbow-1 slot; doubles as --success. The success / live register.
• Hairline (#e7e6e7) — frequency 2. Used as border (1), gradient (1). The post-card divider hex (--color-gray-10); the only neutral border tone on white surfaces.
• Rainbow lilac (#cab7d8) — frequency 1. Used as gradient (1). An in-product feature gradient stop; not wired to a stable CSS variable.

Typography

Tumblr runs two Favorit faces — Favorit for reading copy and Favorit Modern for UI labels. The split is mechanical: any text the reader scans (post body, hero heading, link copy) takes Favorit; any text the reader operates (buttons, tag chips, metadata) takes Favorit Modern at weight 500. Where most fintech and consumer brands push hero weight to 600-800, Tumblr renders its h1 (Trending) in Favorit at 26px weight 400 with 34px leading — the lightest hero weight in this category. The display tier doesn't exist as a separate face; there is no Favorit Display, no condensed variant, no italic register on the captured chrome.

Body-md (16/24 weight 400) is the dominant reading tier — 193 occurrences on the captured page, used inside post-cards, the welcome modal copy, and the side-rail descriptions. Body-strong (16/24 weight 700) carries post titles and emphasis (10 occurrences). Label-sm (Favorit Modern 12/18 weight 500) carries every metadata atom — post bylines, tag chips, timestamp text — at 51 occurrences. Button-md (Favorit Modern 14/20 weight 500) is the single button typography. If Favorit isn't licensed, Inter at the same sizes is the closest open substitute; preserve the weight-500 ceiling on UI labels — do not bump button text to weight 600 the way most dark social brands do.

Layout

The page is a single scrolling column at the captured 1440px width: a sticky welcome modal ({rounded.card} 16px, white surface) pinned to the upper portion of the viewport, then a one-column dashboard feed of white post-cards beneath it on the navy chrome. The post-cards are not edge-to-edge — they sit inside a center column with the navy showing as a vertical gutter on both sides at desktop. Each card carries 16px internal padding, separated vertically by a consistent gap; the rhythm reads at "12 / 16 / 24" based on the extracted spacing register where 16px (35 occurrences), 12px (21), and 24px each carry the section-break work.

The chrome has a top-nav band at the very top (56px tall, navy fill, white type) and a left-side rail (extracted at 280px wide) carrying the welcome modal CTA. Side-rail and feed share the same navy ground; the only horizontal boundary between them is the cyan accent dot on the active nav item. Mobile breakpoints collapse the side rail into a drawer; the feed itself stays a single column at every viewport size.

Elevation & Depth

Tumblr's depth system is figure-ground, not shadow. White post-cards on a navy chrome read as elevated without any cast shadow — the contrast difference (#ffffff over #001935) does the entire job. The captured page contains exactly one shadow color (#000000 at 1 occurrence) and zero blurred shadows on post-cards or buttons. The welcome modal carries a soft 1px navy hairline (--chrome-panel-border) but otherwise floats by virtue of canvas inversion: dark-on-light surfaces beneath, light-on-dark surfaces above.

The overlay scrim that backs the login modal on mobile is the navy chrome at 0.7 opacity — same hex as the application chrome, just turned semi-transparent. There is no separate scrim color, no dimmer overlay, no glass blur. Unlike the convention of layering shadow + hairline + tint to signal depth, Tumblr commits to one move: switch the canvas color, let the contrast carry.

Shapes

Four radii cover the entire system. Pill (9999px) is the dominant shape (239 occurrences) — every button, every chip, every pill-shaped tag inherits this geometry. Card (16px, 173 occurrences) is the post-card and modal radius. Chip (8px, 119 occurrences) handles inline reaction badges and post-type badges. Micro (4px, 45 occurrences) is the smallest atom radius — counter pills, status dots, the inner indicator on the active-nav cyan dot.

There is no sharp-cornered interactive element anywhere on the captured chrome. The system never goes flat (0px) on a button, a chip, or a card; the only 0px surfaces are dividers and the hero-heading text block. The 4 / 8 / 16 / pill scale is the entire vocabulary — there is no 12px middle radius, no 24px step before the pill, no 32px large-card register that Pinterest or Discord introduce.

Components

Each recipe references declared tokens; component states (-hover, -pressed) only override what changes from the base.

• button-primary — cyan "#00b8ff" fill, ink "#000000" text, button-md typography (Favorit Modern 14/20 weight 500), pill 9999px, padding 10/16, height 40px. The Sign-up CTA.
• button-primary-hover — same fill, opacity "0.85".
• button-secondary — white canvas fill, ink text, button-md typography, pill, same height and padding as primary. The "Use email" button inside the welcome modal.
• button-ghost — transparent fill, white-on-chrome text, button-md typography, pill. Used for the chrome-nav action buttons.
• top-nav — navy "#001935" chrome fill, white text, body-strong typography, no radius, 56px tall, 16px horizontal padding. Sticky to the viewport top.
• side-nav — same navy chrome, white text, label-md typography, no radius, 12/16 internal padding per row.
• login-modal — white canvas fill, ink text, body-lg typography, 16px card radius, 24px padding. The floating welcome card pinned to the top of the feed.
• post-card — white canvas fill, ink text, body-lg typography, 16px radius, 16px padding. The dashboard-feed atom.
• post-card-title — heading-md (Favorit 18/24 weight 700) on ink. Inherits the post-card fill.
• post-card-byline — label-sm (Favorit Modern 12/18 weight 500) on body "#4c5e72". The byline and reblog-count rail beneath the title.
• text-input — white canvas fill, body-soft "#99a3ae" placeholder, label-md typography, no radius (extractor reports 0px), 8px padding, 40px tall. The email input inside the welcome modal.
• tag-chip — hairline "#e7e6e7" fill, ink text, label-sm typography, pill radius, padding 2/6. The smallest interactive surface.
• reaction-badge — white fill, ink text, label-sm typography, 8px radius, padding 4/6. Reblog and like counter pill on each post-card.
• link-inline — accent "#00b8ff" text, body-lg typography. The inline-link tone inside post bodies.
• divider — hairline fill, 1px tall. Internal post-card dividers between the body and the reaction rail.
• overlay-scrim — navy chrome at 0.7 opacity. Backs the welcome modal on mobile.
• hero-heading — ink text, display-md typography (Favorit 26/34 weight 400). The Trending h1 above the feed.

Do's and Don'ts

Do keep the cyan accent scarce — three on-page surfaces (Sign-up CTA fill, inline links, focus ring) is the system's discipline. The brand voltage is small on purpose.

Do treat the rainbow register (#7c5cff, #e8d73a, #ff8a00, #ff4930, #ff61ce, #01cf35) as available for in-product features — tag chips, post-type badges, reaction icons — and out-of-scope for chrome.

Do render every button as a pill (9999px) at 40px tall with 10/16 padding. The page contains zero square-cornered or 12px-radius buttons.

Don't bump the hero heading to weight 600 or 700. Tumblr ships the h1 in Favorit weight 400 — pushing it heavier flips the page's voice from social-blog to fintech.

Don't use #001935 as a card background. It is the chrome surface only; cards always invert to #ffffff. The two-tier canvas is the system's signature move and collapsing it breaks the figure-ground that carries every depth cue.

Don't apply box-shadow to post-cards. The captured page contains exactly one shadow occurrence and zero cast shadows on cards or buttons; depth comes from the canvas inversion (white card over navy chrome), not from blur.

Don't use #4c5e72 for primary body text on white surfaces. It is the secondary text tone (post bylines, metadata, reblog counters); primary post-titles and reading copy land on #000000.

Don't introduce a third radius between 8px and 16px. The shape vocabulary is 4 / 8 / 16 / pill — adding a 12px intermediate breaks the chip-vs-card distinction the system relies on.

Known Gaps

• Authenticated dashboard chrome — the captured surfaces are the logged-out marketing home and trending feed; the in-product post composer, settings panes, message inbox, and tumblr-blog layout are out of scope.
• Mobile screenshots — desktop 1440px only; mobile responsive behavior is inferred from the documented breakpoint stack and the side-rail-to-drawer pattern.
• Hover and pressed states — most interactive states (post-card hover, button pressed, tag-chip selected) are inferred from the tint/shade CSS variable register, not directly captured.
• Post composer typography — the rich-text editor, the GIF picker, and the post-type tabs (text / photo / quote / link / chat / audio / video) carry their own component recipes not represented here.
• Theme system — Tumblr historically supported user-installed blog themes with full CSS override; this DESIGN.md captures only the default chrome and dashboard.
• Dark/light theme toggle — the chrome is presented as dark-default; the system does ship a light-mode variant inside the app shell, not captured here.