# Steady Pedal Academy — Design System A warm, wholesome, confidence-first design system for **Steady Pedal Academy** (a.k.a. **Steady Pedals**), an academy that teaches **adults to ride bikes** — first-timers and rusty returners alike — on classic gold cruiser bikes, in calm outdoor settings. > The brand voice: patient, encouraging, grounded. Nobody is too old, too nervous, or too out-of-practice. We meet riders where they are. --- ## Sources provided This system was built from brand assets only — **no codebase or Figma file** was supplied. If those exist, attach them and this system can be reconciled against them. - `uploads/Steady-Pedals_logo_clean.png` — primary roundel logo (bike + "STEADY PEDAL / ACADEMY"). Copied to `assets/logo/`. - `uploads/Cruiser bike reference sheet.png` — product photography of the signature gold cruiser bike. Cropped into `assets/imagery/bike-*.png`. - `uploads/Elena reference sheet.png` / `uploads/Mark reference sheet.png` — rider lifestyle photography (brand tees, helmets, green sneakers). Cropped into `assets/imagery/elena-*.png` / `mark-*.png`. - A written **color palette** (goldenrod, forest green, cream, plus greens/golds/neutrals) — encoded verbatim in `tokens/colors.css`. - A request for a **helmet-fit diagram** → `guidelines/helmet-fit.html`. ### Font substitution (needs your confirmation) The logo lettering was hand-set; no font files were provided. This system substitutes the closest Google Fonts: - **Display / headlines → Bitter** (slab serif, echoes the logo's bracketed serifs) - **Body / UI → Hanken Grotesk** (warm humanist grotesque) **⚠️ If Steady Pedal Academy has licensed brand fonts, send the files and we'll swap them in.** --- ## Content fundamentals — how we write - **Tone:** warm, patient, plain-spoken, quietly confident. Reassurance over hype. We remove fear, we don't sell adrenaline. - **Person:** speak to the rider as **"you"**; the academy is **"we"**. ("We'll bring a bike your size." / "You'll be riding by the end of the morning.") - **Casing:** sentence case for almost everything (headings, buttons, labels). **UPPERCASE, letter-spaced** only for eyebrows and small badges — this echoes the "ACADEMY" lockup. - **Headlines:** short, human, benefit-led. *"Find your balance." · "Never ridden? Start here." · "It's never too late to learn."* - **Buttons:** verbs, low-pressure. *"Book a lesson" · "See the schedule" · "Start riding"* — not "SIGN UP NOW". - **Numbers & proof:** concrete and modest — *"2,400+ adults taught," "max 6 per class," "1:6 coach ratio."* No vanity stats. - **Emoji:** not used. Warmth comes from photography, color, and copy — never emoji. - **Punctuation:** em dashes and the middot (·) for rhythm; occasional friendly contractions. Avoid exclamation-mark spam (one, rarely). - **Words we like:** balance, confidence, steady, patient, pace, glide, calm, your size. **Words we avoid:** shred, crush, beast mode, hardcore, blazing. --- ## Visual foundations - **Palette:** goldenrod `#C0892E` + forest green `#2E5A38` on cream/paper `#F4F0E1` / `#F8F5EC`. Green carries most primary actions and text-on-dark; goldenrod is the single high-emphasis accent (one gold CTA per view). Leather-brown accents (`--tan`) come from the saddle/grips in photography. - **Backgrounds:** flat, warm, matte — **cream and paper**, never stark white pages (white is reserved for cards). No gradients on surfaces; the only gradient in the system is the subtle gold fill inside `ProgressBar`. No busy patterns; photography does the heavy lifting. - **Photography:** real riders, real parks, **golden-hour warmth**. The gold cruiser is a recurring hero object. Skin/scenes read warm, never cold or desaturated. Framing is generous and calm. Studio product shots sit on off-white. Prefer 16:10 (cards) and 3:4 (portraits) crops. - **Type:** slab-serif display (Bitter, 700–800, tight tracking) over humanist-sans body (Hanken Grotesk, 1.6 line-height). Eyebrows are 0.16em uppercase. - **Shape language:** soft and rounded. Cards `--radius-lg` (18px), buttons `--radius-md` (12px) or pill for marketing CTAs. The **circle** is a signature — the roundel logo and `CircleBadge` seals. - **Borders:** hairline `#E7DFC9` (a warm sand, never gray). 1px on cards; 2px green for high-contrast controls (checkboxes, secondary buttons). - **Shadows:** low, soft, and **warm-tinted** (brown-green base `rgba(51,53,43,…)`), never neutral gray. `--shadow-sm` on resting cards; `--shadow-lg` on hover lift. - **Elevation & motion:** cards lift `translateY(-3px)` on hover with a shadow bump. Buttons darken on hover and nudge down 1px on press (no shrink). Easing is a gentle `--ease-out`; durations 120–340ms. No bounces, no infinite decorative loops. Respect `prefers-reduced-motion`. - **Hover/press states:** hover = darker fill (primary→`--color-primary-hover`) or green tint (ghost/secondary); press = 1px downward nudge. Tags/toggles animate color + border. - **Layout:** `--container` 1120px, narrow reading measure 720px; section rhythm `--section-y` 5rem. Generous whitespace; content breathes. - **Transparency/blur:** used sparingly — occasional `color-mix` tints; no heavy glassmorphism. --- ## Iconography - **Icon set: [Lucide](https://lucide.dev)** — 2px stroke, rounded joins, friendly and open. It matches the hand-drawn warmth of the logo. Loaded from CDN (`unpkg.com/lucide`); the host page calls `lucide.createIcons()` after render. Wrapped by the `Icon` component and consumed via `iconLeft` / `icon` props on buttons/badges. - **⚠️ Substitution:** no proprietary icon set was provided, so Lucide is the chosen standard. Swap if the brand has its own. - **Preferred glyphs:** `bike`, `map-pin`, `calendar-days`, `clock`, `users`, `shield-check`, `route`, `heart`, `star`, `sun`, `check`, `arrow-right`. - **Emoji:** never used in product UI. - **Illustration:** the **helmet-fit diagram** (`guidelines/helmet-fit.html`) is a bespoke instructional drawing built with inline SVG in brand colors — the one place we draw rather than photograph. The roundel seal (`CircleBadge`) is the recurring iconographic motif. - **Logo:** the provided roundel is the only brand mark. Do not redraw or reconstruct it — always use `assets/logo/steady-pedal-academy-logo.png`. --- ## Components Reusable React primitives live in `components//`. Import from the compiled namespace (`window.`, see `check_design_system`). **core/** — `Button`, `IconButton`, `Badge`, `CircleBadge`, `Tag`, `Card`, `Icon` **forms/** — `Field`, `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch` **feedback/** — `Alert`, `ProgressBar` **content/** — `LessonCard`, `StatTile` ### Intentional additions - **`Icon`** — thin wrapper over Lucide, so glyph usage is consistent. Added because no icon component was specified but the brand needs one. - **`CircleBadge`** — codifies the roundel seal motif from the logo into a reusable component. - **`LessonCard` / `StatTile`** — brand-specific content components; the "class" and "proof point" are the core objects of an academy. --- ## UI kits - **`ui_kits/marketing/`** — the public academy website (hero, classes, proof, helmet-safety, footer + booking flow). - **`ui_kits/app/`** — the rider app (schedule, class detail, my-journey progress). Each has an `index.html` interactive demo and factored JSX screens. --- ## Index / manifest - `styles.css` — **the single entry point** consumers link. `@import` list only. - `tokens/` — `fonts.css`, `colors.css`, `typography.css`, `spacing.css`, `radius-shadow.css`, `base.css`. - `components/` — `core/`, `forms/`, `feedback/`, `content/` (each: `.jsx` + `.d.ts` + `.prompt.md` + one `@dsCard` html). - `guidelines/` — foundation specimen cards (Colors, Type, Spacing, Brand) + `helmet-fit.html`. - `ui_kits/` — `marketing/`, `app/`. - `assets/` — `logo/`, `imagery/`. - `SKILL.md` — Agent-Skills-compatible entry point. - `readme.md` — this file. _Generated files (do not edit): `_ds_bundle.js`, `_ds_manifest.json`, `_adherence.oxlintrc.json`._