# Exposure design system

> Exposure design system measured from exposure.gg: Plus Jakarta Sans font, #FF3636 primary, 10 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/exposure.gg/

Exposure’s website (exposure.gg) uses the Plus Jakarta Sans font and #FF3636 as its main color on a #0A0A0A background. Measured by Sitepeel on November 5, 2026.

## What font does Exposure use?

Exposure uses Plus Jakarta Sans (weights 400, 500 and 600) on exposure.gg. Page titles are 60px at weight 500 (36px on phones) and body text is 18px. Measured on November 5, 2026.

- Plus Jakarta Sans (weights 400, 500, 600)
- sans-serif (weights 400)

## Exposure colors: palette and hex codes

Exposure’s main colors are #0A0A0A (near black) for the background, #FFFFFF (white) for text and #FF3636 (vivid red) as the main accent, with #470305 (deep red) as another accent. Measured on November 5, 2026.

- #0A0A0A: near black
- #FFFFFF: white
- #A3A3A3: gray
- #9E9E9E: gray
- #9D9D9D: gray
- #FF3636: vivid red
- #470305: deep red

## What is Exposure built with?

Exposure’s website (exposure.gg) is built with Framer, Next.js, React, Tailwind CSS and Railway. Measured on November 5, 2026.

- JavaScript framework: Next.js 16.2.7, React 19.3.0-canary-3f0b9e61-2
- Animation & 3D: Lenis 1.3.23, Motion
- Hosting & CDN: Railway
- Site builder & CMS: Framer
- UI & CSS: Tailwind CSS 4.x

## Questions and answers

### What font does Exposure use?

Exposure’s website uses Plus Jakarta Sans (weights 400, 500 and 600). Page titles are 60px at weight 500 (36px on phones) and body text is 18px. Measured on November 5, 2026.

### What are the Exposure colors and hex codes?

On exposure.gg: #0A0A0A (near black) for the background, #FFFFFF (white) for text and #FF3636 (vivid red) as the main accent, with #470305 (deep red) as another accent. The color palette above lists all 10 colors with their hex codes and where each one is used.

### What is the Exposure design system?

The design system on this page is exposure.gg’s, as measured on November 5, 2026: Plus Jakarta Sans type, #FF3636 as the main color and 16px corners, written down as a DESIGN.md. It is not Exposure’s own documentation.

### What is Exposure built with?

Exposure’s website (exposure.gg) is built with Framer, Next.js, React, Tailwind CSS and Railway. The full tech stack Sitepeel found: Next.js, React, Lenis, Railway, Framer, Tailwind CSS and Motion. Measured on November 5, 2026.

### What is the Exposure DESIGN.md?

A plain-text file with Exposure’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Exposure’s official design system?

No. Sitepeel measured it from exposure.gg’s public page on November 5, 2026. It is an independent analysis, not made or approved by Exposure.

### Can I use Exposure’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Exposure’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/exposure.gg/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Exposure.

## The DESIGN.md file

```markdown
---
version: alpha
name: Exposure
description: "Dark interface measured from exposure.gg: Plus Jakarta Sans type with sans-serif, vivid red accents, flat surfaces and 16px corners."
colors:
  background: "#0A0A0A"
  surface: "#0A0A0A"
  on-surface: "#FFFFFF"
  on-background: "#FFFFFF"
  on-surface-variant: "#A3A3A3"
  on-surface-muted: "#9E9E9E"
  on-surface-subtle: "#9D9D9D"
  overlay: "#FFFFFF0D"
  outline: "#FFFFFF1A"
  primary: "#FF3636"
  on-primary: "#FFFFFF"
  secondary: "#470305"
typography:
  headline-display:
    fontFamily: Plus Jakarta Sans
    fontSize: 60px
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: -0.063em
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.05em
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.03em
  body-sm:
    fontFamily: sans-serif
    fontSize: 12px
    fontWeight: 400
  label-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.02em
  label-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.02em
  headline-display-mobile:
    fontFamily: Plus Jakarta Sans
    fontSize: 36px
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: -0.063em
  headline-lg-mobile:
    fontFamily: Plus Jakarta Sans
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.02em
rounded:
  xs: 4px
  sm: 6px
  md: 8px
  lg: 11px
  xl: 16px
spacing:
  xs: 4px
  sm: 7.8px
  md: 16px
  lg: 20px
  xl: 40px
  gutter: 16px
  section: 80px
  margin: 20px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: 9px 13px
    height: 35px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: 0px
    padding: 20px 0px
  card:
    backgroundColor: "{colors.overlay}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xl}"
    padding: 48px 40px
  link:
    textColor: "{colors.on-surface}"
---

# Exposure Design System

## Overview

Exposure describes itself as: “Instead of burning money on ads, we help brands grow through organic content that lasts and scales using our network of 6,000+ creators.” The interface is dark, built on **Near Black (#0A0A0A)** with **White (#FFFFFF)** text, and **Vivid Red (#FF3636)** as the main accent.

Type is set in **Plus Jakarta Sans** and **sans-serif**. Headlines run large with tight negative tracking; body text is 18px. Depth comes from soft drop shadows. Corners are mostly 16px.

Measured from [exposure.gg](https://exposure.gg/) on November 5, 2026 at 1440×900 and 390×844 from 215 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 10 roles, plus gradient stops #FF4E4E, #E41717, #ED0000, #FF3636.

- **Near Black (#0A0A0A):** Page background, seen 4 times. Token `background`, CSS `--color-bg`.
- **White (#FFFFFF):** Primary text and headings, seen 46 times. Token `on-surface`, CSS `--tw-ring-offset-color`.
- **Gray (#A3A3A3):** Secondary text, seen 27 times. Token `on-surface-variant`.
- **Gray (#9E9E9E):** Muted text and metadata, seen 4 times. Token `on-surface-muted`, CSS `--unframer-lighty-whitey`.
- **Gray (#9D9D9D):** Subtle text and placeholders, seen 4 times. Token `on-surface-subtle`.
- **White 5% (#FFFFFF0D):** Translucent fill for cards and controls, seen 4 times. Token `overlay`.
- **White 10% (#FFFFFF1A):** Borders and dividers, seen 1 time. Token `outline`.
- **Vivid Red (#FF3636):** Primary buttons and calls to action, seen 3 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Deep Red (#470305):** Accent in logos and imagery. Token `secondary`.

## Typography

**Plus Jakarta Sans** and **sans-serif** share the interface. Fallback stack: `Plus Jakarta Sans, Plus Jakarta Sans Fallback, system-ui, sans-serif`. Other loaded fonts: Inter, Figtree, Plus Jakarta Sans Variable.

- **headline-display:** Plus Jakarta Sans 60px at weight 500, line height 0.95, tracking -0.063em (36px on mobile). Page title (h1).
- **headline-lg:** Plus Jakarta Sans 52px at weight 500, line height 1.1, tracking -0.02em (30px on mobile). Section headings (h2).
- **headline-md:** Plus Jakarta Sans 20px at weight 600, line height 1.2, tracking -0.05em. Sub-section headings.
- **body-md:** Plus Jakarta Sans 18px at weight 600, line height 1, tracking -0.03em. Body text.
- **body-sm:** sans-serif 12px at weight 400. Secondary and small text.
- **label-lg:** Plus Jakarta Sans 16px at weight 400, line height 1.5. Large buttons and tabs.
- **label-md:** Plus Jakarta Sans 14px at weight 500, line height 1.5, tracking -0.02em. Buttons, navigation and labels.
- **label-sm:** Plus Jakarta Sans 10px at weight 600, line height 1.4, tracking -0.02em. Small labels and badges.

## Layout

Spacing does not follow a strict grid: 50% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 4px, sm 7.8px, md 16px, lg 20px, xl 40px.
- **Sections:** 80px vertical padding between major sections.
- **Gaps:** 16px is the most common gap in flex and grid layouts.
- **Page margin:** 20px on each side of full-width sections.
- **Breakpoints:** 768px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0.08) 0px 4px 24px 0px`
- `rgba(0, 0, 0, 0.15) 0px 0.706592px 0.706592px -0.625px, rgba(0, 0, 0, 0.14) 0px 1.80656px 1.80656px -1.25px, rgba(0, 0, 0, 0.14) 0px 3.62176px 3.62176px -1.875px, rgba(0, 0, 0, 0.13) 0px 6.8656px 6.8656px -2.5px, rgba(0, 0, 0, 0.1) 0px 13.6468px 13.6468px -3.125px, rgba(0, 0, 0, 0.05) 0px 30px 30px -3.75px`
- `rgba(0, 0, 0, 0.22) 0px 2px 8px 0px, rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset`

## Shapes

Most elements use 16px corners. Measured radii, most used first:

- **xl (16px):** 16 elements.
- **xs (4px):** 12 elements.
- **md (8px):** 8 elements.
- **sm (6px):** 4 elements.
- **lg (11px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Book a Call Book a Call”):** #FF3636 fill, #FFFFFF text, 12px/400, 6px radius, padding 9px 13px, shadow `rgba(0, 0, 0, 0.15) 0px 0.706592px 0.706592px -0.625px, rgba(0, 0, 0, 0.14) 0px 1.80656px 1.80656px -1.25px, rgba(0, 0, 0, 0.14) 0px 3.62176px 3.62176px -1.875px, rgba(0, 0, 0, 0.13) 0px 6.8656px 6.8656px -2.5px, rgba(0, 0, 0, 0.1) 0px 13.6468px 13.6468px -3.125px, rgba(0, 0, 0, 0.05) 0px 30px 30px -3.75px`.
- **button-ghost (“How can I launch my campaign?”):** transparent fill, #FFFFFF text, 16px/400, padding 20px 0px.
- **card:** #FFFFFF0D fill, #FFFFFF text, 12px/400, 16px radius, padding 48px 40px, shadow `rgba(0, 0, 0, 0.08) 0px 4px 24px 0px`.
- **link:** transparent fill, #FFFFFF text, padding 0px.

## Do's and Don'ts

- Do use #0A0A0A for the page.
- Do keep text in 4 levels: #FFFFFF, #A3A3A3, #9E9E9E, #9D9D9D.
- Do reserve #FF3636 for primary actions and key highlights.
- Do set headlines in Plus Jakarta Sans with tight tracking (-0.063em).
- Do reuse the measured spacing steps (7.8px, 16px, 20px).
- Do use 16px corners on most elements; larger surfaces also use 4px, 8px and 6px.
- Don't introduce new font families beyond Plus Jakarta Sans and sans-serif.
- Don't use #FF3636 for large backgrounds or body text.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.3s, 0.2s.

- **Easing:** `cubic-bezier(0.23, 1, 0.32, 1)`, `cubic-bezier(0.2, 0.8, 0.2, 1)`, `cubic-bezier(0.4, 0, 0.2, 1)`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/exposure.gg/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```