Warm, editorial and un-flashy: sand and olive instead of the blue-gradient default of AI marketing. One system serving two pillars — the Software business and the AI-Native Builder Academy — so they read as one company.
UI kits
Pillar 01 — Software
Home, Services (enablement vs. custom builds), Sectors, About and the audit intake form. Click-through, light and dark.
Open kit →Pillar 02 — Academy
Program landing page, curriculum, two-step application, and the signed-in learner dashboard. Sign in to switch surfaces.
Open kit →Color
The brand primary flips with the theme — olive in light, warm gold in dark. Both are “the brand color”. Rust is the only saturated hue and is reserved for destructive actions.
Brand
Neutrals — light
Neutrals — dark
Status
Type
Lora · headings
Geist · body & UI
Geist Mono · labels & data
| Token | Size | Use |
|---|---|---|
--text-hero | clamp(28px, 4.5vw, 48px) | Page-opening headline, Lora 500 |
--text-section | clamp(24px, 3vw, 36px) | Section heading |
--text-subhead | 20px | Card and module titles |
--text-lead | 18px | Lead paragraph under a heading |
--text-body-md | 15px | Default body and controls |
--text-caption | 13px | Hints, metadata |
--text-eyebrow | 12px | Mono uppercase kicker, 0.1em |
Foundations
Depth comes from the 1px border and the surface value — the shadow tokens are almost invisible by design. --shadow-image is the only one you can really see, and it belongs to media.
Components
| Group | Components |
|---|---|
core/ | Button, IconButton, Card, MediaWell, Badge, Tag, Eyebrow, SectionHeading |
forms/ | Field, Input, Textarea, Select, Checkbox, Radio, Switch |
navigation/ | Tabs, Accordion |
feedback/ | Dialog, Toast, Tooltip, ProgressBar |
brand/ | Wordmark, LogoMarquee, StepList |
Every component ships with a .d.ts props contract and a .prompt.md saying what it is and when to use it. The Design System tab renders a live card per group.
What's missing
Nothing was drawn. The mark is set in type by Wordmark — send the SVG and it swaps in everywhere.
Every image in both kits is a captioned MediaWell placeholder waiting on real screenshots and portraits.
Client names, metrics and case details are illustrative — written to demonstrate the voice, not to be shipped.