---
version: alpha
name: Mojo Studio
description: Playful French content-agency energy — oversized editorial display type set against a near-black canvas, a single hot accent (electric lime), full-bleed video reels, and rotating marquee descriptors that turn the brand's personality into kinetic typography.
colors:
  # Canvas + ink
  background: "#0e0e0e"
  surface: "#161616"
  surface-soft: "#1e1e1e"
  ink: "#f5f3ee"
  ink-secondary: "#a8a59d"
  ink-muted: "#6e6b64"

  # Accent — electric lime, the single brand pop
  primary: "#d4ff3f"
  accent-hover: "#c2f024"
  accent-press: "#aede12"

  # Light inverse section
  paper: "#f5f3ee"
  paper-ink: "#0e0e0e"
  paper-muted: "#6e6b64"

  # Lines + chrome
  border: "#2a2a2a"
  border-soft: "#1f1f1f"
  divider: "#333330"

  # On-color
  on-primary: "#0e0e0e"
  on-ink: "#0e0e0e"
  on-surface: "#f5f3ee"

  # Status / category tints (editorial labels)
  tag-bg: "#1e1e1e"
  tag-text: "#d4ff3f"

typography:
  display-hero:
    fontFamily: "Anton, Impact, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -1px
  display-large:
    fontFamily: "Anton, Impact, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -0.5px
  section-heading:
    fontFamily: "Anton, Impact, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  marquee:
    fontFamily: "Anton, Impact, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  card-title:
    fontFamily: "Space Grotesk, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Space Grotesk, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Space Grotesk, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Space Grotesk, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Space Grotesk, Helvetica, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1px
  caption:
    fontFamily: "Space Grotesk, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.5px
  index-number:
    fontFamily: "Space Grotesk, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.primary}"

  tag:
    backgroundColor: "{colors.tag-bg}"
    textColor: "{colors.tag-text}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  card-project:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.border-soft}"

  card-title-block:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    padding: 24px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 20px 40px
    borderColor: "{colors.border-soft}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 14px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

  player-control:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
    borderColor: "{colors.border}"

  section-inverse:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.paper-ink}"
    rounded: "{rounded.none}"
    padding: 96px 40px
---

# Mojo Studio Design System

## Overview

Mojo Studio is a French content-creation agency, and its site behaves like a showreel that learned to be a website. The canvas is a deep near-black (`{colors.background}`) that lets full-bleed video play as the real hero — design recedes so the work can shout. Against that darkness, one electric-lime accent (`{colors.primary}`) does all the talking: it marks the play button, the primary CTA, the active link, and the category tags. There is exactly one bright color in the system, and restraint is what makes it loud.

The typographic identity is a deliberate two-voice split. Headlines are set in a heavy condensed display face (Anton as the closest Google match to the brand's compressed Impact-style cuts) at enormous sizes with tight line-height under 1.0, so words stack like poster lettering. Running text and UI use Space Grotesk, a geometric grotesque with just enough quirk (the distinctive `a` and `g`) to stay playful without competing with the display layer. The contrast between a brutal display headline and a clean grotesque body is the whole personality: bold but legible, agency-cool but warm.

The signature kinetic move is the rotating marquee — the descriptors "Éclairée / Créative / Indépendante" repeat and scroll horizontally, turning the agency's self-description into motion typography. Project work is presented as a numbered editorial index (01–05) with category labels (Publicité, TV, Social media, Retail, Beauty, Brand content) rather than a generic grid, framing the studio as a curated reel. A persistent player control (pause/play, sound on/off, a 00:00 timer) sits over the reel, reminding you this is a video-first brand.

The off-white ink (`{colors.ink}`, a warm `#f5f3ee` rather than pure white) keeps the dark canvas from feeling clinical, and an inverse paper section flips the whole palette for contrast moments. The result reads as confident, contemporary French agency work: dark, kinetic, type-forward, with one unforgettable green.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) as a stage for full-bleed video reels
- A single electric-lime accent (`{colors.primary}`) for every interactive and brand pop — restraint makes it loud
- Two-voice type: heavy condensed display (Anton) for poster headlines, Space Grotesk for body/UI
- Display headlines at 72–96px with sub-1.0 line-height — words stack like poster lettering
- Rotating horizontal marquee that animates the brand's descriptors
- Numbered editorial project index (01–05) with category labels, not a generic card grid
- Warm off-white ink (`#f5f3ee`) so the dark never feels clinical
- Pill-shaped buttons and tags; a persistent video player control over the reel

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Deep near-black page canvas — the stage for video.
- **Surface** (`{colors.surface}`): Cards, panels, player chrome — one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Hover surfaces, control fills.
- **Ink** (`{colors.ink}`): Primary text, headings — warm off-white, not pure white.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled.

### Accent
- **Mojo Lime** (`{colors.primary}`): The one bright color — CTAs, play button, active states, tag text.
- **Accent Hover** (`{colors.accent-hover}`): Hover state for lime CTAs.
- **Accent Press** (`{colors.accent-press}`): Pressed state.

### Inverse Section
- **Paper** (`{colors.paper}`): Light inverse-section background.
- **Paper Ink** (`{colors.paper-ink}`): Text on the paper section.
- **Paper Muted** (`{colors.paper-muted}`): Secondary text on paper.

### Lines & Chrome
- **Border** (`{colors.border}`): Standard hairlines on dark surfaces.
- **Border Soft** (`{colors.border-soft}`): Whisper dividers between sections.
- **Divider** (`{colors.divider}`): Index row separators.

### On-Color
- **On Primary** (`{colors.on-primary}`): Near-black text on the lime fill (the only readable choice).
- **On Surface** (`{colors.on-surface}`): Off-white text on surfaces.

## Typography

### Font Family
- **Display**: `Anton` (condensed heavy poster face), fallbacks `Impact, sans-serif`
- **Text / UI**: `Space Grotesk`, fallbacks `Helvetica, sans-serif`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 96px hero — full poster impact |
| `display-large` | Large section openers |
| `section-heading` | Section titles |
| `marquee` | Scrolling descriptor band |
| `card-title` | Project / card headings (Space Grotesk) |
| `body-large` | Intros, lead copy |
| `body` | Standard reading text |
| `body-medium` | Buttons, nav, emphasized UI |
| `label` | Category tags, eyebrows (tracked, often uppercase) |
| `caption` | Metadata, player timer |
| `index-number` | Numbered project index (01–05) |

### Principles
- **Two voices, no blending**: Anton announces, Space Grotesk explains. Never set body in Anton or headlines in Grotesk.
- **Sub-1.0 line-height on display**: Headlines stack tight (0.92–1.0) so multi-line titles read as poster blocks.
- **Tracking on small labels only**: Category tags and eyebrows get +1px letter-spacing; body stays at 0.
- **Warm ink over cold white**: Always `{colors.ink}` (`#f5f3ee`) for text on dark, never pure `#ffffff`.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px; sections breathe with `{spacing.3xl}`–`{spacing.4xl}` vertical padding.

### Grid & Container
- Full-bleed video reels run edge-to-edge, breaking the content container
- Project index is a vertical stack of full-width rows with index number + title + category, divided by `{colors.divider}`
- Max readable content width ~1200px; the reel ignores it
- Generous top padding under a thin nav bar

### Whitespace Philosophy
- **Darkness is negative space**: The black canvas does the work white space does elsewhere — elements float in it.
- **Motion fills the void**: The rotating marquee and playing video keep the dark canvas alive rather than empty.
- **One accent, lots of room**: Lime appears sparingly with plenty of black around it so it always reads as the focal point.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed video, inverse sections |
| `sm` | 4px | Small inline elements |
| `md` | 8px | Inputs, small cards |
| `lg` | 16px | Project cards, panels |
| `pill` | 9999px | Buttons, tags, player controls |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.tag}`).

### Buttons
- **`button-primary`** — Lime fill, near-black text, full pill. The single loud CTA.
- **`button-ghost`** — Transparent on canvas with a `{colors.border}` outline; hover turns the border and text lime.

### Tags
- **`tag`** — Dark pill with lime text for category labels (Publicité, TV, Social media, Retail, Beauty, Brand content).

### Cards
- **`card-project`** — Surface panel, `{rounded.lg}`, holds a video thumbnail with a title block beneath.

### Navigation
- **`nav-bar`** — Thin dark header, off-white links, lime active state, hairline bottom border.

### Inputs
- **`input`** — Surface fill with `{colors.border}` outline; focus turns the border lime.

### Distinctive Components
- **Player Control** — Persistent pill with pause/play, sound toggle, and a 00:00 timer over the reel.
- **Marquee Band** — Horizontally scrolling Anton descriptors ("Éclairée / Créative / Indépendante").
- **Project Index** — Numbered (01–05) full-width editorial rows, divider-separated, category-tagged.

## Do's and Don'ts

### Do
- Keep one bright accent — `{colors.primary}` lime — and use it sparingly
- Use Anton for headlines at large sizes with sub-1.0 line-height
- Pair display headlines with Space Grotesk body, never blend
- Use warm off-white `{colors.ink}` for text, not pure white
- Let video run full-bleed and put a player control over it
- Use near-black text on the lime fill — never white-on-lime

### Don't
- Don't introduce a second bright color — the system lives or dies on the single lime
- Don't set body copy in Anton or headlines in Space Grotesk
- Don't use pure `#ffffff` text on the dark canvas
- Don't put light text on the lime accent (contrast fails) — use `{colors.on-primary}`
- Don't add positive tracking to body text — reserve tracking for small labels
- Don't box video in heavy borders — let it run edge-to-edge

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display drops to ~48px, marquee speeds simplified |
| Tablet | 600–1024px | Index rows stack tighter, nav collapses to menu |
| Desktop | 1024–1440px | Full layout, full-bleed reels |
| Large | >1440px | Centered content, reel still edge-to-edge |

### Touch Targets
- Pill buttons keep 14px vertical padding for comfortable taps
- Player controls enlarge on touch
- Index rows are fully tappable

### Collapsing Strategy
- Display hero: 96px → ~48px on mobile, line-height held tight
- Nav: horizontal links → hamburger
- Project index: full-width rows persist, category tags wrap below title on mobile
- Marquee: continues scrolling, fewer simultaneous words visible

---

## Agent Prompt Guide

### Quick Color Reference
- Background: near-black `{colors.background}`
- Heading text: warm off-white `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Primary CTA: lime `{colors.primary}` with near-black text `{colors.on-primary}`
- Tags: dark pill `{colors.tag-bg}` with lime text `{colors.tag-text}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline in Anton 96px, line-height 0.92, color `{colors.ink}`, stacked over a full-bleed muted video. A lime pill CTA (`{colors.primary}` fill, `{colors.on-primary}` text, 9999px radius, 14px 28px padding)."
- "Build a project index row: index number in Space Grotesk 14px, title in Space Grotesk 24px weight 600, a dark lime-text category pill (`{colors.tag-bg}` / `{colors.tag-text}`), separated by a `{colors.divider}` hairline."
- "Design a scrolling marquee band: Anton 40px, color `{colors.ink}`, descriptors separated by lime slashes (`{colors.primary}`), animating horizontally."
- "Make a video player control: dark pill (`{colors.surface-soft}`), off-white pause/play + sound icons, a 00:00 timer in Space Grotesk 12px."

### Iteration Guide
1. One accent only — lime is the whole personality; resist a second bright color
2. Anton announces, Space Grotesk explains — keep the two type voices strictly separated
3. Display line-height stays under 1.0 so headlines read as poster blocks
4. Text is warm off-white `{colors.ink}`, never pure white
5. Near-black text on lime fills — never the reverse
6. Let video run full-bleed; design recedes so the work leads

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Mojo Studio. Brand names and trademarks belong to their respective owners.