--- 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 | Role | Value | Token name in the shipped set | |------|-------|-------------------------------| | Chrome | `#001935`, panel `#0d243f` | chrome, chrome panel [Measured] | | Chrome text | `#ffffff`, `#99a3ae`, `#667586` | chrome fg steps [Measured] | | Accent | `#00b8ff`, hover `#33c6ff`, pressed `#66d4ff`, text `#000000` | accent [Measured] | | Content | `#ffffff`, text `#000000`, `#4c5e72` | content panel, content fg [Measured] | | Color set | red `#ff4930`, orange `#ff8a00`, yellow `#e8d738`, green `#00cf35`, purple `#7c5cff`, pink `#ff62ce` | named colors [Measured] | | Tints | accent at 10, 20 and 30 percent, chrome white at 5, 10 and 15 percent | [Measured] | | Dark | chrome `#0d0d0d`, content `#1a1a1a`, text `#ffffff`, `#999999` | system dark pass [Measured] | ### Typography | Role | Size | Face and weight | |------|------|-----------------| | Post title | 26 on 34 | Favorit 400 [Measured] | | Section | 21 on 25.2 | Favorit 700 [Measured] | | Nav | 16 on 24 | Favorit 500 [Measured] | | Mobile tab | 18 on 24 | Favorit 700 [Measured] | | Button | 14 on 20 | Favorit 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.