# The AI Fellowship — Design System

Use this file when a person or an agent is building anything that represents the Fellowship: a page, a deck, a chapter poster, a social card, a product surface.

Read it with `tokens.css` and `tokens.json`. Do not invent a colour, a third button, or a new logo.

Tagline: **AI for every human.**
Voice: Authentic. Human. Connected. First names, cities, faces. People are the subject, not product screenshots.

## Logo

The mark is two interlocking links. The interlock means connection. The gradient is the identity.

Lockups, and only these:

1. **Mark** — the symbol alone. Avatars, favicons, small badges.
2. **Wide** — mark left of the two-line wordmark. Headers and slides.
3. **Stacked** — mark above the wordmark. Posters and covers.
4. **Chapter** — wide or stacked, plus the city name in Off Red. Example: `Lagos Chapter`.
5. **Favicon** — the mark, tight, at least 16px, preferably 32px.

Wordmark, exactly:

```
The AI
Fellowship
```

Black `#111111` on White, Silver and Earth. White on Black. Do not restack it. Do not write “the ai”.

Approved grounds behind the brand, and only these: White `#FFFFFF`, Black `#000000`, Silver `#F6F6F5`, Earth `#EAEBE1`.

Clear space on every side equals the height of the line “The AI”.
Minimums: mark 24px in UI, wordmark 96px wide.

### Use

- Website header: wide lockup on White or on the nav surface.
- Social avatar: mark centred on White, inside a squircle.
- Chapter cover: stacked lockup on Earth or Silver, city name under it in Off Red.
- App icon: mark only, generous padding, White or Black ground.

### Don't

- Don't recolour, flatten, or single-tone the mark. A solid rose or black mark is not a variant.
- Don't rotate, mirror, skew, outline, add shadows, or re-space the links.
- Don't put the logo on a photograph or in the middle of a liquid gradient. A calm edge of a gradient is allowed. The centre is not.
- Don't redraw the mark. Use `mark.svg`.

The gradient mark never inverts in dark theme. Only the wordmark switches to white.

## Colour

Off Red `#E44E73` is the workhorse: active nav, links, eyebrows, focus, timeline nodes.
Off Red Dark `#C73D60` is for hover and for rose text under 18px on white.
Muted Orange `#EF945E` is the secondary accent. Large type and graphics only.
Warm Purple `#9E40A5` is rare and flat. Never inside a gradient.
Blue Spark `#5ECCEC` is rarer still. Never inside a gradient.
Dust Purple `#F1E7F7` is a surface, never text.
Silver and Earth are backgrounds.

Elevators are for section breaks, highlights and dividers, not for interface chrome:

- Primary Orange `#FF4901`
- Secondary Orange `#F37035`
- Lighter Orange `#F29230`
- Warm Yellow `#F2AB2D`

Discord `#5865F2` is only for Discord links. Success `#4CAF50` is live and confirmation. Danger `#BF000F` is errors. Ink is three steps: `#111111`, `#555555`, `#999999`.

### Use

- A text link is Off Red Dark, not the primary hex, when the type is small.
- A section break can be a full-bleed Primary Orange band with white type.
- A live chapter uses a Success dot, not a new green.

### Don't

- Don't paint a button Discord purple.
- Don't use Blue Spark or Warm Purple as a gradient stop.
- Don't add a fourth ink colour.

## Signature gradient

```css
linear-gradient(135deg,
  hsl(335 76% 60%),
  hsl(7 87% 69%),
  hsl(37 90% 55%));
```

One gradient. It carries primary buttons, statistic numerals, clipped headlines of two to five words at 28px and above, and invitation banners. Build any other gradient from Off Red, Muted Orange and the elevator oranges and yellow. Black is allowed — it makes content pop.

### Use

- The single conversion button.
- A stat like `3,000+`.
- One invitation banner per page, pairing a promise with one action.

### Don't

- Don't fill a whole page with the gradient and put body text on it.
- Don't run a second competing gradient in the same viewport.
- Don't include Warm Purple or Blue Spark.

## Theme

`data-theme="light" | "dark"`. Components read variables (`--bg`, `--text`, `--border`). They do not hard-code surface colours. The theme crossfade is 0.9s and animates colour only.

## Type

Helvetica Neue is the typeface for titles, UI and body. Roboto is optional emphasis, not the default. Do not introduce a serif.

- Hero: `clamp(3rem, 7.5vw, 7rem)`, weight 700, tracking `-0.03em`, line-height `0.95`
- Section: `clamp(2rem, 4vw, 3rem)`, weight 700, tracking `-0.025em`
- Body: 15–18px, weight 400, line-height 1.65, measure about 65–70ch
- Eyebrow: 11px, weight 700, tracking `0.15em`, uppercase, Off Red

Nothing below 11px except a decorative glyph.

### Use

- Hero headline in near-black, with at most one short phrase clipped to the gradient.
- Eyebrow, then a hairline, then a muted counterpart: `The AI Fellowship` / `Est. 2025`.

### Don't

- Don't set a paragraph in uppercase.
- Don't letter-space lowercase body.
- Don't use a serif for quotes or stats.

## Space, shape, motion

4px base. Component padding lives between 16 and 40px. Section padding lives between 60 and 140px.
Containers: 1100 section, 960 hero, 650 prose, 520 narrow.

Radii: 20 card, 24 panel, 32 hero, 100 pill, 50% avatar. Interactive controls are pills.

Motion:

- `standard` cubic-bezier(.4,0,.2,1) — hover and colour, 0.2s
- `emphasized` cubic-bezier(.16,1,.3,1) — entrances, 0.7s
- `fadeUp` — opacity and 24px rise, staggered 0.10 / 0.25 / 0.40 / 0.55s
- `hoverLift` — translateY(-3px). No scale.
- `floatSlow` — orbs only, 10–14s
- `dotPulse` — live dots, 2s

Reduced motion gets instant states.

### Don't

- Don't bounce, spin, or scale a card on hover.
- Don't animate opacity during the theme change.

## Components

**Buttons.** Two ranks. Primary is the gradient pill (16×40 padding, 15px, weight 600, rose glow). Secondary is a hairline ghost pill. Compact (10×18) is for nav and banners. There is no third button.

**Cards.** `--bg-card`, 1px border, 20px radius, soft shadow. Member card: flag, first name, city. Voice card: the sentence, then the name.

**Eyebrow.** Rose micro-label, 40px hairline at 40% opacity, muted meta.

## Patterns

- **Stats** sit on a hairline under the hero. Numerals may use the gradient. Labels are 11px uppercase muted.
- **Invitation banner** is the gradient at 24px radius and about 36×40 padding. One promise, one action. The full-bleed closer uses 32px radius and about 80×64 padding.
- **Nav** is a translucent blurred bar. Links 14px / 500. The conversion link is rose. Theme toggle is a 44×24 pill; the knob slides on the standard easing.
- **Ticker** is a full-bleed tinted strip of real member lines: what they do, then an em dash, then the city in Off Red.
- **Atmosphere** is Abstract Liquid: two or three blurred orbs, pointer-events none, low opacity. That is the only decoration.

## Accessibility

Body text is `#555` on white, or light text on `#0D0D12`. Both clear AA.
Muted `#999` is for non-essential meta only.
Rose text under 18px uses `#C73D60`.
Focus is a 2px Off Red outline with 3px offset.
Support `prefers-reduced-motion`.

## For an agent

1. Load `tokens.css` and set `data-theme`.
2. Use the mark SVG. Do not trace a new one.
3. One gradient, two buttons, Helvetica Neue, four logo grounds.
4. If a choice is not in this file, do not add it. Ask.