--- version: alpha name: "Chick-fil-A" website: "https://www.chick-fil-a.com" description: >- A US chicken quick-service brand built on a decades-long red and white identity whose marketing site was behind a Cloudflare security block at time of extraction — only the block-page chrome was captured. The extraction shows Cloudflare's default system-UI sans, a charcoal near-black structural ink (#404040) as the dominant text color, and a steel blue (#0051c3) link accent from the block page. Public brand knowledge: the real site runs Apertura as the display family, uses a bold crimson red as its single voltage, positions with the phrase "My Pleasure" hospitality language, and carries the C-as-chicken-head wordmark in red on white. This file documents what was extractable plus the known gap; treat the typographic and color tokens as approximate until a live extraction can be captured. seo: title: "Chick-fil-A Design System for React — crimson and white, system-UI sans, 12 components" metaDescription: "Chick-fil-A's design system approximation as a DESIGN.md file. Extraction hit a Cloudflare block page; structural tokens from the block capture plus brand-knowledge framing. For React, Next.js, and AI tools." highlights: - "Cloudflare-blocked extraction — the live site returned a security block at extraction time; color and typography tokens reflect the block-page capture only" - "Charcoal-not-black ink — the dominant text tone is #404040, a warm near-black that appears on 25 text and 24 border instances in the captured surface" - "System-UI typography — the block page runs Apple system font stack at weights 300–600; the brand's actual custom family (Apertura) was not captured" - "Hospitality positioning — Chick-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 accent — Cloudflare's default #0051c3 provides the only chromatic signal in the block page; not a Chick-fil-A brand color" tags: - "Food & Delivery" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.chick-fil-a.com" title: "Chick-fil-A — official site" description: "Chick-fil-A's public marketing site — the intended source of truth for live tokens; blocked at time of capture." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "extraction-gap" title: "Why does this file have so few color tokens compared to other design files?" answer: "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." - id: "brand-color" title: "What color is Chick-fil-A's brand red, and why isn't it in this file?" answer: "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." - id: "typography" title: "What typeface does Chick-fil-A use on its website?" answer: "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." - id: "hospitality-design" title: "How does Chick-fil-A's 'My Pleasure' hospitality positioning show up in its digital design?" answer: "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." - id: "live-extraction" title: "How can I get the real Chick-fil-A design tokens?" answer: "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." mockups: - "marketing-hero" - "media-grid" colors: ink: "#404040" ink-muted: "#595959" canvas: "#ffffff" surface-1: "#ebebeb" hairline: "#dedede" link: "#0051c3" ink-dark: "#000000" typography: display-xl: fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\", Arial, sans-serif" fontSize: 60px fontWeight: 300 lineHeight: 72px letterSpacing: 0 display-md: fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\", Arial, sans-serif" fontSize: 30px fontWeight: 300 lineHeight: 39px letterSpacing: 0 heading-md: fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\", Arial, sans-serif" fontSize: 30px fontWeight: 400 lineHeight: 39px letterSpacing: 0 body-md: fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\", Arial, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 22.5px letterSpacing: 0 body-sm: fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\", Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 19.5px letterSpacing: 0 label-strong: fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\", Arial, sans-serif" fontSize: 13px fontWeight: 600 lineHeight: 19.5px letterSpacing: 0 button-md: fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\", Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 19.5px letterSpacing: 0 nav-link: fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\", Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 19.5px letterSpacing: 0 rounded: none: "0px" sm: "5px" full: "9999px" spacing: xs: "5px" sm: "22px" md: "30px" lg: "40px" xl: "53px" 2xl: "60px" components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "5px 30px" height: "40px" borderColor: "{colors.ink}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "5px 30px" height: "40px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "5px 22px" height: "48px" nav-link: backgroundColor: "transparent" textColor: "{colors.link}" typography: "{typography.nav-link}" padding: "0px 3px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0px" hero-subheading: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.display-md}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "30px" borderColor: "{colors.hairline}" surface-panel: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "40px 22px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "5px 22px" height: "40px" borderColor: "{colors.ink}" footer: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "30px 22px" --- ## Overview This file documents an extraction that returned a Cloudflare security block page rather than the Chick-fil-A marketing site itself. **Extraction-as-gap-document.** The tokens below reflect what was measurably present in the captured page — Cloudflare's generic block-page chrome — alongside brand-knowledge framing for the real site's identity. Every hex value in the colors section was present in the extraction; none was invented. Where McDonald's, Five Guys, and Shake Shack can be compared by their respective brand voltages and typographic choices, this file functions as a placeholder until a live extraction can succeed. The real Chick-fil-A identity, as documented across the brand's physical presence, app store assets, and public press materials, is built on a bold crimson red and white. The C-as-chicken-head mark renders in red on white; primary CTAs on the live website use a red fill; and the brand's famous hospitality positioning ("My Pleasure" as a trained response to customer thanks) appears in digital copy as a warmth register that no other major US QSR brand has replicated. Where Five Guys uses aggressive weight-900 uppercase typography to signal Americana boldness and Shake Shack uses food photography to signal upmarket provenance, Chick-fil-A uses warmth of copy and service language to signal trust. The captured surface shows Cloudflare's system-UI stack at weight 300 for the 60px error heading and weight 400 for body copy — a light-weight editorial treatment that is coincidentally not far from the brand's own Apertura-based display style, which also runs at lighter weights relative to QSR peers. **Key Characteristics:** - Extraction hit a Cloudflare security block — all tokens are from the block page, not the live brand surface. - Charcoal ink (`{colors.ink}` — #404040) as the dominant text color in the captured page; warm near-black rather than pure black. - No brand-layer color captured in the extraction (all seven sampled colors are structural neutrals or a Cloudflare blue link). - System-UI fallback typography at weights 300 (display) and 400 (body) — lightweight relative to Five Guys' weight-900 stack. - Single small-step radius (`{rounded.sm}` — 5px) on the only captured component; no pill-rounding or large-step tier. - Known brand identity: bold crimson red voltage, white canvas, Apertura typeface, hospitality copy register. - Light gray gradient surface (`{colors.surface-1}` — #ebebeb) used as the block-page body background. ## Colors ### Text - **Ink** (`{colors.ink}` — #404040): frequency 25 as text, 24 as border. The dominant charcoal — Cloudflare's default block-page text color. A warm near-black that is slightly lighter and less chromatic than a pure charcoal; the warmth is incidental to Cloudflare's system defaults rather than a Chick-fil-A brand decision. - **Ink Muted** (`{colors.ink-muted}` — #595959): frequency 2 as text, 2 as border. Secondary text on the block page — slightly lighter than the primary charcoal. - **Ink Dark** (`{colors.ink-dark}` — #000000): frequency 2 as text, 2 as border. Pure black, appearing as a small accent tone on the block page. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 2 as background. The pure white surface used within the block-page card. Cloudflare's block page sits inside a white card on the gray gradient body. - **Surface-1** (`{colors.surface-1}` — #ebebeb): 1 as background, 2 as gradient. The light gray body background of the Cloudflare block page — a gradient from #ebebeb to #dedede. ### Hairline - **Hairline** (`{colors.hairline}` — #dedede): 2 as gradient. The lighter end of the block-page gradient; functions as the divider tone on the captured surface. ### Link / Accent - **Link** (`{colors.link}` — #0051c3): frequency 2 as text, 2 as border. Cloudflare's default link blue — appears on the "Cloudflare" attribution link at the bottom of the block page. Not a Chick-fil-A brand color. ## Typography ### Font Family The captured surface runs the **system-UI** stack — `-apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif` — at weights 300, 400, and 600. This is Cloudflare's default block-page typeface, not Chick-fil-A's. The brand's actual typeface is Apertura, a geometric humanist sans used for display and body on the live website. For development purposes, the system-UI stack serves as a valid fallback; for brand accuracy, substitute Apertura or an open-source geometric sans (Nunito, Lato) at the same weight scale. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 60px | 300 | 72px | Block-page h1 ("Sorry, you have been blocked") | | `{typography.display-md}` | 30px | 300 | 39px | Block-page h2 ("You are unable to access…") | | `{typography.heading-md}` | 30px | 400 | 39px | Secondary h2 on block page | | `{typography.body-md}` | 15px | 400 | 22.5px | Body paragraph on block page | | `{typography.body-sm}` | 13px | 400 | 19.5px | Small body, nav links, button labels | | `{typography.label-strong}` | 13px | 600 | 19.5px | Bold label / strong inline text | | `{typography.button-md}` | 13px | 400 | 19.5px | Button and action label approximation | | `{typography.nav-link}` | 13px | 400 | 19.5px | Navigation link labels | ### Principles The captured display weight is 300 — a light treatment that reads editorial rather than bold. For the real Chick-fil-A site, display headings are expected to run at heavier weights (Apertura Regular to Medium) with a warmer letter-spacing setting. Weight 400 covers all body copy on the block page with no intermediate 500 or 700 emphasis tier visible — a strict two-weight split (300 display / 400 body) on the captured surface. ### Note on Font Substitutes System-UI is available everywhere by default. For Chick-fil-A's actual brand family (Apertura), **Nunito** or **Lato** at weights 300–600 track the geometric humanist feel closely. For a closer cap-height match at display sizes, **DM Sans** at Light (300) and Regular (400) renders similarly. ## Layout ### Spacing System - **Tokens:** `{spacing.xs}` 5px · `{spacing.sm}` 22px · `{spacing.md}` 30px · `{spacing.lg}` 40px · `{spacing.xl}` 53px · `{spacing.2xl}` 60px. - **Block-page card padding:** 30px vertical and horizontal. - **Top spacing:** 53px offset from the page top (the top-anchor of the block-page card). - **Negative offset:** a –60px margin appears in the block-page layout to overlap a graphic element; this is a Cloudflare layout detail, not a brand pattern. ### Grid & Container - **Block page:** single centered card at roughly 1100px max-width, containing the error heading, sub-heading, two-column explainer body, and a footer attribution strip. - No marketing grid structure is visible from the extraction. ## Elevation The Cloudflare block page uses **no elevation tier** — the white card sits on the gradient background with no box-shadow. The only depth signal is surface-color contrast between the #ffffff card and the #ebebeb gradient body. ## Shapes The only captured radius is `{rounded.sm}` 5px, appearing once on a button element. There is no pill-rounding or card-level radius. For a Chick-fil-A brand approximation, pill-rounding on CTA buttons is expected from brand materials; the 5px value here belongs to the block-page's generic button styling. ## Components **`button-primary`** — For the Cloudflare block-page context: charcoal fill, white text, 5px radius, 5x30px padding. For the real Chick-fil-A site, the equivalent should carry a crimson red fill — this is approximated to the extraction-available ink color until a live capture is possible. **`button-secondary`** — White fill, charcoal text, 5px radius, hairline border. Approximated from block-page context. **`top-nav`** — White canvas, charcoal text, 48px height, system-UI nav links. Approximated from block-page. **`nav-link`** — Steel-blue link text (`{colors.link}`), 13px / 400, 3px horizontal padding. The Cloudflare attribution link at the bottom of the block page provides the only nav-link sample. **`hero-heading`** — Charcoal ink text, 60px / weight 300, `{typography.display-xl}`. The block-page h1. **`hero-subheading`** — Muted charcoal `{colors.ink-muted}` text, 30px / weight 300. The block-page h2. **`body-paragraph`** — Default charcoal text, 15px / 400. Running body copy. **`body-paragraph-muted`** — Muted charcoal, 13px / 400. Secondary body paragraphs. **`card`** — White canvas, charcoal text, 5px radius, 30px padding, hairline border. The block-page card container. **`surface-panel`** — Light gray `{colors.surface-1}` fill, charcoal text, no radius, 40x22px padding. The body gradient background panel on the block page. **`text-input`** — White canvas, charcoal text, 5px radius, 5x22px padding, charcoal border. Generic form field approximation. **`footer`** — Light gray `{colors.surface-1}` surface, charcoal text, 13px / 400, 30x22px padding. The block-page footer attribution strip. ## Do's and Don'ts **Do** replace every token in this file with live-measured values once a successful extraction of www.chick-fil-a.com is possible. The tokens here are Cloudflare's defaults, not Chick-fil-A's; any implementation derived from this file should be treated as a placeholder rather than a ground-truth spec. **Do** preserve the 5px corner radius as an approximation for form inputs and cards if building from this spec, knowing it reflects the block page rather than the live site. For CTAs, a pill radius (rounded-full) is more consistent with the brand's visual materials. **Do** reference the brand's hospitality copy register when writing button labels and call-to-action text — "Add to My Order" rather than "Add to Cart", "Find a Restaurant" rather than "Find a Store". The copy voice carries as much of the identity as the visual tokens. **Do** treat `{colors.link}` (#0051c3) as a Cloudflare default, not a Chick-fil-A brand color. Remove it from any brand-facing implementation. **Don't** use the system-UI stack in any brand-facing implementation without attempting to load Apertura first. The system stack is a fallback; it does not carry the geometric humanist warmth of the brand's actual typeface. **Don't** use the charcoal `{colors.ink}` (#404040) as a heading color in a brand-accurate implementation without first confirming it against the live site. The real site is expected to use a near-black (pure black or a very dark tone) for headings, with the charcoal reserved for body copy. **Don't** treat weight 300 as the brand's display weight based on the extraction. The block page uses Cloudflare's light-weight editorial setting; the brand's actual display weight on its homepage is expected to be Regular (400) or Medium (500) in Apertura. **Don't** use this file as a guide for the app-based ordering flow or the Chick-fil-A One rewards experience, which carry their own component libraries and are completely absent from this capture. ## Known Gaps - **Live site not captured:** www.chick-fil-a.com returned a Cloudflare security challenge at extraction time; all tokens in this file describe the Cloudflare block page, not the brand's own design system. - **Brand voltage absent:** Chick-fil-A's signature crimson red does not appear in the extraction; it cannot be included in the colors section per the spec's hard rule against invented hex values. - **Apertura typeface not captured:** the brand's custom geometric sans is absent from the extraction; the system-UI stack in the typography section is Cloudflare's default, not Chick-fil-A's. - **No component data from live site:** primaryButton, navLink, and input were all null in the extraction; all component definitions in this file are approximations from block-page context. - **Ordering flow entirely absent:** the core of Chick-fil-A's digital product — the menu ordering interface, the Chick-fil-A One rewards program, the catering request form — is not captured here. - **Photography system not documented:** the live site is known to run a photography-led hero with warm food art direction; no image usage, aspect ratio, or photographic style guidance is extractable from the block page. - **App surfaces:** the Chick-fil-A mobile app carries the primary user engagement surface; the app's component library, loyalty-state UI, and gamified rewards display are outside the scope of this web extraction.