What is Bose's primary brand color?

Bose has no chromatic brand voltage on the homepage. The dominant token is graphite ink at `#131317`, used 1596 times as text (835) and border (748). The only saturated hex that appears is Action Blue at `#005bff` — and that lives in the `--state-info` CSS variable, reserved for inline informational links, not branding. The brand identity comes from typography (Bose Headline at weight 900) and from the 88px-tall flat-bottom CTA shape, not from a hex code.

What typography does Bose use?

Two proprietary families. Bose Headline carries every display tier — h1 sits at 96px / 900 with 1.44px tracking and an 84px line-height, h2 at 60px / 900 with 1.2px tracking. Bose Text handles body, nav, captions, and buttons, running mostly at 14-18px in weights 400 and 500. The weight-900 display tier is the brand's confidence signal — where most consumer-electronics retailers run display at 600 or 700, Bose pushes the maximum weight available and lets the typeface itself do the shouting.

Why is the Bose primary CTA an 88px-tall flat-bottom rectangle?

Because the page measures it. The extracted primary CTA renders at 311px wide × 88px tall with `border-radius: 0`, a 1px `#131317` border, and a near-white `#f8f8f8` fill — no pill, no full fill, no shadow. The tall hairline rectangle reads as a department-store catalog button rather than a SaaS pill, and the 88px height is large enough to land as a category header. Most retail systems pick 40-56px; Bose nearly doubles it.

What's Bose's shadow philosophy?

There are no shadow tokens in the extracted CSS — zero hex values appear with a `shadow` usage flag. Elevation comes from (a) hairline borders at `#131317` separating product cards from the canvas and (b) surface-color change between the white canvas, the parchment input fill at `#f1efee`, and the teal certified-refurb banner. The retail surface is deliberately flat. Cards lift only through their hairline frame, not through a drop shadow.

How does Bose differentiate sections without a brand color?

By switching the surface fill and by varying typographic scale. The hero is a full-bleed photographic band; the trending grid sits on pure white with a top hairline; the certified-refurb banner is a teal panel that appears once and never repeats; the footer drops into a near-white surface with a 0px radius. The page is essentially a sequence of monochrome bands punctuated by one teal moment — section breaks come from canvas changes, not from a colored heading or accent rule.

Can I use this DESIGN.md to build my own product catalog page?

Yes — feed it to Claude, Cursor, or GitHub Copilot. The agent will reproduce Bose's restraint (single graphite ink, weight-900 display, 88px CTAs, hairline framing) rather than a generic SaaS theme. The tokens are quoted and paste-ready for Tailwind config, CSS variables, or a shadcn-style component library. Pair with sharp product photography against neutral backgrounds to get the full retail catalog effect.

Bose Design System

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

About Bose DESIGN.md

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

Consumer Electronics

Bose's homepage is a black-ink-on-white retail catalog presented as a product-led editorial spread. The hero stacks a 96px weight-900 "Lifestyle Collection" headline atop a wide photographic band of headphones and earbuds; below it, a "Trending products" grid runs the same display face at 60px and weight 900 across three rows of compact cards. There is no brand voltage in the chromatic sense — the page renders 1596 graphite ink tokens, 294 mid-gray hairlines, and a teal certified-refurb panel that exists once. Where Apple recedes its chrome behind product photography, Bose pushes typography forward: the Headline face IS the brand identity.

This page captures Bose's commerce system as a DESIGN.md file — Google Labs' open spec for machine-readable design tokens. Inside: 20 color tokens covering the graphite ink, three near-black variants, the parchment input fill, the Action Blue used only for state-info, and a small palette of brand-layer accents that appear once each across the page; 11 typography tokens running the proprietary Bose Headline family at weight 900 for display and the Bose Text family at weights 400 and 500 for everything else; a three-step radius ladder (50% / 2-3px / 88px height); and 17 component definitions covering the tall flat-bottom CTA, the parchment search input at 3px radius, the product card, top nav, modal, and certified-refurb banner.

Drop the file into Claude, Cursor, GitHub Copilot, or any AI assistant that reads structured design tokens. The agent will reproduce Bose's actual voice — typographic muscle, graphite ink, and 88px-tall flat-bottom CTAs — instead of a generic e-commerce template. Use it as a reference for audio-retail audits, a starting point for a single-ink product catalog, or a teaching artifact for talking about how to build a brand identity without a brand-color voltage.

What makes it distinct

Weight 900 as voiceBose Headline runs at weight 900 across h1 (96px) and h2 (60px), the typographic muscle that replaces a brand-color voltage
88px button heightthe primary CTA is a tall flat-bottom rectangle with a hairline border, never a pill, never a fill
Single ink, no voltagegraphite #131317 carries 1596 text-and-border tokens; Bose has no brand-accent hex on the homepage
Three-radius scale50% for product chips, 2-3px for inputs and chips, 88px for the CTA height; everything else stays at 0
Action Blue at #005bff is for state-info, not brandthe only saturated hex on the page is reserved for inline informational links

Live at bose.com

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

bose.com

Explore Bose

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.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Bose design system FAQ

Common questions about Bose'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.

Bose — official site

The shop surface this file was extracted from — headphones, earbuds, speakers, and soundbars.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Bose 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 --:--:--→