Why does this CarMax DESIGN.md have so few tokens?

CarMax's CDN (Akamai) blocked the headless browser extractor and returned an access-denial error page rather than the actual marketing site. The extraction captured only the error page's default browser stylesheet: Times serif at 16px and 32px, pure black (#000000) as the sole text and border color, and 8px / 16px spacing from the minimal error-page layout. No marketing chrome, no brand palette, and no component geometry from the actual carmax.com storefront was captured. The Known Gaps section documents what a successful extraction would add. To attempt a re-extraction: run `bun run design:extract https://www.carmax.com --slug carmax --force`.

What is CarMax's primary brand color?

CarMax's publicly recognizable brand palette centers on a deep navy blue (used as the primary marketing surface and CTA fill) paired with an amber gold (used as a secondary accent on vehicle-price tags, promotional banners, and the brand's visual identity materials). Neither color was captured by the extractor — the CDN block returned an error page before any brand CSS was served. These colors are documented in Known Gaps. This DESIGN.md uses a monochrome ink-on-canvas fallback for all CTA surfaces, matching the extraction's single #000000 hex. A re-extraction of the live site would populate the brand palette.

What typeface does CarMax use?

The extractor captured only Times New Roman at 16px (body) and 32px (h1) — the browser's default error-page stylesheet, not CarMax's brand typography. CarMax's live marketing site uses a custom typeface and/or a geometric sans for headings and body copy, but the specific font family names, weights, and tracking values were not captured. The typography tokens in this file use 'Times' as the fontFamily because that is the only font confirmed by the extraction; they should be replaced with the actual brand typeface once a re-extraction succeeds.

What does CarMax's vehicle card grid look like?

The vehicle-card grid is the primary UI surface on carmax.com — a multi-column list of used vehicles showing a photo, year/make/model, mileage, price, and an Add to Favorites action. The grid was not captured by the extractor. Based on publicly observable CarMax UI patterns, each card uses a white surface with a subtle drop shadow or border, a rectangular or lightly rounded photo container at top, and a price displayed in a large sans-serif weight. The exact border-radius, shadow values, padding, and color tokens for this component are documented as a Known Gap and require a re-extraction to confirm.

Can I use this DESIGN.md to build an automotive retail or used-car marketplace UI?

Yes, with the caveat that this file documents the structural skeleton rather than the full brand palette. The component names and roles (vehicle-search-bar, vehicle-card, filter-sidebar, pricing-display, hero-heading) are accurate to the CarMax storefront archetype and useful for laying out the UI. The color tokens are monochrome placeholders derived from the error-page extraction. To build a CarMax-branded UI, supplement this file with the brand navy and amber from Known Gaps, replace the Times typography tokens with the actual brand typeface from a re-extraction, and add the vehicle-card component's radius and shadow values. As a structural contract for an automotive marketplace — search-first layout, vehicle grid, filter sidebar, VDP — the component set is complete.

CarMax Design System

CarMax's design system as a DESIGN.md file — extraction was CDN-blocked; structural tokens from the error page plus Known Gaps documentation for the live storefront palette.

About CarMax DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source carmax.com

E-commerce & Retail
Automotive

CarMax's website blocked the extractor at the CDN edge — Akamai returned an access-denial response before any marketing page rendered. The captured JSON reflects that blocked state: a single hex (#000000) at frequency 10, a Times serif at 16px and 32px from the browser's default error-page stylesheet, and an "Access Denied" h1 as the sole heading. No marketing chrome, no brand tokens, no component geometry reached the extractor. Where most bot-blocked sites at least serve a branded error page with a logo and palette, CarMax's Akamai configuration returns a plain text error with no CSS from the actual site. The result is a genuinely empty extraction from a site that publicly carries a recognizable brand identity — navy, amber, vehicle cards, a search-first layout — none of which is available in the token layer.

The DESIGN.md file is structured around the minimal extractable data: 3 color tokens (ink black from the error page, implied white canvas, hairline as a single color for borders), 4 typography tokens from the Times error-page stylesheet and general rem-scale knowledge, a 0px radius matching the error page's geometry, and 12 component stubs that describe the structural roles on the actual CarMax storefront based on publicly observable UI patterns. The components use a monochrome ink-on-canvas pattern for all CTA surfaces, since no brand-layer color was confirmed by the extractor.

Feed this file to Claude or Cursor for the structural skeleton — spacing rhythm, typography fallback scale, and component naming — and supplement with the brand palette documented in Known Gaps before building any CarMax-branded UI. The file is more useful as a structural contract (what components exist, what roles they fill) than as a token spec (what colors and fonts they use). Every token in the Known Gaps section is derivable from a re-extraction once the CDN block is resolved; the extraction command is `bun run design:extract https://www.carmax.com --slug carmax --force`.

What makes it distinct

CDN-blocked extractioncarmax.com returned an Akamai access-denial page; tokens are derived from the minimal error-page CSS and documented brand knowledge
Known Gaps flagthe brand navy, amber CTA, vehicle-card grid, search filter sidebar, and pricing display are not captured and are listed in Known Gaps
Minimal structural baseline3 color tokens (#000000 ink, white canvas, hairline), Times 16px/32px from the error page, 8px and 16px spacing from the extraction
Monochrome fallback patternbutton-primary uses ink-on-canvas with a hairline border, matching the no-brand-color pattern for extractions with no brand-layer color
Automotive retail archetypevehicle-card grid, search/filter sidebar, and VDP (vehicle detail page) are the primary UI surfaces not represented here

Live at carmax.com

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

carmax.com

Explore CarMax

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

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

CarMax design system FAQ

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

CarMax — official site

CarMax's public marketing site — the source of truth for the live tokens that a successful extraction would capture.

The DESIGN.md specification

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