Underarmour
Photographic
Cool, muted greys and pinks - crisp sans serif floats on expansive, airy space.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Nike Futura ND | 76px | 500 | 0.9 | 0 | Aa Bb Cc |
| h2 | Helvetica Now Text Medium | 14px | 500 | 1.5 | 0 | Aa Bb Cc |
| h3 | Nike Futura ND | 76px | 400 | 0.9 | 0 | Aa Bb Cc |
| body | Helvetica Now Text | 16px | 400 | 1.75 | 0 | Aa Bb Cc |
| button | Helvetica Now Text Medium | 14px | 500 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #b8c42d;
--color-surface: #94a40c;
--color-ink: #dfe27f;
--color-accent: #9c7465;
--color-detail: #cba2b0;
}
/* CSS variables exposed by source */
:root {
--pds-color-gray-700: #39393B;
--pds-typography-body-1: 400 1rem/1.5 'Helvetica Now Text', Helvetica, Arial, sans-serif;
--pds-typography-conversation-2: 300 2.5rem/1.25 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--podium-cds-elevation-50: 50;
--podium-cds-color-blue-500: #1151FF;
--podium-cds-size-spacing-xxl: 60px;
--podium-cds-size-form-input-container-height: 86px;
--podium-cds-color-pink-500: #ED1AA0;
--podium-cds-button-color-bg-primary-on-dark: #FFFFFF;
--podium-cds-color-text-success: #007D48;
--podium-cds-color-success-inverse: #1EAA52;
--podium-cds-icon-button-color-bg-primary: #111111;
--pds-color-text-secondary-inverse: #9E9EA0;
--pds-color-border-tertiary: #E5E5E5;
--pds-radius-12: 12px;
--pds-color-text-accent: #111111;
--pds-color-purple-200: #BEAFFD;
--podium-cds-color-blue-600: #0034E3;
--podium-cds-color-grey-900: #1F1F21;
--podium-cds-color-scrim-primary-inverse: rgba(17,17,17,0.80);
--podium-cds-color-scrim-100: rgba(17,17,17,0.36);
--podium-cds-color-bg-disabled: #E5E5E5;
--podium-cds-color-purple-100: #D6D1FF;
--pds-color-element-disabled-always-dark: #707072;
--podium-cds-color-red-600: #D30005;
--pds-color-gray-500: #707072;
--podium-cds-typography-960-to-1919-conversation4: 300 1.25rem/1.35 'Palatino LT Pro Light',Helvetica,Arial,sans-serif;
--podium-cds-typography-1920-plus-title3: 500 2rem/1.2 'Helvetica Now Display Medium',Helvetica,Arial,sans-serif;
--pds-color-teal-600: #0A7281;
--pds-space-20: 20px;
--pds-color-pink-200: #FFB0DD;
--podium-cds-color-red-800: #780700;
--podium-cds-button-box-shadow-width: 0;
--pds-typography-oversize-3: 500 6rem/1.1 'Helvetica Now Display Bold', Helvetica, Arial, sans-serif;
--podium-cds-color-pink-900: #4C012D;
--podium-cds-color-focus-shadow: rgba(17, 17, 17, 0.12);
--pds-color-background-overlay: #FFFFFF;
--pds-color-blue-500: #1151FF;
--podium-cds-color-bg-secondary: #F5F5F5;
--podium-cds-button-color-border-secondary-disabled-on-dark: #4B4B4D;
--podium-cds-color-text-hover-on-dark: #E5E5E5;
--pds-space-60: 60px;
--podium-cds-color-blue-200: #87CEFF;
--podium-cds-color-bg-overlay: #FFFFFF;
--pds-typography-conversation-3: 300 2rem/1.25 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--pds-color-yellow-400: #FDC400;
--podium-cds-color-blue-50: #D6EEFF;
--pds-color-border-disabled: #CACACB;
--pds-color-pink-800: #770349;
--pds-ratio-3-2: 3 / 2;
--podium-cds-typography-1920-plus-display1: 7.5rem/.9 'Nike Futura ND','Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
--pds-color-red-50: #FFE5E5;
--pds-color-element-primary-inverse: #FFFFFF;
--pds-shadow-primary: 0px 0px 24px 4px rgba(17, 17, 17, 0.03), 0px 4px 8px 0px rgba(17, 17, 17, 0.06);
--pds-color-blue-400: #1190FF;
--podium-cds-color-orange-100: #FFC5AD;
--podium-cds-size-spacing-l: 24px;
--podium-cds-motion-duration-400: 400ms;
--pds-motion-delay-100: 100ms;
--podium-cds-elevation-70: 70;
}Drop-in prompt
Build a landing page in the visual style of Nike.
Reference design system (extracted from the live site):
- Palette: #b8c42d, #94a40c, #dfe27f, #9c7465, #cba2b0
- Typefaces: Nike Futura ND, Helvetica Now Text Medium, Helvetica Now Text
- Macrostructure: Photographic
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/nike-com--at-en-size-fit-kids-clothing