# OFM Elite — Design system

> Brand, product UI, and documentation visual language for OFM Elite. Use this when generating UI, landing pages, or docs that must feel on-brand.

- **HTML site:** https://ofmelite.io/
- **Markdown:** https://ofmelite.io/design.md
- **Docs:** https://ofmelite.io/docs/api
- **llms.txt:** https://ofmelite.io/llms.txt

## Brand

- **Name:** OFM Elite (short: Elite)
- **Product:** Deeplinks, bio pages, analytics, CRM attribution, MCP + HTTP API for creators/agencies
- **Voice:** Direct, premium, practical — short sentences, no fluff, no hype spam

## Color

| Token | Value | Use |
| --- | --- | --- |
| `--foreground` | `#0a0a0a` | Primary text |
| `--muted` | muted gray | Secondary text |
| `--border` / borders | `#e5e5e5` | Cards, inputs, dividers |
| `--orange` | `#f97316` | Primary accent / CTA |
| `--orange-dark` | `#ea580c` | Hover accent |
| `--orange-soft` | `#fff7ed` | Soft highlight / active nav |
| Background | `#ffffff` | Default surfaces |

**Rules**

- Default UI is **light / white**, not dark mode
- Accent is Elite orange — never default to purple gradients or generic AI-purple themes
- Prefer hairline `#e5e5e5` borders over heavy multi-layer shadows
- Soft orange glow/blur is OK as atmospheric background on docs/marketing, not neon glow chrome

## Typography

- **Display / headings:** Sora (`font-display`) — extrabold, tight tracking
- **Body:** clean sans used by the app shell (not Inter/Roboto/Arial as the hero identity)
- Docs titles: large display (`text-3xl` → `~2.5rem`), short supporting line in muted
- Eyebrow labels: 12px, bold, uppercase, tracking wide, orange

## Layout patterns

### Docs

- White shell, subtle orange radial + light dot grid behind header
- Left nav (~272–288px), main content max ~3xl, right TOC on xl
- Cards / code panels: white + `#e5e5e5` border, rounded-2xl
- Method badges for GET/POST/PATCH/DELETE
- Primary CTA orange filled; secondary is bordered white

### Dashboard

- White sidebar, compact plan row (no giant upsell cards)
- Hugeicons for chrome icons where used
- Dense but calm — one job per section

### Landing / marketing

- Brand first in the hero (product name is a hero-level signal)
- Full-bleed hero visual plane; avoid inset media cards in the first viewport
- First viewport budget: brand, one headline, one short line, one CTA group, one dominant image
- No detached floating badges / promo stickers on hero media
- Cards only when they hold interaction; otherwise prefer open layout

## Motion

- Prefer 2–3 intentional motions (page reveal, tab underline spring, stagger fades)
- Spring-ish transitions (`stiffness ~380`, `damping ~32`) for tab underlines
- Motion creates hierarchy — not noise

## Components (docs)

- **Copy page menu:** split button — primary copies Markdown; chevron opens Ask ChatGPT / Claude / Perplexity + View as Markdown
- **Code tabs:** cURL / JavaScript / Python
- **Try it:** playground overlay for live API calls
- **Endpoint bar:** method badge + path + orange Try it

## LLM surfaces

Every docs page has a Markdown twin at the same path with `.md` appended (e.g. `/docs/api/quickstart.md`).

Also publish:

- [`/llms.txt`](https://ofmelite.io/llms.txt) — index of all pages for agents
- [`/llms-full.txt`](https://ofmelite.io/llms-full.txt) — concatenated full docs Markdown
- [`/design.md`](https://ofmelite.io/design.md) — this file

## Do / Don't

**Do**

- Keep surfaces white with orange accents
- Use expressive display type for titles
- Ship clear copy and copyable code
- Expose Markdown + llms.txt for AI tools

**Don't**

- Purple-on-white / indigo glow AI aesthetic
- Warm cream + terracotta “default AI landing” look
- Dense broadsheet / newspaper layouts
- Dark docs theme (unless a dedicated dark product surface exists)
- Emoji decoration in core UI chrome