A premium fitness apparel brand with an industrial, gym-focused aesthetic
02
Color
#000000Ink
#444444Ink soft
#FFFFFFBG
#F5F5F5BG soft
#E7E7E7BG quiet
#6E6E6EMuted
rgba(0, 0, 0, 0.1)Line
Monochromatic core with photographic vibrancy providing the primary visual interest
03
Typography
condensed-sans · humanist-sans
display56px · 700
body16px · 400
label14px · 500
Uppercase text is used exclusively for display headers and category navigation · Body text maintains a neutral, highly legible weight for product descriptions
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
8px base grid with generous whitespace around major UI components
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Minimal, using hairline 1px borders primarily for interactive element definition
rgba(0, 0, 0, 0.1) 0px 4px 15px 0px
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-width photographic heroes followed by structured multi-column product grids
07
Motion & Interaction
125msmicro
200mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
Quick color transitions for interactive hover states · Smooth scaling transformations on product imagery
Color transitions and slight scaling on interactive elements · Immediate visual feedback via state changes
08
Components
buttonUnderlined text links for primary actions, pill-shaped buttons for secondary actions
cardMinimal image-focused cards with no visible borders or shadows, featuring floating circular utility icons
chipSimple uppercase text labels for activity categories
inputMinimal underline-style inputs for search and filtering
heroFull-bleed cinematic photography with bottom-left text overlays and call-to-action links
09
Voice & Don'ts
ToneDirect, motivational, and premium
HeadlinesShort, punchy, uppercase statements that command attention
CTAsAction-oriented text links with minimal visual weight
don't use decorative serif fonts — screenshot shows a condensed sans-serif for headlines
don't rely on solid color backgrounds for sections — screenshot shows photographic imagery as the primary visual element
don't use heavy shadows or 3D effects — screenshot shows flat, minimalist component design
don't center-align hero text — screenshot shows left-aligned text overlays
don't use multi-colored accent buttons — screenshot shows simple white underlined text links for CTAs
don't use rounded square cards with borders — screenshot shows borderless, image-focused layouts
Captured from the live site · real computed styles
11
System prompt
Gymshark is a premium athletic apparel brand. The design DNA is defined by cinematic, high-contrast photography and bold, condensed sans-serif typography. The color palette is strictly monochromatic, relying on pure black and white with the vibrancy of the photography providing all visual interest. Key colors are #000000, #FFFFFF, and neutral greys like #444444. The typography uses a condensed sans for display and a humanist sans for body text. Critical constraints: do not use decorative serifs, do not use heavy shadows, and do not use colorful accent buttons. The layout is wide and editorial, prioritizing the imagery over UI chrome.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
