# Onederous Design System — Master Reference > Agency-grade brand strategy & creative. Built for independent experts. This is the single-file canonical reference for the Onederous brand, UI system, and content voice. Every decision — colors, type, motion, copywriting, component patterns, caveats — is captured here. If it conflicts with anything in `README.md`, `SKILL.md`, or the `preview/` cards, this file wins. **Source of truth:** [Onederous/onederous.ai](https://github.com/Onederous/onederous.ai) · Next.js 16 · Framer Motion · Lenis smooth scroll **Live staging:** https://src-rho-one.vercel.app/ · **Production:** https://onederous.ai --- ## Table of contents 1. [What Onederous is](#1-what-onederous-is) 2. [The seven specialists](#2-the-seven-specialists) 3. [Brand voice & copywriting](#3-brand-voice--copywriting) 4. [Color system](#4-color-system) 5. [Brand gradients](#5-brand-gradients) 6. [The logo](#6-the-logo) 7. [Typography](#7-typography) 8. [Spacing, layout, radii](#8-spacing-layout-radii) 9. [Shadows & elevation](#9-shadows--elevation) 10. [Motion](#10-motion) 11. [Iconography & imagery](#11-iconography--imagery) 12. [Component patterns](#12-component-patterns) 13. [Section anatomy (marketing page)](#13-section-anatomy-marketing-page) 14. [Interaction states](#14-interaction-states) 15. [Dark / light mode](#15-dark--light-mode) 16. [File index](#16-file-index) 17. [Caveats & open items](#17-caveats--open-items) --- ## 1. What Onederous is Onederous is a **brand strategy and creative engine for independent experts, freelancers, and small agencies** who need agency-grade thinking without the timelines or cost. It guides users through a structured, multi-phase workflow to produce presentation-ready brand strategy and creative outputs delivered as on-brand decks, exportable as PDF or editable PPTX. **Core outputs:** Creative Campaigns · Brand Messaging · Visual Expression · Content Playbooks. **Who it's for:** independent creative professionals, freelancers, small agencies, and marketers who want to pressure-test ideas with a real team. **Product surfaces.** Onederous is currently represented by a single marketing website (`onederous.ai`) — a long-scroll one-pager with 10 sections + privacy/terms legal pages. The app itself lives behind `app.onederous.ai` (not in this design system). There is **one UI kit: `marketing`** — the public site. --- ## 2. The seven specialists Onederous is powered by seven named AI specialist personas. Each owns a distinct phase of the agency workflow and has a named portrait, role, and point-of-view on the product. | # | Name | Role | Notes | |---|---------|-------------------------|---------------------------------------------------| | 1 | Lucas | Project Coordinator | Onboarding, pacing, handoffs | | 2 | Olivia | Brand Researcher | Discovery, audience + competitor scans | | 3 | Malik | Market Analyst | Owns the **Market** gradient (lavender → lilac) | | 4 | Emma | Cultural Anthropologist | Cultural context, tensions, whitespace | | 5 | Hudson | Brand Strategist | Owns the **Strategic** gradient (lilac → periwinkle) | | 6 | Amelia | Creative Director | Owns the **Creative** gradient (periwinkle → deep lilac) | | 7 | Noah | Brand Director | Final review, narrative polish | The word **"specialist"** is preferred over **"agent"** in body copy. --- ## 3. Brand voice & copywriting ### Voice Confident, calm, expert. Talks like a senior creative director, not a tech bro. Copy leads with craft and human expertise — AI is the engine, but **people and taste are always the subject.** ### Point of view Second person (*you, your*). The reader is a working professional; Onederous is their team. First-person plural (*we*) is reserved for founder sections ("We are a human-first / AI services company"). ### Casing rules | Surface | Casing | Example | |----------------------------|-----------------------------------------------|------------------------------------------| | Headlines | Sentence case, ending in a period. | *Stop prompting. Start winning.* | | Eyebrows & small labels | ALL-CAPS, `letter-spacing: 0.14em`. | *WHY ONEDEROUS* | | Section anchors (nav) | Title Case. | *System, Output, Pricing* | | Tier names | Title Case in spec; rendered ALL CAPS typographically. | `RISE`, `LEAD`, `DOMINATE` | | Buttons | Sentence case. Never Title Case, never ALL CAPS. | *Join the waitlist* · *Start your first project* | | Legal / footnotes | Lowercase-ish, low-contrast, tight. | *Example presentations for demonstration only.* | ### Rhythm Copy is punchy and sliced into short lines. Headlines routinely break to two display lines using `` so each reads like a separate beat: > *Seven specialist AI agents.* > *One seamless system.* > *Rise, lead, dominate.* > *Pick your tier.* ### Tone examples (lifted directly from the site) - *"Going it alone is now a thing of the past."* - *"You'll go faster and farther, together."* - *"Agency-grade brand strategy & creative. Built for independent experts."* - *"No more prompting or going it alone."* - *"Presentation decks built in real-time."* - *"Built with experts. Trusted by experts."* - *"Make the things you make even better."* ### Word choice Favors *craft, thinking, strategy, creative, team, system, work* over *features, AI, automation, platform*. Avoids jargon. ### Hard rules - **No emoji, ever.** Not in copy, not in UI. - Unicode arrows (`→`, `←`) are the one exception — used on CTAs and slide navigation. - The bullet character `●` is used in pricing feature lists. - No AI-ese ("leverage", "unlock", "empower"). No hype. --- ## 4. Color system ### Primary palette | Token | Hex | Role | |--------------------------|-----------|----------------------------------------------------------------| | `--color-purple` | `#4C2480` | Primary brand. CTAs, eyebrows on white, System + Close sections. | | `--color-blue` | `#82B2CA` | Soft blue — secondary accent. | | `--color-teal` | `#3D7A99` | Deep teal — testimonial cards + waitlist form only. | | `--color-sand` | `#E8D5B5` | Warm accent — **dark backgrounds only**. Auto-flips to purple on light. | ### Supporting purples | Token | Hex | Role | |--------------------------|-----------|--------------------------------------------| | `--color-purple-hover` | `#5E2D9E` | CTA hover. | | `--color-purple-light` | `#7040BB` | Secondary pills on purple sections. | | `--color-purple-tint` | `#F4EFFA` | Soft lavender card bg (light mode). | | `--color-purple-text` | `#DCC6FF` | Legible heading color on purple backgrounds. | ### Neutrals (default: light theme) | Token | Hex | Role | |--------------------------|----------------------------------|--------------------------------------------| | `--color-black` | `#000000` | Default dark-section canvas. | | `--color-white` | `#FFFFFF` | Light-section surface. | | `--color-gray-light` | `#F3F3F3` | Legitimacy section inversion. | | `--color-gray-off` | `#FAFAF8` | Light-mode page bg. | | `--color-bg-subtle` | `#F2F1EE` / `#141414` (dark) | Subtle surface. | | `--color-footer` | `#0A0A0A` | Footer — stays dark even in light theme. | | `--color-border` | `rgba(0,0,0,0.09)` / `rgba(255,255,255,0.08)` (dark) | Standard border. | | `--color-border-accent` | `rgba(76,36,128,0.30)` / `0.40` (dark) | Purple-tinted border. | ### Text scale (opacity-based) | Token | Light | Dark | Use | |---------------------------|------------------|------------------|------------------------------------------| | `--color-text-primary` | `#111111` | `#FFFFFF` | Headings, strong UI. | | `--color-text-muted` | `rgba(10,10,10,0.65)` | `rgba(255,255,255,0.70)` | Body copy. | | `--color-text-subtle` | `rgba(10,10,10,0.55)` | `rgba(255,255,255,0.50)` | Secondary body. | | `--color-text-faint` | `rgba(10,10,10,0.35)` | `rgba(255,255,255,0.35)` | Legal, deep secondary. | ### Usage rules **DO** - Use purple for primary CTAs, eyebrows on white, and brand-heavy sections (System, Close). - Alternate black ⇄ white sections to create rhythm; punctuate with one purple section. - Reserve teal (`#3D7A99`) for testimonial cards and the waitlist form — it cues "UGC." - Use `#DCC6FF` for headings on purple backgrounds (purple on purple fails contrast). - Body copy on purple backgrounds: `rgba(255,255,255,0.65)`. **DON'T** - Put purple text on black — contrast fails. Use white or `#DCC6FF` instead. - Use sand on light backgrounds. It only works on dark. - Introduce new colors. The palette is intentionally tight — 4 accents, 2 neutrals. - Use purple + sand on the same surface **except inside the logo** (see §6). ### Borders - Dark surfaces: `1px solid rgba(255,255,255,0.08)`. - Light surfaces: `1px solid rgba(0,0,0,0.08–0.14)`. - Purple-accented borders: `rgba(76,36,128,0.30)` light / `0.40` dark. --- ## 5. Brand gradients Three atmospheric gradients extracted from the in-product specialist preview imagery — lilac to periwinkle, warmed with a rose shoulder at one corner. Each maps to a specific specialist's phase. ### The four gradients **`--gradient-strategic`** — Hudson · Strategic positioning. Cool lilac top-left → periwinkle right, pink glow low-left. ```css radial-gradient(140% 95% at 15% 100%, #DCBDD9 0%, transparent 55%), linear-gradient(135deg, #B79AD4 0%, #B2B7ED 100%); ``` **`--gradient-market`** — Malik · Market analysis. Deep lavender → saturated lilac, pastel pink shoulder lower-right. ```css radial-gradient(120% 85% at 100% 100%, #DCC4DF 0%, transparent 50%), linear-gradient(135deg, #AFAEE8 0%, #9372CB 100%); ``` **`--gradient-creative`** — Amelia · Creative development. Periwinkle top → deep lilac base, rose tint low-right. ```css radial-gradient(120% 85% at 100% 100%, #E2C1D5 0%, transparent 55%), linear-gradient(135deg, #B2B7EE 0%, #9677CE 100%); ``` **`--gradient-soft`** — Neutral brand wash. Pulls cooler tints from all three for calmer surfaces (forms, empty states). ```css linear-gradient(135deg, #D3DDF5 0%, #D3E2F9 45%, #E0BDD5 100%); ``` ### Gradient stops (for mixing your own) | Token | Hex | | Token | Hex | |--------------------------|-----------|-----|--------------------------|-----------| | `--grad-lilac-100` | `#DCBDD9` | | `--grad-periwinkle-100` | `#D3DDF5` | | `--grad-lilac-200` | `#B79AD4` | | `--grad-periwinkle-200` | `#B2B7ED` | | `--grad-lilac-300` | `#9677CE` | | `--grad-periwinkle-300` | `#AFAEE8` | | `--grad-lilac-400` | `#9372CB` | | `--grad-periwinkle-400` | `#ACA8E7` | | `--grad-rose-100` | `#E2C1D5` | | `--grad-rose-200` | `#DCC4DF` | ### Gradient rules - **Never place body copy directly on a gradient.** Always drop a white card over it. - **Never stack two gradients adjacently.** Use solid white or off-white between them. - **Sand (`#E8D5B5`) clashes with these lilacs** — don't pair. - Pair only with generous whitespace and Lora display type at ≥60% opacity white for hero copy. --- ## 6. The logo The four-ring wordmark is the one place sand and purple share a surface. ### Gradient distribution - **Sand `#E8D5B5`** anchors the **lower-left quadrant**, holding through roughly the first 25% of the diagonal. - **Purple `#4C2480`** occupies the remaining three-quarters, deepening toward the upper-right. - The transition is smoothstepped along a radial axis from the lower-left corner. - All four rings share the gradient as one continuous field so the mark reads as a single object. ### Rationale Sand is a spark, not a foundation. This weighting signals warmth without overwhelming the purple's authority — opposite corners anchor the brand's tonal range: warm human intuition ↔ precise agentic depth. ### Assets | File | Use | |-----------------------------------------------|------------------------------------| | `assets/onederous-logo.png` | Original (monochrome purple), transparent. | | `assets/onederous-logo-gradient.png` | Recolored gradient version, transparent. | | `assets/onederous-logo-gradient.jpg` | Gradient on white bg. | | `assets/onederous-wordmark.svg` | Typographic wordmark (placeholder — see §17). | | `assets/onederous-wordmark-light.svg` | Light-theme variant. | **Elsewhere sand is restricted to dark backgrounds and purple leads the light ones. They never touch outside the mark.** --- ## 7. Typography ### Families | Family | Role | Weights loaded | |------------|---------------------------------------------------|---------------------------------------------| | **Lora** | Display / serif — all headlines, tier names, prices, quote cards. | Variable 400–700 (normal + italic). | | **Lato** | Body / sans — UI labels, eyebrows, body copy, nav. | Discrete: 100, 300, 400, 700, 900 (+ italics). | ```css --font-display: 'Lora', 'Cormorant Garamond', Georgia, serif; --font-body: 'Lato', system-ui, -apple-system, sans-serif; ``` **Lato gotcha.** Lato has no native 500 or 600 — those values silently fall back to 400 (Regular). For genuine mid-weight emphasis, use 700 (Bold). ### Fluid display scale | Token | clamp value | Use | |----------------------|------------------------------------|--------------------------------------| | `--display-hero` | `clamp(2.5rem, 6.5vw, 6.5rem)` | Hero only, weight **500**. | | `--display-section` | `clamp(2.5rem, 4.5vw, 4rem)` | Standard section H2, weight **400**. | | `--display-subhead` | `clamp(1.9rem, 2.6vw, 2.25rem)` | Card H3, pricing tiers, weight **400**. | ### Base scale | Token | Size | Use | |---------------|--------------|----------------------------------| | `--text-xs` | 0.75rem · 12px | Eyebrows, legal. | | `--text-sm` | 0.875rem · 14px | Small UI. | | `--text-base` | 1rem · 16px | Body default. | | `--text-lg` | 1.125rem · 18px | Lead body. | | `--text-xl` | 1.25rem · 20px | | | `--text-2xl` | 1.5rem · 24px | | | `--text-3xl` | 1.875rem · 30px | | | `--text-4xl` | 2.25rem · 36px | | | `--text-5xl` | 3rem · 48px | | | `--text-6xl` | 3.75rem · 60px | | | `--text-7xl` | 4.5rem · 72px | | | `--text-8xl` | 6rem · 96px | Hero scale. | ### Headline rules - Line-height `1.08` on section H2; `1.0` on hero H1. - Weight `400` on section H2; weight `500` on hero H1 only. - Letter-spacing `-0.01em` on hero, `0` on section. - `text-wrap: pretty` on H2. ### Body rules - Body text: `1rem`–`1.125rem` at `line-height: 1.6–1.65`. - Paragraph max width: `52ch` (`--max-copy`). ### Semantic classes ``` .od-eyebrow — ALL-CAPS 12px with a 24px lead rule. Purple in light, sand in dark. .od-h1 / h1.od .od-h2 / h2.od .od-h3 / h3.od .od-lead — 18px muted, max 52ch. .od-body — 16px muted, line-height 1.6. .od-small — 14px muted. .od-legal — 12px faint, +0.04em tracking. .od-label — 0.7rem uppercase, 0.12em tracking, weight 500. ``` ### Eyebrow anatomy A leading `24×1px` rule in `currentColor`, then `12px` gap, then ALL-CAPS label at `0.14em` tracking. Purple in light mode; sand in dark. --- ## 8. Spacing, layout, radii ### Spacing scale | Token | Value | | Token | Value | |---------------|--------|-----|---------------|--------| | `--space-1` | 4px | | `--space-10` | 40px | | `--space-2` | 8px | | `--space-12` | 48px | | `--space-3` | 12px | | `--space-16` | 64px | | `--space-4` | 16px | | `--space-20` | 80px | | `--space-5` | 20px | | `--space-24` | 96px | | `--space-6` | 24px | | `--space-32` | 128px | | `--space-8` | 32px | | | | ### Layout tokens | Token | Value | Use | |-------------------|----------|----------------------------------------| | `--max-content` | `1280px` | Standard section (Tailwind `max-w-7xl`). | | `--max-wide` | `1400px` | Extended layouts (`max-w-8xl`). | | `--max-copy` | `52ch` | Paragraph max width. | | `--nav-height` | `96px` | Fixed top nav. | **Gutters.** `px-6 md:px-8` — 24px mobile, 32px desktop. ### Radii — core rule > **All boxes use 90° sharp corners.** Enforced globally: `div, section, article, aside, figure { border-radius: 0 }`. **Only exceptions:** - Pills — `--radius-pill: 100px` (buttons, nav chips). - Circles — `--radius-circle: 50%` (avatars, icon buttons). - Form inputs — `--radius-input: 8px` (HubSpot override only). ### Section rhythm The page alternates surfaces to create rhythm: ``` black → white → purple → white → gray-light → white → purple → black ``` Example: Hero (black + video) → Solution (white) → System (purple) → Output (white) → Legitimacy (`#F3F3F3`) → Pricing (white) → Credibility (white) → Benefits (white) → Close (purple) → Footer (`#0A0A0A`). Sections are separated inside `max-w-7xl` by a single `
`: ```css border: 0; border-top: 1px solid rgba(255,255,255,0.08); ``` --- ## 9. Shadows & elevation | Token | Light | Dark | Use | |--------------------|-------------------------------------------------------------------|------------------------------------------------------------------|----------------------------| | `--shadow-card` | `0 1px 3px rgba(0,0,0,0.10), 0 8px 32px rgba(0,0,0,0.08)` | `0 1px 3px rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.3)` | Standard card. | | `--shadow-lifted` | `0 4px 24px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)` | `0 4px 24px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4)` | Hover / elevated. | | `--shadow-purple` | `0 0 40px rgba(76,36,128,0.20)` | `0 0 40px rgba(76,36,128,0.25)` | "Purple glow" around CTAs. | | `--shadow-blue` | `0 0 24px rgba(130,178,202,0.15)` | — | Blue-accented hover. | | `--shadow-cta` | `0 8px 24px rgba(76,36,128,0.35)` | `0 8px 24px rgba(76,36,128,0.50)` | Pressed CTA. | | `--shadow-light` | `0 4px 24px rgba(0,0,0,0.08)` | — | PDF / media frame. | **Card shadow pattern:** two layers — a 1px contact shadow + a wide diffuse shadow. --- ## 10. Motion ### Hard rule > **Never use `ease-in-out` or `linear`.** Only the four Framer Motion spring presets below. Smooth scrolling is provided globally by **Lenis**. ### Spring presets (from `lib/motion.ts`) | Preset | Stiffness | Damping | Use | |------------------|-----------|---------|----------------------------------------------| | `spring.snappy` | 300 | 25 | Interactions, button hover, magnetic pull. | | `spring.smooth` | 120 | 20 | Scroll reveals, section entrances. | | `spring.floaty` | 80 | 15 | Ambient / decorative. | | `spring.slow` | 60 | 18 | Deliberate entrances, pricing card swaps. | ### Reusable variants - `fadeUp` — opacity 0→1, y:48→0. - `fadeIn` — opacity only. - `staggerContainer` — 0.1s between children. - `slideLeft` / `slideRight` — horizontal entrances. ### Hover / crossfade - Crossfade durations for hover-swapped media: **180–400ms** with `ease-out`. - Spring-driven reveals replace all ease timing curves. ### CSS tokens (non-spring context) ```css --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-out-soft: ease-out; --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 400ms; ``` --- ## 11. Iconography & imagery ### Icons **Primary system: [Lucide React](https://lucide.dev/).** Stroke widths: - Small (14–16px): `1.75` - Medium (22px): `2` Default color inherits from context (white on purple, `rgba(255,255,255,0.55)` for secondary). **Use:** - Unicode arrows `→` / `←` for CTA buttons and slide navigation. - Bullet character `●` for pricing feature lists, rendered in a `width: 16px` inline-flex slot. **Don't:** - No emoji, anywhere. - No icon fonts. - No SVG-drawn illustrations in content. - Don't substitute another icon library without flagging. ### Platform logos 12 SVGs in `assets/logos/`: `canva`, `figma`, `hubspot`, `wix`, `squarespace`, `veo3`, `beehiiv`, `copy-ai`, `mailchimp`, `runway`, `shopify`, `the-brief`. Rendered at `height: 48px` with `filter: brightness(0)` so they appear uniformly black on white backgrounds. ### Imagery vibe Warm, filmic, people-first. - **Founder photos** — natural 4:5 portraits, top-composed, not studio-cut. - **Testimonial photos** — 16:9 insets with a 10px teal color-frame peeking around top and sides. - **Agent portraits** — full-bleed 4:5 with a purple scrim; stylized, warm, professional. - **Hero** — full-width 16:9 looping background video (`homepage-video_v02.mp4`) with a bottom-up gradient scrim: `linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 50%, transparent 100%)`. **Don't:** - No AI-generated abstract shapes. - No gradients-as-imagery. - No stock photography. --- ## 12. Component patterns ### Pill CTA — `.od-btn` ```css padding: 14px 24px; border-radius: 100px; background: #4C2480; color: #FFF; border: 1px solid #4C2480; font: 500 0.95rem/1 'Lato'; letter-spacing: 0.03em; :hover { background: #5E2D9E; box-shadow: 0 0 40px rgba(76,36,128,0.20); /* purple glow */ } ``` Variants: - `.od-btn--ghost` — transparent, bordered. Fills purple on hover. - `.od-btn--inverse` — white fill, purple text. For use on dark/purple backgrounds. **Never shrink on press.** Only lift `translateY(-1px)` with the CTA shadow. ### Magnetic button Cursor-tracked translate applied on mousemove: ```js translate((clientX - centerX) * 0.3, (clientY - centerY) * 0.3) ``` Springs back on leave using `spring.snappy`. ### Nav pill A single white pill slides between active / hover links. Text flips to `#4C2480` and weight bumps to 600 (well — to 700 in practice since Lato has no 600). ### Feature row (client list) On hover: - Left border: `3px solid purple` slides in. - `padding-left: 12px`. - Background tint: `rgba(76,36,128,0.06)`. ### Card (default) - Square, sharp corners. - `1px` border: `rgba(255,255,255,0.08)` dark / `rgba(0,0,0,0.08–0.14)` light. - Shadow: `--shadow-card`. ### Purple card (selected pricing, agent cards) Tinted inner shadow `0 0 0 1px rgba(255,255,255,0.06) inset` + `--shadow-lifted`. ### Testimonial card Solid `#3D7A99` teal with a 10px color-frame inset around the photo. ### Agent card glass plate Bottom portrait plate: ```css background: linear-gradient(135deg, rgba(76,36,128,0.30), rgba(132,84,214,0.18)); backdrop-filter: blur(2px); ``` ### Agent portrait scrim ```css background: linear-gradient(to top, rgba(76,36,128,0.52), rgba(76,36,128,0) 80%); ``` ### Form inputs (HubSpot override) - Dark theme fill: `rgba(255,255,255,0.06)`. - Dark theme border: `rgba(255,255,255,0.15)`. - Radius: `8px` (the **only** box exception). --- ## 13. Section anatomy (marketing page) The marketing page is a single scroll column — no sidebars — with these ten sections (in order): 1. **Nav** — fixed 96px bar; 3-column grid (logo · pill nav · actions). 2. **Hero** — black + looping video + bottom scrim + hero headline. 3. **Solution** — white; introduces the seven-specialist system. 4. **System** — purple; seven agent portraits with scrims. 5. **Output** — white; deck / PDF / PPTX demonstrations. 6. **Pricing** — white; three tiers (`RISE`, `LEAD`, `DOMINATE`). 7. **Credibility** — white; founder row on `#F3F3F3`. 8. **Legitimacy** — `#F3F3F3`; client logos + testimonials. 9. **Benefits** — white; outcome-oriented feature list. 10. **Close** — purple; waitlist CTA / teal form card. 11. **Footer** — `#0A0A0A`; stays dark in both themes. ### Standard section header All section headers are **left-aligned** with this three-part scroll reveal (stagger 0 / 0.1 / 0.2s): ``` [Eyebrow] — ALL-CAPS, 24px rule + 12px gap + 14px label, purple/sand. [Two-line headline] — Lora, clamp(2.5rem, 4.5vw, 4rem), weight 400, line-height 1.08. [Lead paragraph] — Lato, 1.125rem, line-height 1.65, max 52ch. ``` Use `` wrapping each with delays `[0, 0.1, 0.2]`. ### Section anchors Active-section tracking driven by `IntersectionObserver` at `threshold: 0.4`. --- ## 14. Interaction states | Surface | State | Treatment | |--------------------------|------------|-------------------------------------------------------------------------------------| | Primary CTA | Hover | `#5E2D9E` + purple glow (`0 0 40px rgba(76,36,128,0.25)`). No shrink. | | Primary CTA | Press | Lift `translateY(-1px)` + `--shadow-cta`. | | Magnetic button | Move | Cursor-tracked translate at `0.3` factor. Springs back via `spring.snappy`. | | Nav link | Active/hover | White pill slides in; text → `#4C2480`, weight → 700. | | Founder card | Hover | Photo crossfades to silent WEBM (400ms); audio plays unmuted. | | Link text | Hover | Opacity `rgba(0,0,0,0.55)` → `rgba(0,0,0,0.85)`. No underline. No color shift. | | Feature row | Hover | `3px` purple left border slides in + `padding-left: 12px` + purple tint. | | Agent card | Hover | Glass plate lifts; body copy fades in from the bottom; portrait slight scale `1.02`.| | Page | Scroll | Lenis smooth scroll + spring-based reveals. | **No press-shrink globally.** Only the pricing CTA and magnetic button lift on press. --- ## 15. Dark / light mode Default is **light** (black is a section treatment, not a theme). Opt into dark theme with: ```html ``` Sections that run dark by default (Hero, System, Close, Footer) can use `data-theme="dark"` scoped or the site-wide toggle. ### What flips in dark mode | Token | Dark value | |--------------------------|-------------------------------------------------| | `--color-bg` | `#000` | | `--color-bg-surface` | `#0D0D0D` | | `--color-bg-subtle` | `#141414` | | `--color-border` | `rgba(255,255,255,0.08)` | | `--color-border-accent` | `rgba(76,36,128,0.40)` | | `--color-text-primary` | `#FFF` | | `--color-text-muted` | `rgba(255,255,255,0.70)` | | `--color-accent-warm` | `var(--color-sand)` (flips back from purple) | Shadows deepen (opacity ~4×). All other tokens inherit. --- ## 16. File index | Path | What it is | |----------------------------------------------|----------------------------------------------------------------------------| | `design.md` (this file) | Master reference. Consolidates everything. | | `README.md` | Source-oriented narrative version of the system. | | `SKILL.md` | Agent Skill manifest. Claude Code can load this as a user-invocable skill. | | `colors_and_type.css` | Every token as CSS custom properties + semantic classes (`.od-h1`, etc). | | `fonts/` | Lora (variable, normal + italic) + Lato (5 weights + italics). | | `assets/onederous-logo.png` | Original logo, transparent. | | `assets/onederous-logo-gradient.png` / `.jpg`| Sand→purple gradient logo, transparent / white-bg. | | `assets/onederous-wordmark.svg` | Placeholder typographic wordmark (see §17 caveats). | | `assets/onederous-wordmark-light.svg` | Light-theme wordmark variant. | | `assets/logos/*.svg` | 12 platform partner logos. | | `uploads/strategic-positioning.png` · `market-analysis.png` · `creative-development.png` | Source imagery the brand gradients were extracted from. | | `preview/colors.html` | Design-system card — colors + logo gradient treatment. | | `preview/typography.html` | Design-system card — type scale + semantic classes. | | `preview/spacing.html` | Design-system card — spacing, radii, shadows, motion. | | `preview/components.html` | Design-system card — buttons, cards, badges, forms. | | `preview/brand.html` | Design-system card — logos, voice examples. | | `preview/gradients.html` | Design-system card — full gradient spec + stops + usage. | | `ui_kits/marketing/index.html` | Runnable marketing-page prototype. | | `ui_kits/marketing/marketing.css` | Marketing-page-specific styles. | | `ui_kits/marketing/app.jsx` | Main app shell; wires the 11 sections together. | | `ui_kits/marketing/sections/*.jsx` | `Nav`, `Hero`, `Solution`, `System`, `Output`, `Pricing`, `Credibility`, `Legitimacy`, `Benefits`, `Close`, `Footer`. | | `Onederous Colors - Standalone.html` | Single-file offline export of the Colors preview. | --- ## 17. Caveats & open items - **Fonts** load locally from `/fonts/` via `@font-face`. Lora ships as a variable weight axis (400–700); Lato ships as discrete TTFs (Thin 100, Light 300, Regular 400, Bold 700, Black 900) + italics. The repo `package.json` loads `Cormorant Garamond` via `next/font/google`, but live staging uses Lora — **this system follows the live site**. - **Logo asset missing.** `/public/assets/onederous-logo-dark.png` is referenced throughout the source repo but the file is private and not accessible via public fetch. We have the four-ring mark (in both original and gradient variants) but **no official wordmark** — `assets/onederous-wordmark.svg` is a typographic placeholder. Please attach the real wordmark PNG/SVG when available. - **Agent portraits and founder photos** are not included (same access reason). Placeholders (gradient cards) are used in the UI kit; swap in real portraits from `public/agency-staff/NN_/-full.png` when available. - **Video assets** (`homepage-video_v02.mp4`, `sizzle_v04.mp4`, founder WEBMs, workflow WEBMs) are not bundled. The UI kit falls back to a static purple panel. Provide these to restore the full hero experience. - **No slide template** was attached, so `/slides/` is omitted. If a deck template is needed, it should be created as a separate artifact using `deck_stage.js` + these tokens. - **Lato mid-weight fallback.** Using `font-weight: 500` or `600` on Lato silently renders at 400. For any mid-weight UI emphasis, bump to 700 (Bold). - **Icons not in the repo** — prefer Lucide's existing set over adding a second library. Flag any additions here. --- *End of master reference. When in doubt, this file wins. When still in doubt, ask.*