// Chili Piper

Design System 2026

Tokens, components, and page-section patterns. Every new product page can be assembled by passing content into the documented components below.

Colors

Brand Palette

chili

#FF5721

Primary CTAs, section labels, accents

rich-black

#131624

Primary text, dark section backgrounds

dark-gray

#474F70

Body text on light backgrounds

gray

#737B99

Secondary text, dividers

cream

#FCFAF8

Default page background

cream-dark

#F4F4F0

Hero sections, alternating backgrounds

Product Colors

Concierge AI

concierge

#543DFF

bg-concierge / text-concierge

Chat

chat

#3529BF

bg-chat / text-chat

Distro

distro

#7360EB

bg-distro / text-distro

Handoff

handoff

#C038E2

bg-handoff / text-handoff

Orchestrator

orchestrator

#D4950C

bg-orchestrator / text-orchestrator

Neutrals

silver

#9C9DB4

mid-gray

#B0B6CA

light-gray

#DFE2EB

border

#E4E4E4

off-white

#F7F9FA

Utility

yellow

#FFBB36

Highlights, callouts

orange

#FC8E0D

Warm accents

lime

#84D55C

Success, positive metrics

green

#008563

Confirmed states, approved

Typography

Font Families

Recoleta

font-heading

Bold 700

All headlines: H1, H2, H3

Calibre

font-calibre

400 / 500 / 600 / 700

Body copy, UI text, buttons

NeuePlak

font-neue-plak

400 / 900

Display / marketing contexts

Source Code Pro

font-mono

Bold

Section labels, code, data

Type Scale

Hero Display

Recoleta Bold · 80–96px · leading-[0.9] · tracking-[-0.8px]

Pipeline that converts.

H1 — Product Hero

Recoleta Bold · 73px · leading-[0.95] · tracking-[-0.73px]

AI that routes every lead.

H2 — Section

Recoleta Bold · 64px · leading-none · tracking-[-0.83px]

Built for the gaps in your flows.

H2 — Compact

Recoleta Bold · 50px · leading-none · tracking-[-1px]

How it works in three steps.

H3 — Card

Recoleta Bold · 24px · leading-[1.1] · tracking-[-0.2px]

Routing-aware booking links, not generic ones.

Body Large

Calibre Regular · 22px · leading-[1.4] · tracking-[-0.2px]

A prospect fills your form, gets routed, and sees the calendar — then closes the tab without booking.

Body

Calibre Regular · 21px · leading-[1.26]

ICP fit, account ownership, intent history, CRM state — all checked automatically before any action fires.

Section Label

Source Code Pro Bold · 15px · uppercase · tracking-[0] · text-chili

// AI Agent: Email Composer

Border Radius

radius-sm

4px

rounded-[4px]

Badges, tags

radius-md

8px

rounded-[8px]

Buttons, small cards

radius-lg

12px

rounded-[12px]

Stat cards, panels

radius-xl

20px

rounded-[20px]

Feature cards, forms

radius-2xl

24px

rounded-[24px]

Large modals

radius-pill

34px

rounded-pill

Pill badges

Buttons

3 variants × 3 sizes. Primary renders as a link with href prop. Pass className="w-full justify-center" for full-width inside form cards.

primary

secondary

tertiary

Badges

Used for product labels, status chips, and category tags. One variant per product.

General tagdefault

Chilichili

Conciergeconcierge

Chatchat

Distrodistro

Handoffhandoff

Orchestratororchestrator

Section Label

The standard eyebrow used at the top of every section. Always prefixed with // — the component adds it automatically.

// AI Agent: Email Composer

<SectionLabel>AI Agent: Email Composer</SectionLabel>

font-mono · text-[15px] · font-bold · uppercase · tracking-[0] · text-chili

Section Patterns

Every product page is assembled from these eight section patterns. Pass content as props — the layout, spacing, and styling are handled.

PatternProduct Hero<ProductHero />

Standard opening section on all product pages. Text row: label + H1 left, body + CTA right. Optional full-bleed visual slot below. Import from @/components/sections.

prop	type	description
label	string	Eyebrow text. Rendered as "// LABEL". Example: "AI Agent: Email Composer"
heading	ReactNode	H1 headline. Wrap colored words in <span className="text-chili">. Use <br /> for line breaks.
body	ReactNode	Description in the right column. ~22px, 2–4 sentences.
ctaLabel	string?	Button label. Default: "Book a demo"
ctaHref	string?	Button link. Default: "/request-demo"
visual	ReactNode?	Full-bleed slot below the text row. Typically a colored band (bg-[#543dff], bg-rich-black) with UI mockups inside.
background	"cream-dark" \| "white"	Background of the text row. Default: "cream-dark"

PatternTrust Bar<ProductLogoBar />

THE trust bar for every product, feature, and solutions page: caption strip over an infinitely scrolling logo band. The customer list lives in the component (DEFAULT_TRUST_LOGOS) — add a logo there and it appears sitewide, so never pass a local array. Import from @/components/sections/product.

prop	type	description
caption	string	Caption strip text. Use a TRUST_CAPTIONS preset (secretSauce, platform, goodCompany). Default: secretSauce.
captionColor	string	Caption text color. Default: chili. Pass #131624 for the rich-black variant.
captionBg	string	Caption strip background. Default: white. Handoff passes "#131624" for a dark strip.
bandColor	string	Logo band background — pass the page's product color. Default: #131624.
invertLogos	boolean	Logos invert to white by default. Set false on light bands (e.g. ChiliCal's pink) to keep original colors.

PatternProblem / Stat Cards<(inline) />

Left: section label + H2 + body + CTA. Right: 2–3 stat cards with border-2 + shadow in the product accent color. Copy ProblemSection from email-composer/page.tsx.

prop	type	description
label	string	Section label text (eyebrow)
heading	ReactNode	H2 headline, ~64px Recoleta
body	string	2–3 sentence description
stats	{ value?: string; icon?: string; text: string }[]	2–3 stat cards. Use value (e.g. '81%') or icon (emoji) for the left element.
accentColor	string (hex)	CSS color for card border and shadow. Matches the page product color. E.g. #543dff for concierge.

PatternHow It Works — Step Flow<(inline) />

Three numbered steps in a horizontal grid with a chili-colored connecting line. Copy HowItWorksSection from orchestrator/page.tsx or email-composer/page.tsx.

prop	type	description
label	string	Section label eyebrow
heading	ReactNode	H2 summarising the flow. Use <span className="text-chili">→</span> arrows between steps.
body	string?	Optional paragraph below the heading
steps	{ num: string; color: string; heading: string; body: string }[]	Array of 3 steps. num: '01'/'02'/'03'. color: Tailwind bg-class for the number bubble.
background	"cream-dark" \| "white"	Section background. Alternates from the previous section.

PatternFeature Card Grid<(inline) />

2×2 grid of image-topped cards. Top: aspect-[634/321] image. Bottom: cream-dark card with H3 + body. Copy BuiltForGapsSection from email-composer/page.tsx.

prop	type	description
heading	ReactNode	Section H2 above the grid, ~64px Recoleta
cards	{ img: string; heading: string; body: string }[]	Array of 4 cards. img is the asset URL (use stable CDN, not Figma).
background	"white" \| "cream-dark"	Section background. Typically white to contrast adjacent cream sections.

PatternFAQ Accordion<ProductFAQ />

components/sections/product/ProductFAQ.tsx — the single site-standard FAQ. Native <details>/<summary> accordion, no JS needed. Max-width 848px, centered, cream-dark background. Emits FAQPage JSON-LD automatically from the same items — never hand-roll a separate JSON-LD block alongside it.

prop	type	description
heading	string	H2 title. Defaults to "Common questions".
items	{ question: string; answer: string }[]	6–10 Q&A pairs. Answers render as paragraphs inside the accordion.

PatternFinal CTA<ProductCTA />

Last section on every product page. A light wave image fills the background — text and form sit on top in dark text. Use a stable flowdrive CDN URL for bgImage. Import from @/components/sections.

prop	type	description
heading	ReactNode	Main headline. Wrap the punchy final phrase in <span className="text-[80px] text-chili">. Max ~921px wide.
bgImage	string (URL)	Full-cover background image. Must be a stable CDN URL. The wave provides the cream/light background — text is dark.
ctaLabel	string?	Button label. Default: "Book a demo"
ctaHref	string?	Destination. Default: "/request-demo"
showEmailForm	boolean?	Default true: email input + button in a cream card with orange glow shadow. False: single centered button.

Spacing & Layout Reference

Page Container

max-w-[1440px] — hero sections
max-w-[1344px] — content sections
max-w-[921px] — CTA section
max-w-[848px] — FAQ section
px-[72px] — standard horizontal padding

Section Vertical Rhythm

pt-[60px] pb-0 — hero (visual flush to bottom)
py-20 md:py-28 — standard content sections
py-[98px] — how-it-works / prominent
py-[72px] — FAQ / compact sections
py-20 — final CTA section

Section Background Alternation

bg-cream-dark— Hero

bg-white— Problem / Feature Grid

bg-cream-dark— How It Works

bg-white— Feature Grid

bg-cream-dark— FAQ

wave bg-image— Final CTA

Asset Guidelines

Figma assets — expire in 7 days. Fine for development; replace with flowdrive CDN URLs before shipping.
Flowdrive pattern
gfcjn7yngdnajsgl.public.blob.vercel-storage.com/flowdrive/org-43506c5e-.../file-[uuid]_[name]
Hero wave bg — purple bg-[#543dff] + CSS-masked wave texture via maskImage / WebkitMaskImage with maskSize: "100% 100%".
CTA wave bg — light/cream wave; use object-cover as absolute fill. Text is dark (text-rich-black).