Why does this file have so few color tokens compared to other design files?

The extraction script fetched www.chick-fil-a.com and received a Cloudflare security challenge page rather than the actual website. The block page contains only Cloudflare's generic chrome — a light gray gradient surface, charcoal text, and a steel-blue link — amounting to seven color samples with no brand identity. All color tokens in this file are drawn from the block page capture and follow the hard rule that no hex value may appear in the spec unless it was measured in the extraction. A future live capture of the actual site would replace these tokens with Chick-fil-A's real crimson, white, and cream palette.

What color is Chick-fil-A's brand red, and why isn't it in this file?

Chick-fil-A's brand red is a bold crimson — visible on the C-as-chicken-head logo in the wordmark, on red-fill CTA buttons on the live website, and on physical packaging and restaurant signage. The exact hex value was not captured because the extraction hit a Cloudflare block page instead of the live site. The spec enforces a rule that no hex value may appear in the colors section unless it was directly measured in the extraction; including the brand red from brand-kit knowledge rather than measurement would be speculation rather than a ground-truth token. Until a live extraction is completed, the crimson red cannot be included in this file.

What typeface does Chick-fil-A use on its website?

The extraction captured only the Cloudflare block page, which runs the system-UI font stack: -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Arial, sans-serif. This is not Chick-fil-A's brand typography. Based on public brand materials, the live site uses Apertura — a geometric humanist sans that the brand uses for headings and body text — at weights ranging from light (300) for large display to medium (500) for CTAs. Apertura is not on Google Fonts; the closest freely-available substitute is Nunito or Lato at comparable weights.

How does Chick-fil-A's 'My Pleasure' hospitality positioning show up in its digital design?

Chick-fil-A's service culture is built around formal Southern hospitality — operators are trained to say 'My Pleasure' instead of 'You're welcome,' a small ritual that signals above-QSR attentiveness. On the live website this positioning manifests in copy tone (warmer, more conversational than McDonald's or Five Guys), a rewards program framing around appreciation and recognition, and the inclusion of local restaurant context (manager names, community links) in the ordering flow. In visual terms, the brand uses warmer photographic art direction (softer lighting, more human faces) compared to the clinical product photography of Five Guys or the bold food-forward close-ups of Shake Shack.

How can I get the real Chick-fil-A design tokens?

The extraction was blocked by Cloudflare's bot-detection system, which identifies the headless browser used for token extraction as automated traffic. To capture the live site's tokens, the extraction script would need to run with a real browser session — either a VPN-routed browser fingerprint, a manual copy-paste of the CSS custom properties from the site's computed styles panel, or an automated tool that can pass Cloudflare's Turnstile challenge. Once a live extraction succeeds, the spec can be updated with the real crimson red, the actual typography measurements, and the component definitions from the ordering flow.

Chick-fil-A Design System

Chick-fil-A's design system approximation as a DESIGN.md file.

About Chick-fil-A DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source chick-fil-a.com

Food & Delivery

Chick-fil-A's marketing site returned a Cloudflare security block at the time of extraction. The screenshot and extraction data document Cloudflare's default block page — not the brand's actual homepage — which means the color tokens, typography measurements, and component data in this file reflect the block page's generic system-UI chrome rather than Chick-fil-A's own design decisions. The dominant surface is a light gray gradient (#ebebeb transitioning to #dedede), the text is charcoal #404040, and the only chromatic element is Cloudflare's steel-blue link #0051c3. None of these belong to Chick-fil-A's identity.

What is known from the brand record: Chick-fil-A operates with a bold crimson red as its primary voltage — the C-as-chicken-head logo renders in red on white packaging, signage, and digital touchpoints. The chain positions aggressively on hospitality (training every operator to say "My Pleasure" in response to customer thanks) and this hospitality voice carries into digital copy in a way that no other major US QSR brand has replicated. The real marketing site was known to run a photography-led hero format with food-forward images, a top-navigation structured around menu, rewards, and delivery ordering, and a red fill on primary CTA buttons.

This file is an honest gap document. The structural tokens from the block-page capture are included because they are real measured values; the brand-knowledge framing describes what the live site is known to implement. A practitioner building a Chick-fil-A-flavored interface should treat the red voltage and typography as directional guidance pending a live extraction, and should use the system-UI stack as a development fallback only.

What makes it distinct

Cloudflare-blocked extractionthe live site returned a security block at extraction time; color and typography tokens reflect the block-page capture only
Charcoal-not-black inkthe dominant text tone is #404040, a warm near-black that appears on 25 text and 24 border instances in the captured surface
System-UI typographythe block page runs Apple system font stack at weights 300–600; the brand's actual custom family (Apertura) was not captured
Hospitality positioningChick-fil-A is the only major US QSR brand whose operators are trained to respond 'My Pleasure' to thank-yous, a service-design signal that appears in its digital copy voice
Steel-blue link accentCloudflare's default #0051c3 provides the only chromatic signal in the block page; not a Chick-fil-A brand color

Live at chick-fil-a.com

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

chick-fil-a.com

Explore Chick-fil-A

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.

Chick-fil-A design system FAQ

Common questions about Chick-fil-A'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.

Chick-fil-A — official site

Chick-fil-A's public marketing site — the intended source of truth for live tokens; blocked at time of capture.

The DESIGN.md specification

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