DESIGN.md · measured November 5, 2026

Exposure design system

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.

#0A0A0A
#FFFFFF
#FF3636
#470305

Download DESIGN.md

From exposure.gg ↗ · 215 elements at 1440×900 and 390×844 Independent analysis, not affiliated with Exposure

Exposure color palette

10 colors with hex codes, grouped by where each one is used on the page.

Surfaces

Near Black#0A0A0Abackground · --color-bgPage background · 4×

White 5%#FFFFFF0DoverlayTranslucent fill for cards and controls · 4×

Text

White#FFFFFFon-surface · --tw-ring-offset-colorPrimary text and headings · 46×

Gray#A3A3A3on-surface-variantSecondary text · 27×

Gray#9E9E9Eon-surface-muted · --unframer-lighty-whiteyMuted text and metadata · 4×

Gray#9D9D9Don-surface-subtleSubtle text and placeholders · 4×

White#FFFFFFon-primaryText and icons on primary

Accents

Vivid Red#FF3636primaryPrimary buttons and calls to action · 3×

Deep Red#470305secondaryAccent in logos and imagery

Borders

White 10%#FFFFFF1AoutlineBorders and dividers · 1×

Gradients

Exposure fonts and type scale

2 families.

AaPlus Jakarta SansWeights 400, 500, 600Plus Jakarta Sans, Plus Jakarta Sans Fallback, system-ui, sans-serif

Aasans-serifWeights 400sans-serif

headline-displayPage title (h1)Exposure60px · 500 · 0.95 · -0.063em
mobile 36px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog52px · 500 · 1.1 · -0.02em
mobile 30px

headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog20px · 600 · 1.2 · -0.05em

body-mdBody textThe quick brown fox jumps over the lazy dog18px · 600 · 1 · -0.03em

body-smSecondary and small textThe quick brown fox jumps over the lazy dog12px · 400

label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog16px · 400 · 1.5

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog14px · 500 · 1.5 · -0.02em

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog10px · 600 · 1.4 · -0.02em

Contrast

Text on #0A0A0A

AaAAA19.8:1

AaAAA7.8:1

AaAAA7.3:1

Spacing

No strict grid · 50% are multiples of 4px

xs4px

sm7.8px

md16px

lg20px

xl40px

gutter16px

section80px

margin20px

Breakpoints: 768px

Shapes

Corner radii, most used first.

xl16px · 16×

xs4px · 12×

md8px · 8×

sm6px · 4×

lg11px · 4×

Depth

Shadow

Exposure UI components

Rebuilt from the measured CSS.

Book a Call Book a Call

button-primaryFilled button

How can I launch my campaign

button-ghostText button

Card

cardCard

Inline link

linkInline link

Motion

Interface transitions

0.3s0.2s

cubic-bezier(0.23, 1, 0.32, 1)cubic-bezier(0.2, 0.8, 0.2, 1)

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

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

Exposure DESIGN.md208 lines

---
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).

Fonts

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.

AaPlus Jakarta Sans · 400, 500, 600
Aasans-serif · 400

Find every font on exposure.gg with Font finder →

Colors

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

Get exposure.gg’s palette as CSS or Tailwind with Colors →

Tech stack

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

Check exposure.gg live with Tech stack →

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need a page behind a login?

The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.

See the Chrome extension

More designs

Brand examples →

Aovix aovix.framer.website · Google Sans Flex

Design Monks designmonks.co · Redhatdisplay Variablefont Wght

CRAV Burgers cravburgers.shop · Mouse Memoirs

RaycastBrand raycast.com · Inter

RedisBrand redis.io · primaryFont

RemixBrand remix.run · Inter

Another site? Make a DESIGN.md from any link.

FAQ

Exposure design system questions

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.