Manchester City FC - Official Website of Man City F.C..

Design Specification — Manchester City FC - Official Website of Man City F.C..

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#001838), a vivid accent (#01375B). All type is set in KippaxCondensed,sans-serif. Detected font weights: 400, 500, 700, 800, 900. Detected style signatures: technical / mono accents.

Logo asset(s): https://www.mancity.com/dist/images/logos/crest.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(140.75deg,hsla(0,0%,100%,.4),hsla(0,0%,100%,.16))
• linear-gradient(140.75deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,.48))

Typography

Primary typeface: KippaxCondensed — stack: KippaxCondensed,sans-serif

Font stacks (most used first)

• KippaxCondensed,sans-serif
• Kippax,sans-serif
• "Kippax Modern"
• swiper-icons
• monospace,monospace
• KippaxCondensed
• Kippax
• "Kippax Modern",sans-serif
• Arial, sans-serif
• inherit

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 700, 800, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 0 12px rgba(59,214,255,.501)
• 0 8px 16px 0 rgba(0,24,56,.2)
• 0 8px 16px 0 rgba(0,24,56,.3)
• 0 0 0 25px rgba(1,40,94,0)
• 0 4px 12px rgba(0,0,0,.15)
• 0 2px 4px -2px rgba(0,24,56,.059),0 8px 18px -3px rgba(0,24,56,.2)
• 0 0 0 .125rem #d4e4f7
• 0 2px 8px 0 rgba(0,24,56,.5)

Layout

Container max-width: 768px

Breakpoints

• 22.5rem
• 37.49rem
• 37.5rem
• 47.99rem
• 48rem
• 861px
• 63.99rem
• 64rem

Animation & Motion

Transitions

• opacity .3s
• opacity .5s ease-out
• all .3s ease
• opacity .3s ease,left 0s .3s,-webkit-transform .3s ease
• opacity .3s ease,transform .3s ease,left 0s .3s
• opacity .3s ease,transform .3s ease,left 0s .3s,-webkit-transform .3s ease
• opacity .3s ease,left 0s 0s,-webkit-transform .3s ease
• opacity .3s ease,transform .3s ease,left 0s 0s
• opacity .3s ease,transform .3s ease,left 0s 0s,-webkit-transform .3s ease
• .2s cubic-bezier(.215,.61,.355,1)
• .3s
• -webkit-text-decoration-color .1s ease-in-out

Easing curves

• cubic-bezier(.215,.61,.355,1)
• cubic-bezier(1,0,1,0)

Keyframes

@keyframes a { to{-webkit-transform:rotate(1turn);transform:rotate(1turn)} }
@keyframes blinker { 50%{opacity:1} }
@keyframes progress-value-stripes { 0%{background-position:0 0}to{background-position:40px 0} }
@keyframes indicatorBorderChange { to{outline-color:transparent} }
@keyframes rotation { 0%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)} }
@keyframes fadeIn { 0%{opacity:0}to{opacity:1} }
@keyframes slideInLeft { 0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(0);transform:translateX(0)} }
@keyframes slideOutLeft { 0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)} }
@keyframes slideInRight { 0%{-webkit-transform:translateX(100%);transform:translateX(100%)}to{-webkit-transform:translateX(0);transform:translateX(0)} }
@keyframes slideOutRight { 0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(100%);transform:translateX(100%)} }
@keyframes opacity-animation { 0%{opacity:0}to{opacity:1} }
@keyframes pulse { to{-webkit-box-shadow:0 0 0 25px rgba(1,40,94,0);box-shadow:0 0 0 25px rgba(1,40,94,0)} }

Animations

• opacity-animation 5s cubic-bezier(1,0,1,0) forwards
• none

CTA labels found on page

• View
• More News
• Preview
• Buy Tickets
• Match report
• More video

Source Design Tokens (CSS custom properties)

:root {
  --swiper-theme-color: #007aff;
  --swiper-navigation-size: 44px;
  --primary-yellow: hover;
  --secondary: hover;
  --svg-base: var(--colour-content-primary);
  --svg-contrast: transparent;
  --as-trigger: hover:after;
  --padlock: lang(ar);
  --gallery: lang(ar);
  --opacity-0: 0%;
  --opacity-1: 12%;
  --opacity-2: 20%;
  --opacity-3: 32%;
  --opacity-4: 40%;
  --opacity-5: 52%;
  --opacity-6: 60%;
  --opacity-7: 72%;
  --opacity-8: 80%;
  --opacity-9: 92%;
  --opacity-10: 100%;
  --blur-none: 0rem;
  --blur-xsmall: 0.5rem;
  --blur-small: 1rem;
  --blur-medium: 1.5rem;
  --blur-large: 2.5rem;
  --blur-xlarge: 3.5rem;
  --border-width-none: 0rem;
  --border-width-xsmall: 0.0625rem;
  --border-width-small: 0.09375rem;
  --border-width-medium: 0.125rem;
  --border-width-xlarge: 0.25rem;
  --border-width-large: 0.1875rem;
  --border-radius-none: 0rem;
  --border-radius-xsmall: 0.125rem;
  --border-radius-small: 0.25rem;
  --border-radius-medium: 0.375rem;
  --border-radius-large: 0.5rem;
  --border-radius-xlarge: 0.75rem;
  --border-radius-xxlarge: 1rem;
  --border-radius-round: 624.9375rem;
  --spacing-0: 0rem;
  --spacing-1: 0.125rem;
  --spacing-2: 0.25rem;
  --spacing-3: 0.375rem;
  --spacing-4: 0.5rem;
  --spacing-5: 0.75rem;
  --spacing-6: 1rem;
  --spacing-7: 1.25rem;
  --spacing-8: 1.5rem;
  --spacing-9: 2rem;
  --spacing-10: 2.5rem;
  --spacing-11: 3rem;
  --spacing-12: 4rem;
  --spacing-13: 5rem;
  --spacing-14: 6rem;
  --spacing-15: 7rem;
  --spacing-16: 8rem;
  --spacing-17: 10rem;
  --spacing-18: 12rem;
  --spacing-negative-1: -0.125rem;
}

Do's and Don'ts

Do

• Do reserve the accent #01375B for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 400, 500, 700, 800, 900.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-text-primary: #001838;
  --color-primary: #001838;
  --color-accent: #01375B;
  --color-background: #FFFFFF;
  --color-surface: #F3F6F9;
  --color-secondary: #001838;
  --color-text-secondary: #DDE6ED;
  --color-border: #E6FF00;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F3F6F9;
  --color-surface-container: #F1F5F8;
  --color-surface-container-high: #EBEDF0;
  --color-surface-container-highest: #DDE6ED;
  --font-sans: KippaxCondensed,sans-serif;
  --font-size-display: 60px;
  --font-size-headline-lg: 35px;
  --font-size-headline-md: 30px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-pill: 50%;
  --shadow-sm: 0 0 12px rgba(59,214,255,.501);
  --shadow-md: 0 4px 12px rgba(0,0,0,.15);
  --shadow-lg: 0 2px 8px 0 rgba(0,24,56,.5);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --tracking-display: -.31em;
  --tracking-label: .3px;
  --container-max: 768px;
}