Onederous brand system

Overview

Onederous Brand Style Guide

This page is a live preview of the tokens and patterns documented in design.md. Use the theme controls above to preview light and dark tokens.

Palette

Color system

Primary accents, supporting purples, and neutrals from the master reference.

Primary

Purple

#4C2480

--color-purple

Blue

#82B2CA

--color-blue

Teal

#3D7A99

(testimonials)

Sand

#E8D5B5

--color-sand

Supporting purples

Purple hover

#5E2D9E

Purple light

#7040BB

Purple tint

#F4EFFA

Purple text

#DCC6FF

Neutrals

Black

#000000

White

#FFFFFF

Gray light

#F3F3F3

Page bg (light)

#FAFAF8

Light theme

Footer

#0A0A0A

Always dark

Atmosphere

Brand gradients

Specialist-phase gradients. Do not set body copy directly on these fields.

Strategic — Hudson

Market — Malik

Creative — Amelia

Soft wash

Identity

Logo assets

Wordmark and lockups used on the marketing site.

Dark mark (default footer)

Light mark

Core PNG

Wordmark (SVG)

Prefer the PNG marks above for email and PDF; SVG wordmarks are optional for web.

See asset table in design.md →

Type

Typography

Lora for display headlines; Lato for UI, eyebrows, and body.

Display — var(--font-display)

Stop prompting. Start winning.

Body — var(--font-body)

Confident, calm, expert. Copy leads with craft and human expertise — the reader is a working professional; Onederous is their team.

Sample eyebrow

Primary text·Muted·Subtle

Layout

Spacing scale

Representative steps from the token table (4px grid).

--space-1
4px

--space-2
8px

--space-4
16px

--space-6
24px

--space-8
32px

--space-12
48px

--space-16
64px

--space-24
96px

Elevation

Shadows

Card, lifted, and purple glow as implemented in globals.

--shadow-card

--shadow-lifted

--shadow-purple

Component patterns

Buttons, cards, and list rows as used on the marketing page.

Default card

Sharp corners, single hairline border, two-layer shadow on hover states elsewhere.

Testimonial / form accent

Teal (#3D7A99) is reserved for testimonial surfaces and the waitlist form.

Client row hover

Example clientHover to see border and tint from the legitimacy list.

Iconography

Lucide

Stroke 1.75 at small sizes; inherit color from context.

Unicode arrows on CTAs: →

Partners

Platform logos

Rendered monochromatic on light surfaces at 48px height.

Team

Seven specialists

Named personas that own each phase of the workflow.

#	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
4	Emma	Cultural Anthropologist	Cultural context, tensions, whitespace
5	Hudson	Brand Strategist	Owns the Strategic gradient
6	Amelia	Creative Director	Owns the Creative gradient
7	Noah	Brand Director	Final review, narrative polish

Prefer the word specialist over "agent" in body copy.

Motion uses Framer Motion springs only (no ease-in-out). Scroll smoothing is global via Lenis. Full presets and voice rules live in design.md.