Lime Pulse
#b7ff2cGreen action color for filled buttons, selected navigation states, and focused conversion moments
Home
swoosh.nike
Website preview
The design language
Swoosh operates as a midnight arena console: nearly all-black canvas (#111111), a single electric lime accent (#b7ff2c) that carries every interaction, and oversized compressed display type (110px at 0.85 line-height) that functions like tournament signage rather than web copy. The system is intentionally austere — only one chromatic hue exists, and it appears exclusively on filled CTA buttons and as thin chromatic action borders, so lime reads as 'switched on' against the dark. Photography is full-bleed and moody, often overlaid with white or near-white cards that float on the image, creating a poster-like layering where editorial typography and photography alternate. The custom Font Roobert carries the voice at every scale — its compressed display weights are signature, while a 6px radius across buttons, cards, nav, and image containers gives the system a uniform sharpness that feels engineered, not soft.
Color palette
brand
neutral
Midnight Canvas
#111111Page background, hero canvas, nav surface, body base — the structural floor everything else sits on
Card Charcoal
#1f1f21Elevated card surface, modal background, panel base — one step above Midnight Canvas for layered containers
Card Border Ink
#28282aCard perimeter borders — a barely-visible outline that defines containers without breaking the monochrome
Footer Rule
#39393bFooter top border, structural dividers between page regions
Steel Border
#707072Card outline borders, image frame edges — medium-contrast neutral for visible-but-quiet separation
Fog Border
#e5e5e5Light-mode hairline borders, text/heading underline rules, icon strokes — appears in inverted contexts (white cards, light surfaces)
Pure White
#ffffffLight text on dark surfaces, inverse labels, and high-contrast captions. Do not promote it to the primary CTA color
Carbon Black
#000000Primary headings, body text, and icon fills on light surfaces. Do not promote it to the primary CTA color
Typography
Type scale
Minor Third (1.2) · 18px basedisplay
110px · 700 · 0.85The quick brown fox jumps
heading-lg
64px · 700 · 1The quick brown fox jumps
heading-sm
24px · 500 · 1.2The quick brown fox jumps
subheading
20px · 500 · 1.4The quick brown fox jumps
body
16px · 400 · 1.5The quick brown fox jumps
body-sm
14px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Font Roobert
- Weights
- 400, 500, 700
- Sizes
- 14, 16, 20, 24, 64, 110
- Line height
- 0.85 (display), 1.00 (heading-lg), 1.20 (heading-sm), 1.40 (subheading), 1.50 (body, body-sm)
- Fallback
- Inter (close), Satoshi, General Sans, Neue Haas Grotesk Display
Primary brand typeface across all contexts — nav, body, headings, display. The custom font's compressed, geometric construction at 110px / 0.85 line-height creates the poster-scale headlines; its 400/500/700 range covers body through display without needing a second family. The extreme compression in display weights is signature — line-height under 1.0 makes headlines overlap slightly, producing a stacked, aggressive tournament-poster feel that system sans-serifs cannot replicate.
Additional typeface
ui-sans-serif
- Weights
- 400, 500, 700
- Sizes
- 14, 16
- Line height
- 1.20, 1.50
- Fallback
- system-ui, -apple-system, Segoe UI, Roboto
System fallback for generic UI elements where custom font loading isn't needed — secondary links, inline labels, small helper copy. Same weight range as Roobert to ensure graceful degradation.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1440px
- Section gap
- 48-64px
- Card padding
- 20-24px
- Element gap
- 16-20px
Border radius
nav
6pxcards
6pximages
6pxmodals
6pxbuttons
6pxSpacing scale
4px6px8px10px12px14px16px18px20px24px28px32px36px48px96px128px144px288pxGuidelines
Do
- Use #b7ff2c only for filled CTA buttons, ghost action borders, and active/checked states — never for body text, decorative backgrounds, or large surfaces
- Apply 6px border-radius to every container — buttons, cards, nav, modals, images — for uniform sharpness
- Set display headlines to 110px Roobert 700 with line-height 0.85; the sub-1.0 leading is the signature compression
- Use #111111 as the default page background and #1f1f21 as a one-step elevation for cards and modals
- Pair full-bleed dark photography with Pure White (#ffffff) floating cards to create poster-style layering
- Use #e5e5e5 borders only in inverted (white surface) contexts; on dark surfaces, use #28282a or #707072 instead
- Set body text to 16px Roobert 400, line-height 1.50, Pure White on dark surfaces
Don’t
- Don't introduce any second chromatic color — the system is monochrome plus one lime; adding blue, red, or any hue breaks the signal
- Don't use 0px or 12px+ border-radius — the 6px radius is the system's sharp-but-not-harsh identity
- Don't set display headlines to line-height 1.2 or higher — the 0.85-1.00 compression is what makes the type feel like signage
- Don't use drop shadows beyond the nav bar's 2px blur — the flatness is intentional
- Don't apply lime (#b7ff2c) to headings, subheadings, or body text — it is action-only
- Don't use #e5e5e5 for borders on dark surfaces — it's too bright; reserve it for white-card contexts
- Don't place buttons or cards directly on photography without a surface container — floating cards need their white or charcoal background to read
Components
Primary CTA Button
Filled action triggerLime Pulse (#b7ff2c) background, Carbon Black (#000000) text, 6px border-radius, 16px vertical / 20px horizontal padding, Font Roobert 500 at 16px, line-height 1.20. Border 1px solid #b7ff2c matching the fill. The single most saturated element on any page — it must feel electrically switched on.
Ghost Navigation Button
Outlined action in nav1px Lime Pulse border, #b7ff2c text, 6px radius, compact 8px vertical / 20px horizontal padding, Font Roobert 500 at 14px. Used for SIGN IN — the border-only treatment lets it coexist with filled CTAs in the same nav without competing.
Navigation Bar
Top-level site navigationFull-width Midnight Canvas (#111111) bar, 6px container radius, 6px/24px padding, contains swoosh logo mark, text nav links in Pure White (16px Roobert 500), and the Ghost Navigation Button on the right. Subtle 0px 2px 6px rgba(17,17,17,0.125) shadow anchors it without a hard divider.
Hero Headline
Full-bleed opening displayFont Roobert 700 at 110px, line-height 0.85, Pure White (#ffffff), left-aligned, overlaid on a full-bleed dark photograph. The extreme compression stacks the type into a block of visual mass that reads as event signage. A 20px subhead in Roobert 400 at 20px line-height 1.40 follows below.
White Floating Card
Inverted text container over imageryPure White (#ffffff) background, 6px radius, 20-24px padding, contains a heading-sm (24px / 1.20) in Carbon Black and body (16px / 1.50) in Carbon Black. Floats over full-bleed dark photography to create a magazine-cover layering effect.
Dark Card
Elevated content panelCard Charcoal (#1f1f21) background, 1px Card Border Ink (#28282a) border, 6px radius, 20px padding. Sits one step above the Midnight Canvas — subtle enough to feel like the same surface, defined enough to contain content blocks.
Cookie Settings Modal
Overlay preference panelCard Charcoal (#1f1f21) background, 6px radius, 24px padding, 1px Card Border Ink border. Heading in Pure White, body copy in Pure White at 16px / 1.50, checkbox controls with Lime Pulse check state, and a Primary CTA Button anchored at the bottom.
Marquee Display Section
Scrolling oversized headlineCenter-aligned Font Roobert 700 at 64-110px, line-height 1.00-0.85, Pure White on Midnight Canvas. Used for statements like '.SWOOSH IS NIKE'S HOME FOR GAMING' — the massive scale and compressed leading create a billboard rhythm as the text moves.
Section Heading Pair
Scrolling editorial headline + captionLarge Pure White display line (64-110px Roobert 700) centered, with a small uppercase or sentence-case caption above or below at 14-16px Roobert 500. Creates a tournament-announcement rhythm across the page.
Image Card
Photo or render container6px radius, full-bleed within its container, 1px Steel Border (#707072) or no border depending on context. Frequently overlapped by White Floating Cards or paired with overlay text. Photography is moody, high-contrast, and cropped tight — the object or person IS the content.
Footer
Bottom structural regionMidnight Canvas background, 1px Footer Rule (#39393b) top border, small-text links in Pure White at 14px / 1.50, generous vertical padding (48-64px). Minimal — no heavy card treatments or imagery.
Surfaces & elevation
Level 0
Midnight Canvas
#111111Page base, hero backgrounds, full-bleed sections
Level 1
Card Charcoal
#1f1f21Elevated cards, modals, content panels sitting on the canvas
Level 2
Inverted White
#ffffffFloating white cards on dark photography, inverted text panels
Elevation is intentionally minimal — the system relies on surface value shifts (#111111 → #1f1f21 → #ffffff) and 1px borders rather than drop shadows. The only shadow used site-wide is a barely-perceptible 2px blur on the nav bar, keeping the visual language flat and poster-like.
Navigation bar
0px 2px 6px 0px rgba(17, 17, 17, 0.125)
Layout & imagery
Layout
Full-bleed dark layout with no persistent max-width container — sections span edge to edge at 1440px viewport reference. Hero opens with a full-bleed photographic image and a left-aligned display headline overlaid at the bottom-left, with a lime CTA below it. Navigation is a fixed top bar with logo left, text links center, ghost CTA right. The page rhythm alternates between full-bleed dark image sections, centered marquee text sections (massive headlines on pure black), and split layouts where a White Floating Card sits on a dark photograph. Section gaps are generous (48-64px) to let the display type breathe. Content is predominantly centered or left-aligned — no asymmetric or grid-heavy compositions. A modal (cookie settings) anchors top-right and is the only non-full-width overlay.
Imagery
Photography is full-bleed, high-contrast, and moody — hands gripping game controllers, people in motion, arena environments, close crops of sneakers and game gear. Treatment is dark, slightly desaturated, with deep blacks that merge into the #111111 canvas. No lifestyle softness; subjects are staged with editorial intent, cropped tight so the object or gesture fills the frame. White text and white floating cards overlay directly on the photography without scrims, creating a magazine-cover or arena-poster layering. Iconography is minimal — the swoosh logo and small UI icons in Pure White. No illustrations, no 3D renders, no decorative graphics; the photography does all the atmospheric work.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff - background: #111111 - border (on dark): #28282a / #707072 - border (on white): #e5e5e5 - accent: #b7ff2c - primary action: #b7ff2c (filled action) **Example Component Prompts** 1. Create a Primary Action Button: #b7ff2c background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. *Primary CTA button*: 6px border-radius, 16px vertical padding, 20px horizontal padding, background #b7ff2c, 1px solid #b7ff2c border, text #000000 in Font Roobert 500 at 16px, line-height 1.20. No shadow. Single saturated element on the page — it must be the visual focal point. 3. *White floating card on dark photo*: Background #ffffff, 6px border-radius, 24px padding. Heading in Font Roobert 700 at 24px, line-height 1.20, color #000000. Body in Roobert 400 at 16px, line-height 1.50, color #000000. Floats over a full-bleed dark image with no scrim. 4. *Marquee display section*: Background #111111, centered headline in Font Roobert 700 at 110px, line-height 0.85, color #ffffff. No buttons, no images — just the type filling the viewport height. 5. *Navigation bar*: Full-width background #111111, 6px container radius, 16px/24px padding, subtle 0px 2px 6px rgba(17,17,17,0.125) shadow. Swoosh logo left, nav links in Roobert 500 at 16px color #ffffff, ghost SIGN IN button right (1px #b7ff2c border, #b7ff2c text, 6px radius, 8px/20px padding).
Gradient System
No gradients are used in the system. All color transitions are flat — surface value shifts (#111111 → #1f1f21 → #ffffff) and the single chromatic accent (#b7ff2c) provide all visual variation. Do not introduce linear or radial gradients; they would break the poster-flat aesthetic.
Similar brands
Adidas Confirmed
Same dark-mode + single neon accent pattern; both use drop announcements and full-bleed product photography with overlaid type
PlayStation Store
Dark gaming-platform aesthetic with bold compressed display type and full-bleed hero photography, though Swoosh is more restrained with a single lime vs PlayStation's blue gradients
Gucci Garden / Vault
Editorial poster layout with massive compressed headlines floating over full-bleed photography on dark backgrounds
Off-White / Virgil Abloh archive
Oversized compressed sans-serif headlines, quotation-mark typographic motifs, and high-contrast black-white-lime color logic in fashion/gaming crossover
Apple Arcade
Dark gaming-platform UI with prominent full-bleed imagery and display-scale typography, though Swoosh is more monochromatic with one accent
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
