What is Tumblr's primary brand color?

Tumblr's load-bearing accent is cyan — `#00b8ff`, wired to `--brand-blue`, `--accent`, `--color-primary-link`, and `--chrome-ui-focus`. It appears 23 times across the captured page: as the Sign-up pill CTA fill, as the link color inside post-card bodies, and as the focus-ring on the email input in the welcome modal. The chrome's load-bearing tone is actually the navy `#001935` (which appears in 30+ CSS variables including `--chrome`, `--top-menu`, and `--content-tint`); the cyan is reserved for action signals.

What typography does Tumblr use, and what should I substitute?

Tumblr uses two Favorit faces — Favorit for body and reading copy (193 occurrences at 16/24 weight 400), and Favorit Modern for UI labels, buttons, and metadata (51 occurrences at 12/18 weight 500). The h1 hero (`Trending`) renders Favorit at 26px weight 400 with 34px leading — no display weight, no negative tracking, the lightest hero treatment a social network ships. If Favorit isn't licensed, Inter is the closest open substitute; pair it with system-ui fallbacks the page already declares (`'Helvetica Neue', HelveticaNeue, Helvetica, Arial`). Preserve the weight-400 hero — do not bump to weight 600 the way most dark social brands do.

How does Tumblr's rainbow brand palette work?

Tumblr exposes a documented `--color-rainbow-0` through `--color-rainbow-10` register: cyan `#00b8ff`, green `#01cf35`, yellow `#e8d73a`, orange `#ff8a00`, red `#ff4930`, pink `#ff61ce`, and purple `#7c5cff`. Each color also has 19 tint/shade aliases (`--color-blue-tint-10` through `--color-blue-tint-95`, etc.) for surface, hover, and pressed variants. The rainbow itself is used scarcely — most colors appear only 1-2 times on chrome — but the register is wired across hundreds of CSS variables so the in-product features (tag chips, post-type badges, reaction icons) can pull any color without going off-system. Treat the rainbow as available, not decorative.

What does Tumblr's shape vocabulary look like?

Four radii do the entire job: pill (`9999px`, 239 occurrences) for every button and chip, `16px` (173) for post-cards and the welcome modal, `8px` (119) for inline chips and badges, `4px` (45) for the smallest pre-pill atoms. The Sign-up CTA renders pill at 40px tall with 10/16 padding. Post-cards render at 16px on `#ffffff`. The 4px and 8px tiers handle stacked metadata: post-type badges, reblog counters, tag chips. The page never goes flat (sharp corners) on any interactive element.

Why does Tumblr stack a dark chrome under a light feed?

The architectural decision pulls double duty: the navy chrome (`#001935`, exposed as `--chrome`, `--top-menu`, `--side-menu`, `--content-tint`, `--overlay-tint`) is the application shell — top-nav, login modal scrim, side rails — while the post-feed itself is a column of white `#ffffff` cards that read like the fragment-of-a-magazine the platform's content actually is. The dark frame stays out of the way of GIFs, photography, and long-form text; the bright feed is where the imagery lives. Discord and Pinterest reverse this (dark hero with light-only content, or all-light); Tumblr is one of the few mainstream social brands committing to dark-frame + light-feed as the default.

Can I use this DESIGN.md to build a Tumblr-style React project?

Yes — drop the file into Claude, Cursor, or any AI tool that reads structured design tokens and the agent reproduces Tumblr's specific split: navy chrome, floating white post-cards, cyan pill CTA, rainbow tag register used scarcely, Favorit / Favorit Modern dual-typeface system. Or reference tokens directly when building social/blogging surfaces — `{colors.chrome}` resolves to `#001935`, `{colors.accent}` to `#00b8ff`, `{rounded.full}` to `9999px`, `{rounded.card}` to `16px`. The 17 component recipes cover the logged-out marketing chrome and the dashboard feed shell, not the in-product post composer or settings panes.

Tumblr Design System

Tumblr's design system as a DESIGN.md file.

About Tumblr DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source tumblr.com

Social & Community

Tumblr's logged-out home page is two surfaces stacked on the same screen. The outer chrome is a deep navy ("#001935", wired to `--chrome`, `--top-menu`, `--side-menu`, and `--content-tint`) holding a sticky login modal in white at the top of the viewport, and beneath that a scrolling dashboard feed of light "#ffffff" post-cards — gifs, fan-art, text quotes, fandom screenshots — each at a 16px corner radius with #4c5e72 secondary text and #000000 titles. Where most social marketing pages reserve the dark band for a single hero, Tumblr commits its entire chrome to dark and lets the post imagery carry every warm tone on the page. The single chromatic CTA is cyan ("#00b8ff", `--brand-blue` / `--accent`), shaped as a fully-rounded pill at 40px tall — every button on every surface inherits that geometry.

This page packages the system as a single Google Labs DESIGN.md file. Inside: 22 color tokens grouped into chrome (navy register), content (post-card register), brand (the documented rainbow), and structural neutrals; 9 Favorit typography levels covering 26px hero down to "12px" caption Favorit Modern; a 5-step radius scale where pill ("9999px") and card ("16px") carry 412 of the page's 613 rounded surfaces; an 8-step spacing scale tuned to the "4 / 6 / 8 / 12 / 16" rhythm the extractor pulls straight from CSS variables; and 17 component recipes covering the cyan pill CTA, the dark top-nav, the floating login modal, the post-card variants, the rainbow tag chip, and the borderless text input the welcome modal uses.

Feed the file to Claude, Cursor, or GitHub Copilot and the model produces React components that match Tumblr's specific split — the dark navy chrome, the floating white post-card feed, the cyan pill CTA, the rainbow tag register used scarcely — rather than a generic dark social theme. Or reference the tokens directly: every hex is quoted, every component recipe paste-ready for Tailwind config or CSS custom properties. The system is worth studying because it inverts the typical social-app rule that the brand color is the load-bearing tone; here the navy carries the page, and the cyan is allowed to be small.

What makes it distinct

Two-tier canvas systemnavy
Single-accent pill CTAcyan
Documented rainbow registerseven explicit `--color-rainbow-N` brand hexes wired up as CSS vars, used scarcely (counts of 1-2) for tag chips and badges
Dual-Favorit typeface splitFavorit for reading body at 16/24, Favorit Modern at weight 500 for buttons and 12/18 labels
Pill-everywhere geometry9999px radius appears 239 times, 16px card radius 173 times, 8px chip radius 119 times; the 4 / 8 / 16 / pill scale is the entire shape vocabulary

Live at tumblr.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

tumblr.com

Explore Tumblr

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Tumblr design system FAQ

Common questions about Tumblr's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Tumblr — official site

Microblogging and social-blogging platform for fandom, GIFs, art, and long-form posts.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Tumblr in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→