Swoosh Bold

Swoosh Bold is a high-energy athletic design system inspired by the world's most iconic sports brand. It is unapologetically bold — dominated by stark black-and-white contrast with explosive accent colors that ignite like a sprinter off the blocks. The aesthetic channels aspiration and motion: oversized typography, full-bleed imagery of athletes in action, and an interface that feels like it is always leaning forward. This is design that doesn't whisper — it commands.

Primary#111111
Secondary#FA5400
Neutral#707072
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

labels/metaInter · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

filters/small bodyInter · 14px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyInter · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

product titles/navJost · 16px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

section headingsJost · 24px · Black

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

category titlesJost · 36px · Black

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

featured headlinesJost · 48px · Black

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

campaign heroJost · 72-120px · Black

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

Swoosh Bold is a high-energy athletic design system inspired by the world's most iconic sports brand. It is unapologetically bold — dominated by stark black-and-white contrast with explosive accent colors that ignite like a sprinter off the blocks. The aesthetic channels aspiration and motion: oversized typography, full-bleed imagery of athletes in action, and an interface that feels like it is always leaning forward. This is design that doesn't whisper — it commands.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

DefaultActiveSale

Elevation & Depth

Hover Product Card
Sticky Navigation
Modal

Do's & Don'ts

Do

Do use Jost at 900 weight uppercase for all campaign headlines — boldness is the brand DNA
Do use stark black-on-white contrast as the default — this brand does not do subtle
Do use full-bleed hero imagery with overlaid text — athletes in motion define the brand story
Do keep product grids tight (4px gap on desktop) — density conveys abundance and energy
Do use #FA5400 orange exclusively for sale and urgency moments — it signals 'act now'

Don't

Don't use rounded corners on product imagery — square crops keep the grid sharp and athletic
Don't use light font weights for headlines — nothing below 700 for Jost display type
Don't animate with ease-in-out — use ease-out with 200ms duration for snappy, athletic motion
Don't use the volt/neon green (#CDFC41) as a primary color — it is a limited seasonal accent only
Don't clutter product cards with badges — one label maximum ('Just In' or 'Best Seller', never both)
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 8.0 KB
Downloads 62
Copies 13
athletic bold ecommerce modern

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/swoosh-bold and implement it in my code

Don't have the MCP? Install it here