# CFA Plan Sheet Design System

> The official look for Commercial Flooring Academy (CFA): web, apps, slides, email, SMS, social and print. Square corners, warm paper, ink lines, one red for action. Read llm-brief.md before designing or writing anything for CFA. Last updated 10-27-2026.

## Start here

- [LLM brief](https://brand.commercialflooringacademy.com/llm-brief.md): one block with every rule an AI tool needs. Complete on its own.
- [Full design system](https://brand.commercialflooringacademy.com/DESIGN.md): every rule for every channel, plus every component.
- [Everything in one file](https://brand.commercialflooringacademy.com/llms-full.txt): the brief and the full design system together.

## Code

- [tokens.css](https://brand.commercialflooringacademy.com/tokens.css): fonts and every token as a CSS variable.
- [plan-sheet.css](https://brand.commercialflooringacademy.com/plan-sheet.css): component classes. Load tokens.css first.
- [tailwind-preset.js](https://brand.commercialflooringacademy.com/tailwind-preset.js): Tailwind preset, radius 0 everywhere.
- [cfa.tokens.json](https://brand.commercialflooringacademy.com/cfa.tokens.json): tokens in the W3C design token format.

## Components

- [BottomLine](https://brand.commercialflooringacademy.com/components/BottomLine/preview.html)
- [BoxList](https://brand.commercialflooringacademy.com/components/BoxList/preview.html)
- [Button](https://brand.commercialflooringacademy.com/components/Button/preview.html)
- [CTABand](https://brand.commercialflooringacademy.com/components/CTABand/preview.html)
- [Calculator](https://brand.commercialflooringacademy.com/components/Calculator/preview.html)
- [CheckList](https://brand.commercialflooringacademy.com/components/CheckList/preview.html)
- [CodeBox](https://brand.commercialflooringacademy.com/components/CodeBox/preview.html)
- [DeckCard](https://brand.commercialflooringacademy.com/components/DeckCard/preview.html)
- [DimensionLine](https://brand.commercialflooringacademy.com/components/DimensionLine/preview.html)
- [DownloadLink](https://brand.commercialflooringacademy.com/components/DownloadLink/preview.html)
- [EmailMock](https://brand.commercialflooringacademy.com/components/EmailMock/preview.html)
- [Eyebrow](https://brand.commercialflooringacademy.com/components/Eyebrow/preview.html)
- [FAQ](https://brand.commercialflooringacademy.com/components/FAQ/preview.html)
- [FeatureCard](https://brand.commercialflooringacademy.com/components/FeatureCard/preview.html)
- [Field](https://brand.commercialflooringacademy.com/components/Field/preview.html)
- [FileRow](https://brand.commercialflooringacademy.com/components/FileRow/preview.html)
- [Footer](https://brand.commercialflooringacademy.com/components/Footer/preview.html)
- [FormCard](https://brand.commercialflooringacademy.com/components/FormCard/preview.html)
- [Header](https://brand.commercialflooringacademy.com/components/Header/preview.html)
- [Icons](https://brand.commercialflooringacademy.com/components/Icons/preview.html)
- [LogoLockups](https://brand.commercialflooringacademy.com/components/LogoLockups/preview.html)
- [NumberedSteps](https://brand.commercialflooringacademy.com/components/NumberedSteps/preview.html)
- [PhotoSlot](https://brand.commercialflooringacademy.com/components/PhotoSlot/preview.html)
- [PriceCard](https://brand.commercialflooringacademy.com/components/PriceCard/preview.html)
- [ProofCard](https://brand.commercialflooringacademy.com/components/ProofCard/preview.html)
- [QuoteCard](https://brand.commercialflooringacademy.com/components/QuoteCard/preview.html)
- [SectionTag](https://brand.commercialflooringacademy.com/components/SectionTag/preview.html)
- [SlideFrame](https://brand.commercialflooringacademy.com/components/SlideFrame/preview.html)
- [StatusBar](https://brand.commercialflooringacademy.com/components/StatusBar/preview.html)
- [Stepper](https://brand.commercialflooringacademy.com/components/Stepper/preview.html)
- [Tag](https://brand.commercialflooringacademy.com/components/Tag/preview.html)

## Logos

Use as they are. Never redraw, retype or recolor.

- [cfa-horizontal-ondark.svg](https://brand.commercialflooringacademy.com/Logo/SVG/cfa-horizontal-ondark.svg)
- [cfa-horizontal-onlight.svg](https://brand.commercialflooringacademy.com/Logo/SVG/cfa-horizontal-onlight.svg)
- [cfa-mark-bone.svg](https://brand.commercialflooringacademy.com/Logo/SVG/cfa-mark-bone.svg)
- [cfa-mark-ink.svg](https://brand.commercialflooringacademy.com/Logo/SVG/cfa-mark-ink.svg)
- [cfa-mark-mono-ink.svg](https://brand.commercialflooringacademy.com/Logo/SVG/cfa-mark-mono-ink.svg)
- [cfa-mark-mono-red.svg](https://brand.commercialflooringacademy.com/Logo/SVG/cfa-mark-mono-red.svg)
- [cfa-mark-mono-white.svg](https://brand.commercialflooringacademy.com/Logo/SVG/cfa-mark-mono-white.svg)
- [cfa-mark-red.svg](https://brand.commercialflooringacademy.com/Logo/SVG/cfa-mark-red.svg)
- [cfa-stacked-ondark.svg](https://brand.commercialflooringacademy.com/Logo/SVG/cfa-stacked-ondark.svg)
- [cfa-stacked-onlight.svg](https://brand.commercialflooringacademy.com/Logo/SVG/cfa-stacked-onlight.svg)
- [cfa-wordmark-ondark.svg](https://brand.commercialflooringacademy.com/Logo/SVG/cfa-wordmark-ondark.svg)
- [cfa-wordmark-onlight.svg](https://brand.commercialflooringacademy.com/Logo/SVG/cfa-wordmark-onlight.svg)
- [cfa-wordmark-red.svg](https://brand.commercialflooringacademy.com/Logo/SVG/cfa-wordmark-red.svg)

## Icons

- [arrow-solid.svg](https://brand.commercialflooringacademy.com/icons/arrow-solid.svg)
- [arrowhead-left.svg](https://brand.commercialflooringacademy.com/icons/arrowhead-left.svg)
- [arrowhead-right.svg](https://brand.commercialflooringacademy.com/icons/arrowhead-right.svg)
- [slide-building.svg](https://brand.commercialflooringacademy.com/icons/slide-building.svg)
- [slide-clock.svg](https://brand.commercialflooringacademy.com/icons/slide-clock.svg)
- [slide-hardhat.svg](https://brand.commercialflooringacademy.com/icons/slide-hardhat.svg)
- [slide-qr.svg](https://brand.commercialflooringacademy.com/icons/slide-qr.svg)
- [slide-trowel.svg](https://brand.commercialflooringacademy.com/icons/slide-trowel.svg)
- [slide-warning.svg](https://brand.commercialflooringacademy.com/icons/slide-warning.svg)
- [web-arrow.svg](https://brand.commercialflooringacademy.com/icons/web-arrow.svg)
- [web-check.svg](https://brand.commercialflooringacademy.com/icons/web-check.svg)
- [web-clock-small.svg](https://brand.commercialflooringacademy.com/icons/web-clock-small.svg)
- [web-doc.svg](https://brand.commercialflooringacademy.com/icons/web-doc.svg)
- [web-download.svg](https://brand.commercialflooringacademy.com/icons/web-download.svg)
- [web-search.svg](https://brand.commercialflooringacademy.com/icons/web-search.svg)
- [web-video.svg](https://brand.commercialflooringacademy.com/icons/web-video.svg)