# BeckerAI Solutions — Design System

The design language for **BeckerAI Solutions**, an application-layer AI company for U.S. small and mid-sized businesses. Warm, editorial, un-flashy: sand and olive instead of the blue-gradient default of AI marketing. The system is built to serve two surfaces that must feel like one company.

## Company context

Two integrated pillars:

**1. Software.** Two halves. *AI Enablement Services* — consulting, AI-readiness audits, workflow analysis and deployment support that get SMBs actually using AI inside existing operations. *Custom AI-Assisted Software Development* — bespoke tooling built with Claude/GPT for clients whose needs require net-new software. BeckerAI is explicitly **not a foundation-model developer**: it does not build or train LLMs. It works at the application layer. Primary sectors are **Healthcare** and **Marketing** (demonstrated capability); **Retail, Real Estate, Tourism, Hospitality** are planned expansion.

**2. Academy.** Internally *BeckerAI Academy*, publicly the **AI-Native Builder Academy** — a 100% online, self-paced program for non-technical U.S. professionals learning to become "AI-native builders" who get hired into tech roles, launch their own products, or bring AI skills back to their current jobs. Explicitly **not a computer science course**; it is a bridge for people without a CS background.

The pillars form a closed-loop talent pipeline: some graduates are hired into BeckerAI Solutions, others take the skills into the wider U.S. economy.

## Sources used

- **Style reference:** `https://epic.new/labs` — a warm-neutral, editorial AI-services site. Used for *structure and visual temperature only* (mono eyebrow → serif headline → plain-spoken body; hairline-divided sections; near-invisible shadows; social-proof marquee; FAQ accordion). No Epic copy, imagery or brand assets are reproduced here.
- **Token spec supplied by the client** (colors, type scale, shadows, motion curves, radii, container width) — implemented verbatim in `tokens/`. Off-grid radii (7.6 / 9.6 / 11.6px) are intentional; do not round them.
- No logo files, photography, font binaries or codebase were supplied. See *Gaps* at the bottom.

---

## VISUAL FOUNDATIONS

**Color.** The background is never white and never grey — light mode sits on warm sand `#f6f0e9`, dark mode on charcoal brown `#2d2621`. Cards are one step *lighter* than the page in light mode and one step lighter than the page in dark mode too, so surfaces always read as raised. The brand primary flips with the theme: **olive `#545e46`** in light, **warm gold `#d4a574`** in dark — this is deliberate and both are "the brand color". Rust `#be3a1b` is the only high-saturation hue and is reserved for destructive actions. Success/warning/info hues were **added** (none were specified) and are desaturated to stay in the warm family. Max two background values per screen.

**Type.** Three families, strictly divided: **Lora** (serif) for all headings and any editorial pull quote; **Geist** (sans) for body, UI and buttons; **Geist Mono** for eyebrows, labels, data and code. Headings track tight (-0.025em) at weight 500 — never 700, the system has no bold headlines. Body tracks -0.01em. Mono eyebrows are uppercase at 0.1em. Hero is `clamp(28px, 4.5vw, 48px)`; body copy is 15–16px with 1.65 line-height and a 42rem measure.

**Spacing & layout.** 4px base unit, container 1280px, section rhythm `clamp(4rem, 9vw, 8rem)`. Sections are separated by generous vertical space and 1px hairline rules — not by alternating background colors. Layouts are left-aligned by default; centering is reserved for the closing CTA block.

**Backgrounds.** Flat warm color. No gradients as page backgrounds, no mesh, no glow, no noise overlay. The only gradients in the system are the marquee edge mask and the `lab()` shimmer used on text and skeletons. Imagery is warm-toned product/interface photography with `--shadow-image` (the one visible shadow in the system) and `--radius-xl`; it sits full-bleed or in a wide 16:9 well under the hero.

**Cards.** 1px `--border` outline, 9.6px radius, `--shadow-sm`. Depth is carried by the border and surface value, not the shadow — the shadow tokens are nearly invisible by design (`#0000000a`). Interactive cards go to `--shadow-lg` and `--border-strong` on hover; they never lift or scale.

**Borders.** Hairlines everywhere: `#e7dacd` light, `#4a4039` dark. Dividers, table rules, accordion separators and card outlines all use the same single value. No double rules, no colored left-border accent stripes.

**Motion.** Short and eased, never bouncy, never springy. `fade-up` (12px, 600ms, `cubic-bezier(0.22,0.61,0.36,1)`) on first paint of a section. Standard transitions are 200ms `cubic-bezier(0.4,0,0.2,1)`. Accordions use `cubic-bezier(0,0,0.2,1)`. The marquee runs 40s linear infinite; shimmer 2.4s. All motion respects `prefers-reduced-motion`.

**Hover / press.** Hover darkens the primary olive one step (lightens the gold one step in dark mode); ghost and secondary controls fill with `--accent`. Nothing scales, nothing translates on hover except the loading fade-up. Press states reuse `--primary-active`. Focus is a 2px `--ring` outline at 2px offset, plus a soft 18% ring on form fields.

**Transparency & blur.** Used twice only: the dialog scrim (`--overlay`, 45% warm brown + 2px blur) and the marquee's edge mask. No frosted-glass navbars.

**Disabled.** 45% opacity, pointer-events off. No grey-out recolor.

---

## CONTENT FUNDAMENTALS

**Voice: the competent operator, not the futurist.** Copy talks about the customer's business, never about the technology's potential. Sentences are short and declarative. Claims are concrete and checkable.

- **Person.** "You" for the reader; "we" for BeckerAI. Never "our clients" when addressing a prospect.
- **Casing.** Sentence case everywhere — headings, buttons, labels, nav. Title Case never appears. Mono eyebrows are the only uppercase text.
- **Headlines** name a problem in the customer's own words and its resolution: *"The intake that takes three days and one person's memory runs in minutes."* Not *"Unlock the power of AI."*
- **Never say:** revolutionary, cutting-edge, unlock, harness, supercharge, game-changing, seamless, empower, "the future of". Never claim to build models or train LLMs — the honest line is "we work at the application layer".
- **Numbers** are specific or absent. "Two-week readiness audit", not "fast turnaround".
- **Buttons** are verb-first and specific: "Book an AI readiness audit", "See the curriculum", "Apply for the fall cohort". Never "Learn more", "Get started", "Submit".
- **Academy copy** is aimed at career-changers and is careful about promises: it says what you build and what you can do afterwards, never a guaranteed salary or job. The framing line is "not a computer science course — a bridge".
- **FAQ questions** are written the way an owner would ask them out loud: "What does a project cost?", "Do I need someone technical on staff?"
- **No emoji**, ever — in product, marketing, or docs.

---

## ICONOGRAPHY

**Lucide** is the icon system (per the reference spec), stroke-based at 1.5–2px, 16px in dense UI, 18–20px in buttons, 24px in feature blocks. Load from CDN:

```html
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<script>lucide.createIcons();</script>
```

Common glyphs: `arrow-right` (CTAs), `check` (inclusion lists), `chevron-down` (accordion, select), `x` (close), `linkedin`. Phosphor is listed as a secondary set in the source spec but is **not used** in this system — one icon family per surface. Icons inherit `currentColor` and are never given their own color. No emoji, no unicode glyph icons, no filled/duotone icons. Only two icons are drawn inline in component source (Lucide's own `check` and `chevron-down` path data), because they are structural to Checkbox, Select and Accordion.

No slide template was supplied, so no sample slides were authored.

**No logo asset was supplied**, so nothing was drawn: the mark is set in type by `Wordmark` — "Becker" in Lora medium, "AI" in Geist Mono brand-colored, descriptor ("Solutions" / "Academy") in mono uppercase. Replace its internals with the real SVG when it exists.

---

## Index

| Path | What's there |
| --- | --- |
| `styles.css` | Single entry point — imports every token file |
| `tokens/` | `fonts`, `colors`, `typography`, `spacing`, `radii`, `elevation`, `motion`, `base` |
| `components/core/` | Button, IconButton, Card, MediaWell, Badge, Tag, Eyebrow, SectionHeading |
| `components/forms/` | Field, Input, Textarea, Select, Checkbox, Radio, Switch |
| `components/navigation/` | Tabs, Accordion |
| `components/feedback/` | Dialog, Toast, Tooltip, ProgressBar |
| `components/brand/` | Wordmark, LogoMarquee, StepList |
| `guidelines/` | 16 foundation specimen cards (Colors, Type, Spacing, Brand) |
| `ui_kits/solutions/` | Marketing site — Home, Services, Sectors, About, Intake (click-through) |
| `ui_kits/academy/` | AI-Native Builder Academy — Landing, Curriculum, Apply, learner Dashboard |
| `assets/` | `README.md` (what's missing and where it plugs in, icon usage) + `ds-resolve.js` |
| `SKILL.md` | Agent-Skills entry point |

### Intentional additions

Nothing in the source defined a component inventory, so the standard set was authored from scratch. Beyond it:

- **Eyebrow / SectionHeading / StepList / LogoMarquee** — the reference site's structural patterns, promoted to components so section rhythm stays consistent.
- **Wordmark** — stands in for a missing logo file.
- **Field** — wrapper so no control ships without a label/hint contract.
- **MediaWell / ProgressBar** — both appeared in 4+ places across the two kits with real props, so they were promoted out of kit-local code into `components/`.
- **`--success` / `--warning` / `--info`** — the supplied palette had no status hues; these are new, warm, and desaturated.

### Gaps / to do

- **Fonts are loaded from Google Fonts**, not self-hosted binaries — no font files were supplied. Geist, Geist Mono and Lora are all exact matches (no substitution), but swap `tokens/fonts.css` for local `@font-face` rules before production.
- **No logo, photography, or client logos** were supplied. `Wordmark` and `LogoMarquee` render type placeholders.
- **Both UI kits use a small loader** in their `index.html` (fetch → strip ESM imports → Babel) so the screen `.jsx` files stay clean and idiomatic while still running from the filesystem with no build step.
- **All media in the kits is a labelled placeholder well** (`MediaWell`) — hero shots, case-study screenshots and portraits are waiting on real assets.
- **Client names, metrics and case details in the kits are illustrative**, written to demonstrate the voice. Replace them with real ones before anything ships.