Fitbit Design System

Overview

Fitbit's captured marketing surface reveals the full consequence of Google's 2021 acquisition. Material Absorption. The fitbit.com domain now routes purchase flows through Google Store infrastructure, and the page typography, palette, and layout conventions are those of Google's Material Design ecosystem rather than Fitbit's pre-acquisition teal-and-orange fitness brand. Google Sans Display at 60px / weight 700 with -2px letter-spacing is the hero h1; Google Sans Flex at 16px handles navigation and list items; standard Google Sans at 14px manages secondary labels. The canvas is a near-white off-white consistent with Material's surface-container token, and the text is a very-dark-navy slate consistent with Material's on-surface token.

The surface is a utility layout — a region and language selection tool with flag icons, country names, and language sub-labels organized into three geographic columns (Americas, Asia Pacific, Europe). Where Apple's region-selection pages maintain full brand marketing fidelity and Samsung's maintain heavy product photography, this Google-routed Fitbit page shows minimal brand chrome: a 'G' wordmark in the top-left, a circular account avatar in the top-right, and the utility content at full width. There is no Fitbit logo visible in the captured surface. The brand has been absorbed into the Google Store vessel.

Key Characteristics:

• Google Sans family across all three captured typography tiers — Display variant (60px / 700), Flex variant (40px / 500 and 16px / 400), standard variant (14px / 400 and 700).
• Very-dark-navy ink ({colors.ink} — #191c1d) as the primary text tone, consistent with Material Design's on-surface convention.
• Near-white canvas ({colors.canvas} — #f9f9f9) rather than pure white, consistent with Material's surface-container convention.
• A standard Google-blue link tone ({colors.link} — #1967d2) as the only chromatic element — appearing in two country-list link instances.
• Tight -2px letter-spacing on the 60px display head — the tightest display tracking of any Google Sans usage in the directory.
• Three-column geographic grid: Americas (left), Asia Pacific (center), Europe (right) — each column listing countries with flag icons and language sub-labels.
• Flat Material illustration in the hero band: three illustrated figures around a globe, in Google's flat geometric illustration style.

Colors

Text

• Ink ({colors.ink} — #191c1d): frequency 423 (211 text, 211 border, 1 shadow) — the dominant text and structural color. Wired as a merged value from two very-dark-navy values within the same Material on-surface range. Used for all headline text, body text, country names, and border rules.
• Ink Soft ({colors.ink-soft} — #3c4043): frequency 12 (6 text, 6 border) — secondary text tone for language sub-labels under country names (e.g., "English" under "United States"). A mid-slate that lifts slightly from the primary ink.
• Link ({colors.link} — #1967d2): frequency 4 (2 text, 2 border) — the standard Google blue used for interactive link text. The only chromatic element on the page.
• Shadow ({colors.shadow} — #000000): frequency 2 — used for minimal shadow on interactive elements at very low opacity.

Surface

• Canvas ({colors.canvas} — #f9f9f9): frequency 4 as background — the page floor. A very-light off-white, consistent with Material's surface-container token. Warmer than pure white, cooler than cream. The only rendered background fill on the captured page.

Typography

Font Family

The system runs three members of the Google Sans family — all sharing geometric humanist proportions, differentiated by subfamily:

• Google Sans Display — the high-tracking, tight-set display subfamily for the hero h1. At 60px / 700 / -2px tracking, this is Google's most assertive typographic moment.
• Google Sans Flex — the variable-axis member of the family, used for navigation labels, country list items, and the 40px section heading tier.
• Google Sans — the standard member, used for 14px body spans and secondary labels. Fallbacks to Roboto, Arial, sans-serif.

Hierarchy

Principles

The display tier at 60px / 700 is the heaviest weight in this system — an outlier versus the typical Material convention of weight 500 for display. The tight -2px tracking at 60px is Google Sans Display's signature: the letters compress to feel like a single dense block rather than individually-spaced glyphs. Below the display, every other tier runs at 400-500 with normal tracking. The system has a sharp two-tier weight structure: 700 for the hero, 400-500 for everything else.

Note on Font Substitutes

Google Sans is proprietary. Nunito Sans at weight 700 approximates the 60px display tier's proportions. DM Sans or Plus Jakarta Sans at weight 400 substitute for the body and navigation tiers. The -2px letter-spacing is more important to preserve than the exact typeface — it defines the display character regardless of which geometric humanist is used.

Layout

Spacing System

• Base unit: 8px.
• Tokens: {spacing.xs} 8px · {spacing.sm} 16px · {spacing.md} 20px · {spacing.base} 24px · {spacing.lg} 32px · {spacing.xl} 85px.
• Hero head top padding: 85px — a generous push that vertically centers the headline with the geographic illustration.
• Country list item padding: 8px vertical, 0 horizontal.
• Nav horizontal padding: 32px.

Grid & Container

• Max content width: ~1200px on the geographic section, full-bleed on the hero.
• Hero band: two-column — left side carries the headline and sub-dek at ~55% width, right side carries the Material flat illustration at ~45%.
• Geographic grid: three equal-width columns (Americas, Asia Pacific, Europe), each a vertical list of country + flag icon + language sub-label rows.
• Nav: white-on-canvas, Google 'G' wordmark left-aligned, account avatar right-aligned.

Rhythm

The page has two sections: the hero band (headline + illustration) and the geographic reference section (three-column country list). There is no editorial content between these. The rhythm is utility-first: minimal vertical padding between list items, generous top padding on the hero head.

Elevation

The system has no visible elevation tier on the captured surface. No shadows on cards, no elevation on the nav. The one declared shadow token ({colors.shadow} — #000000 at very low opacity) appears in the CSS but is not rendered visibly in the captured state.

• Flat (no shadow): nav, hero, geographic list — 100% of visible surfaces.

Shapes

The captured surface shows no explicit border-radius values on rendered elements. The radius tokens are inferred from Google's Material Design conventions and the --boq-chrometransition-background variable:

• {rounded.none} 0px — list items, geographic columns, the main content areas.
• {rounded.sm} 4px — small interactive chips and form elements (Material convention for utility surfaces).
• {rounded.md} 8px — cards and larger surfaces in the Material system.
• {rounded.full} 9999px — pill buttons and avatar elements (the account avatar in the nav is circular).

No pill buttons appear in the active captured state; the account avatar uses full-circle treatment.

Components

button-primary — Ink {colors.ink} fill, near-white text, fully-rounded {rounded.full} pill, 8×20px padding, 40px height.

button-secondary — Near-white {colors.canvas} fill, link-blue text, fully-rounded {rounded.full} pill, 8×20px padding, 40px height.

top-nav — Near-white canvas, 56px height, Google 'G' wordmark flush left, circular account avatar flush right. No bottom border visible.

nav-link — Transparent background, link-blue {colors.link} text at {typography.nav-link} (16px / 400), 8px vertical padding.

hero-heading — Ink text, Google Sans Display 60px / 700, -2px tracking, 85px top padding / 10px bottom. "Change your region and language" is the captured instance.

section-heading — Ink text, Google Sans Flex 40px / 500, 48px line height. Used for the geographic column headers: "Americas", "Asia Pacific", "Europe".

body-paragraph — Ink text at {typography.body-md} — sub-heading helper text ("Be sure to pick the location that matches your shipping address.").

card — Near-white fill, {rounded.md} 8px radius, 16px padding. The inferred container surface for list panels.

text-input — Near-white fill, ink text, {rounded.sm} 4px radius, 8px padding, 40px height.

country-list-item — Transparent background, ink text at {typography.body-lg} (16px / 400), 8px vertical padding. Each row: flag emoji + country name. Rendered as a link.

country-list-subtext — Transparent background, ink-soft {colors.ink-soft} text at {typography.body-md} (14px / 400), 8px left indent. The language sub-label beneath each country name.

footer — Near-white canvas, ink-soft text, {typography.body-md}, 24×32px padding.

Do's and Don'ts

Do apply -2px letter-spacing to any Google Sans Display usage at 60px or above. The tight tracking at large size is the defining characteristic of the display tier; leaving it at default tracking makes the headline feel under-designed for its size.

Do use {colors.ink} (#191c1d) — not pure black — for all text. Material Design's on-surface token is a very-dark-navy, not neutral black, and the distinction is visible at display sizes.

Do keep the geographic list items as links — country names are interactive navigation targets, not decorative labels. The link treatment with {colors.link} blue distinguishes action from annotation.

Do use Google Sans Flex for the 40px section heading tier. The Flex subfamily's variable axis makes the 40px weight 500 read noticeably warmer than the standard Google Sans at the same size.

Don't use weight 700 below the display tier. The system is 700 for the hero h1, 500 for section headings, 400 for everything else. Applying 700 to section headings or labels would flatten the two-tier weight structure.

Don't replace the near-white canvas ({colors.canvas} — #f9f9f9) with pure white. The off-white is a deliberate Material surface-container value; pure white creates a harsher contrast against the dark ink at body sizes.

Don't add brand-color accents (Fitbit teal, fitness orange) to this utility surface. The captured surface uses Google Store infrastructure and no Fitbit brand tokens. Adding brand accents to a shared infrastructure surface creates an inconsistent experience across the Google Store ecosystem.

Don't introduce shadow elevation. The captured surface is completely flat. Material Design reserves visible elevation for modal sheets and navigation drawers; a utility list page like this renders without any shadow.

Known Gaps

• Fitbit brand surface not captured: the fitbit.com domain redirected to a Google Store region-picker at extraction time. Fitbit's consumer health marketing (teal CTAs, wearable product photography, health metrics dashboard) is not represented in these tokens.
• Fitbit brand colors: the brand's known teal (a bright cyan-teal), charcoal, and fitness-orange accents are not present in the captured data and are therefore not declared as tokens.
• Interactive states: no hover, focus, or active states are visible on the captured utility surface.
• Responsive breakpoints: the captured screenshot is at desktop width; mobile layout for the geographic grid (likely collapses to single-column) is not represented.
• Account avatar component: the circular avatar in the top-right nav is visible but not documented as a standalone component — it uses {rounded.full} treatment and appears at approximately 32px.
• Flag emoji rendering: the geographic list uses emoji flag characters for country identifiers; rendering fidelity depends on the operating system's emoji font and is not controlled by the CSS type system.