Communication / iOS / Android / Web

Tumblr

Tumblr keeps its navy night sky and white post cards, then lets a loud color set and user-picked palettes supply the personality.

Download
  • #001935
  • #00B8FF
  • #FFFFFF
  • #7C5CFF
  • #FF8A00
  • #FF4930
  • #E8D738
  • #FF62CE

Color

Every color token in the file, grouped by role.

Brand

  • primary#00B8FF
  • on primary#000000
  • ink secondary#99A3AE
  • content secondary#4C5E72
  • dark ink secondary#999999

Surfaces

  • canvas#001935
  • surface#FFFFFF
  • dark canvas#0D0D0D
  • dark surface#1A1A1A

Text

  • ink#FFFFFF
  • content ink#000000
  • pink#FF62CE
  • dark ink#FFFFFF

More

  • panel#0D243F
  • red#FF4930
  • orange#FF8A00
  • yellow#E8D738
  • green#00CF35
  • purple#7C5CFF

Typography

Each style is set with the file's own family, size, weight and spacing.

  • FavoritFavorit is private and not available in open fonts. Shown in DM Sans, the closest open match.
  • Favorit ModernFavorit Modern is private and not available in open fonts. Shown in DM Sans, the closest open match.
  • headline26px / 400 / 34px

    Pack my box with five dozen liquor jugs

  • title21px / 700 / 25.2px

    Pack my box with five dozen liquor jugs

  • nav16px / 500 / 24px

    The quick brown fox jumps over the lazy dog

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button14px / 500 / 20px

    Continue to checkout

Shape

Corner radius tokens.

  • radius 33px
  • radius 44px
  • radius 88px
  • radius 1616px
  • full9999px

Spacing

The spacing scale, drawn to size.

  • space 88px
  • space 1010px
  • space 1616px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • post
    post
  • side panel
    side-panel
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 89 lines
version: alpha
name: Tumblr-design-analysis
description: "A blogging and social network on deep navy #001935 chrome, with white post cards, electric blue accent #00b8ff, a loud seven color set, Favorit type and full pills, plus user-selectable palettes."
status: Draft
appVersion: "measured in a browser from tumblr.com, 2026-11-01"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#00b8ff"
  on-primary: "#000000"
  canvas: "#001935"
  surface: "#ffffff"
  panel: "#0d243f"
  ink: "#ffffff"
  ink-secondary: "#99a3ae"
  content-ink: "#000000"
  content-secondary: "#4c5e72"
  red: "#ff4930"
  orange: "#ff8a00"
  yellow: "#e8d738"
  green: "#00cf35"
  purple: "#7c5cff"
  pink: "#ff62ce"
  dark-canvas: "#0d0d0d"
  dark-surface: "#1a1a1a"
  dark-ink: "#ffffff"
  dark-ink-secondary: "#999999"

typography:
  # Font note: "Favorit" is a private font and is not available in open fonts. Closest open alternative: "DM Sans".
  # Font note: "Favorit Modern" is a private font and is not available in open fonts. Closest open alternative: "DM Sans".
  headline:
    fontFamily: "Favorit, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 34px
  title:
    fontFamily: "Favorit, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 21px
    fontWeight: 700
    lineHeight: 25.2px
  nav:
    fontFamily: "Favorit, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
  body:
    fontFamily: "Favorit, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "'Favorit Modern', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px

rounded:
  radius-3: 3px
  radius-4: 4px
  radius-8: 8px
  radius-16: 16px
  full: 9999px

spacing:
  space-8: 8px
  space-10: 10px
  space-16: 16px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    height: 40px
    padding: 10px 16px
  post:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.content-ink}"
    typography: "{typography.body}"
  side-panel:
    backgroundColor: "{colors.panel}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.radius-8}"
    width: 320px

Overview

Tumblr is a blogging and social network on the web and in iOS and Android apps. Explore is public, so its real interface can be measured logged out. Its token names split the interface into chrome (navy around the page) and content (white posts). [Measured]

What defines the look:

  1. Navy chrome. #001935 surrounds the feed. [Measured]
  2. White posts. Content sits in white cards with black text. [Measured]
  3. Electric blue. #00b8ff with black text is the accent. [Measured]
  4. A loud color set. Red, orange, yellow, green, purple and pink are named colors. [Measured]
  5. Changeable palettes. A Change palette control sits in the page. [Observed]

Source for this file: the Explore and trending pages, measured in a browser at 1440 and 390 wide on 2026-11-01 with a dark color scheme pass, plus the chrome and content tokens on the root element. Sponsored items were excluded. No app captures were used. See Known Gaps.

Core

Colors

RoleValueToken name in the shipped set
Chrome#001935, panel #0d243fchrome, chrome panel [Measured]
Chrome text#ffffff, #99a3ae, #667586chrome fg steps [Measured]
Accent#00b8ff, hover #33c6ff, pressed #66d4ff, text #000000accent [Measured]
Content#ffffff, text #000000, #4c5e72content panel, content fg [Measured]
Color setred #ff4930, orange #ff8a00, yellow #e8d738, green #00cf35, purple #7c5cff, pink #ff62cenamed colors [Measured]
Tintsaccent at 10, 20 and 30 percent, chrome white at 5, 10 and 15 percent[Measured]
Darkchrome #0d0d0d, content #1a1a1a, text #ffffff, #999999system dark pass [Measured]

Typography

RoleSizeFace and weight
Post title26 on 34Favorit 400 [Measured]
Section21 on 25.2Favorit 700 [Measured]
Nav16 on 24Favorit 500 [Measured]
Mobile tab18 on 24Favorit 700 [Measured]
Button14 on 20Favorit Modern 500 [Measured]

Shape and spacing

Buttons full, the Trending Blogs panel 8, small parts 3 and 4. Radii of 8 and 16 are common, but post corners were not identified. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

A navy default, a dark version on the dark pass, and a user palette control. The other palettes were not measured. [Measured]

Platform: iOS

How the Tumblr app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

Not measured. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the navy chrome, white content and electric blue accent with the web. [Inferred]

Platform: Android

How the Tumblr app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

Not measured. [Inferred]

Main action

Expected on Android: Floating action button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the navy chrome, white content and electric blue accent with the web. [Inferred]

Platform: Web

Explore and trending, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

Text tabs (Explore, Communities and more) 41 high, active white and idle #99a3ae. At the mobile width tabs are 52 high in 18px bold with an Open app button. [Measured]

Main action

Expected on Web: Page-level button.

Sign up is a #00b8ff pill with black 14px text, 40 high with 10 by 16 padding. Log in is a white 5 percent tint. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Search is a 40 high field with #99a3ae text. Post actions are 40 high pills with #4c5e72 text. [Measured]

Text sizing

Expected on Web: Browser zoom.

Fixed pixels. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 40 high and tabs 41 to 52. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Explore is public. Posting needs an account. Other rules were not checked. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

Tabs grow from 41 to 52 high at the mobile width. [Measured]

Cross-platform consistency

Consistent across platforms: the navy chrome, white content and electric blue accent. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Keep navy chrome around white content.
  • Use black text on electric blue.
  • Treat the color set as loud and playful.
  • Design for user-selected palettes through role tokens.

Don't

  • Don't use white text on #00b8ff.
  • Don't hard-code colors outside the chrome and content roles.
  • Don't square off main buttons.

Known Gaps

  • The dashboard, composer and blogs behind sign-in were not measured.
  • The iOS and Android apps were not captured, so every mobile topic is inferred.
  • Other palettes from Change palette were not measured.
  • Icons, motion and dialogs were not measured.
  • Favorit and Favorit Modern are private. DM Sans is within 1 percent at 26px. Favorit Modern was not compared separately and takes the same alternative.
  • Account deletion and store sign-in rules were not verified.