DESIGN.md · Analysis

LA28 Look of the Games

la28.org · 5 Jun 2026 · 47 colors · LA28Black, Helvetica, sans-serif, LA28Bold, Helvetica, sans-serif

LA28 Look of the Games

The official design system for LA28 Olympic and Paralympic Games, celebrating Los Angeles' vibrant visual identity through bold typography, dynamic color, and architectural minimalism.

Colors

surface#ffffff

surface-dim#f5f5f5

surface-bright#ffffff

surface-container-lowest#fafafa

surface-container-low#f0f0f0

surface-container#e9ecef

surface-container-high#d0d0d0

surface-container-highest#c6c6c6

on-surface#000000

on-surface-variant#505050

inverse-surface#1a1a1a

inverse-on-surface#ffffff

outline#767676

outline-variant#c6c6c6

surface-tint#009ed6

primary#009ed6

on-primary#ffffff

primary-container#e0f7ff

on-primary-container#003d5c

inverse-primary#4db8e8

secondary#ff470f

on-secondary#ffffff

secondary-container#ffe4d0

on-secondary-container#5c1a00

tertiary#ff018f

on-tertiary#ffffff

tertiary-container#ffe0f0

on-tertiary-container#660033

error#ff3333

on-error#ffffff

error-container#ffcccc

on-error-container#660000

primary-fixed#e0f7ff

primary-fixed-dim#b3e5fc

on-primary-fixed#001f33

on-primary-fixed-variant#003d5c

secondary-fixed#ffe4d0

secondary-fixed-dim#ffb399

on-secondary-fixed#330d00

on-secondary-fixed-variant#5c1a00

tertiary-fixed#ffe0f0

tertiary-fixed-dim#ffb3d9

on-tertiary-fixed#330011

on-tertiary-fixed-variant#660033

background#ffffff

on-background#000000

surface-variant#e9ecef

Typography

display: fontFamily: LA28Black, Helvetica, sans-serif · fontSize: 120px · fontWeight: 700 · lineHeight: 128px · letterSpacing: -0.04em
headline-lg: fontFamily: LA28Bold, Helvetica, sans-serif · fontSize: 56px · fontWeight: 600 · lineHeight: 64px · letterSpacing: -0.02em
headline-md: fontFamily: LA28Black, Helvetica, sans-serif · fontSize: 48px · fontWeight: 700 · lineHeight: 56px · letterSpacing: -0.01em
title-lg: fontFamily: LA28Bold, Helvetica, sans-serif · fontSize: 32px · fontWeight: 600 · lineHeight: 40px
body-lg: fontFamily: LA28Regular, Helvetica, sans-serif · fontSize: 18px · fontWeight: 400 · lineHeight: 28px
body-md: fontFamily: LA28Regular, Helvetica, sans-serif · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
label-md: fontFamily: LA28Bold, Helvetica, sans-serif · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: LA28Medium, Helvetica, sans-serif · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.05em

Design guidance

Overview

LA28 Look of the Games is the visual identity system for the 2028 Los Angeles Olympic and Paralympic Games, embodying the brand's core aesthetic of 'Architectural Minimalism with Dynamic Energy.' The design celebrates Los Angeles' creative spirit through bold, confident typography (LA28 Sans and Serif families), a vibrant teal primary accent (#009ed6) paired with energetic secondary colors (orange #ff470f, magenta #ff018f), and a deliberately restrained use of ornamentation. The UI evokes clarity, optimism, and forward momentum—evoking the feeling of a city ready to host the world. Voice: authoritative yet approachable, precise yet celebratory. Example sentence: 'Discover the inspiration behind every color, every curve, every moment of the Games.'

Colors

The color palette is built on a foundation of pure white (#ffffff) and deep black (#000000), creating maximum contrast and legibility. Primary (#009ed6) is the signature accent—used on all interactive elements, focus states, and key brand moments. It conveys trust and energy without overwhelming the composition. Secondary (#ff470f) and Tertiary (#ff018f) are vibrant supporting accents deployed sparingly on CTAs, highlights, and status indicators to create visual rhythm. The surface stack progresses from #ffffff (surface) through #f5f5f5 (surface-dim) to #c6c6c6 (surface-container-highest), providing subtle depth without sacrificing the brand's minimalist aesthetic. Outline colors (#767676 for primary outlines, #c6c6c6 for subtle dividers) maintain the monochromatic sophistication. Error st

Typography

The type system is anchored by LA28 Sans (Regular, Medium, Bold, Black weights) for body and display text, paired with LA28 Serif Bold for subheadings and accent moments. Display (120px, LA28Black, -0.04em letter-spacing) commands attention on hero sections; Headline-lg (56px, LA28Bold) structures major sections; Body-md (16px, LA28Regular, 24px line-height) ensures readability at all scales. The system uses weight contrast rather than size alone to establish hierarchy—LA28Black at 48px (Headline-md) creates the same visual weight as LA28Bold at 32px (Title-lg). On small labels over busy backgrounds, apply text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5) to ensure legibility. Font-family declarations use the custom LA28 stack with Helvetica fallback; the system supports Atkinson Hyperlegible as

Layout

The layout system uses a 12-column responsive grid with a max-width of 1440px (144rem), centered with auto margins. Mobile-first breakpoints: base (320px), tablet (768px), desktop (1024px+). The block-wrapper container applies 32px horizontal gutter (2rem on mobile, 6.4rem on tablet+), ensuring consistent breathing room. Vertical rhythm is maintained through semantic spacing tokens: lg (40px) for section separation, md (24px) for component padding, sm (12px) for internal element spacing. The hero section spans full viewport height (100vh) with a flex column layout that justifies content between top and bottom. Cards and containers use 24px padding (md) with 4px border-radius for subtle definition. Fluid typography scales between breakpoints using calc() functions—for example, display text

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts rather than heavy drop shadows. Level 1 (Base): flat surfaces with no shadow, using only 1px solid borders at #c6c6c6 (outline-variant). Level 2 (Standard Cards/Modals): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: #ffffff or #f0f0f0. Level 3 (Elevated Modals/Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), background: #ffffff with 1px border at #c6c6c6. The modal overlay uses a semi-transparent black (rgba(0, 0, 0, 0.5)) with a 4px blur backdrop-filter to create visual separation without ob

Shapes

The shape philosophy is 'Architectural Precision with Functional Softness'—favoring sharp, clean corners (2px and 4px radii) for buttons and inputs to reinforce the brand's structured, confident identity, while using 16px and 24px radii on larger containers (cards, modals) to provide visual breathing room. Buttons use 4px border-radius with 2px solid borders; input fields use 4px border-radius with 1px borders. Cards and modals use 16px border-radius to soften the composition without sacrificing the geometric clarity. Badges and pills use 9999px (full) border-radius for maximum roundness. The

Components

Action Elements Buttons are the primary interactive component. Button-primary uses #009ed6 background with white text, 2px solid border, 12px 24px padding, and 48px height. On hover, the background darkens to #0078a8 with the border matching. On focus, a 3px ring of rgba(0, 158, 214, 0.2) appears around the button, and the border becomes white (#ffffff) for high contrast. Button-secondary uses a transparent background with #009ed6 text and border; on hover, the background fills with #d0d0d0. All buttons use LA28Bold at 14px with 0.01em letter-spacing. Transition timing: all state changes use 150ms ease-out.

Containers & Surfaces Cards use #ffffff background with 1px solid #c6c6c6 border, 4px border-radius, and 24px padding. Box-shadow is 0 3px 8px rgba(0, 0, 0, 0.15). On hover, th

Do's and Don'ts

**Do**

Do use LA28 Sans for all body and UI text; reserve LA28 Serif Bold only for subheadings and accent moments to maintain visual hierarchy.
Do apply 2px solid borders to all interactive elements (buttons, inputs, cards) to reinforce the architectural precision of the brand.
Do use the primary teal (#009ed6) sparingly on CTAs and focus states; secondary colors (#ff470f, #ff018f) should appear on no more than 15% of the page.
Do maintain 32px horizontal gutter (2rem mobile, 6.4rem tablet+) and use lg spacing (40px) for section separation to create breathing room.
Do apply text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5) on small labels over busy backgrounds to ensure legibility.

**Don't**

Don't use rounded corners greater than 4px on buttons or inputs; reserve 16px+ radii for cards and modals only.
Don't apply box-shadow values greater than 0 8px 24px rgba(0, 0, 0, 0.12); the system prioritizes flat, architectural clarity over depth.
Don't mix LA28 Sans weights arbitrarily; use Black only for display/headline, Bold for titles/buttons, Regular for body text.
Don't use secondary or tertiary colors as backgrounds; they are accent colors for interactive elements and highlights only.
Don't set font-size below 12px or line-height below 1.4 for body text; accessibility requires minimum 16px for body-md on mobile.

---
version: alpha
name: LA28 Look of the Games
description: >-
  The official design system for LA28 Olympic and Paralympic Games, celebrating Los Angeles' vibrant visual identity
  through bold typography, dynamic color, and architectural minimalism.
logo:
  src: https://la28.org/etc.clientlibs/latwentyeight/clientlibs/clientlib-site/resources/asset/favicon/apple-touch-icon.png
colors:
  surface: '#ffffff'
  surface-dim: '#f5f5f5'
  surface-bright: '#ffffff'
  surface-container-lowest: '#fafafa'
  surface-container-low: '#f0f0f0'
  surface-container: '#e9ecef'
  surface-container-high: '#d0d0d0'
  surface-container-highest: '#c6c6c6'
  on-surface: '#000000'
  on-surface-variant: '#505050'
  inverse-surface: '#1a1a1a'
  inverse-on-surface: '#ffffff'
  outline: '#767676'
  outline-variant: '#c6c6c6'
  surface-tint: '#009ed6'
  primary: '#009ed6'
  on-primary: '#ffffff'
  primary-container: '#e0f7ff'
  on-primary-container: '#003d5c'
  inverse-primary: '#4db8e8'
  secondary: '#ff470f'
  on-secondary: '#ffffff'
  secondary-container: '#ffe4d0'
  on-secondary-container: '#5c1a00'
  tertiary: '#ff018f'
  on-tertiary: '#ffffff'
  tertiary-container: '#ffe0f0'
  on-tertiary-container: '#660033'
  error: '#ff3333'
  on-error: '#ffffff'
  error-container: '#ffcccc'
  on-error-container: '#660000'
  primary-fixed: '#e0f7ff'
  primary-fixed-dim: '#b3e5fc'
  on-primary-fixed: '#001f33'
  on-primary-fixed-variant: '#003d5c'
  secondary-fixed: '#ffe4d0'
  secondary-fixed-dim: '#ffb399'
  on-secondary-fixed: '#330d00'
  on-secondary-fixed-variant: '#5c1a00'
  tertiary-fixed: '#ffe0f0'
  tertiary-fixed-dim: '#ffb3d9'
  on-tertiary-fixed: '#330011'
  on-tertiary-fixed-variant: '#660033'
  background: '#ffffff'
  on-background: '#000000'
  surface-variant: '#e9ecef'
typography:
  display:
    fontFamily: LA28Black, Helvetica, sans-serif
    fontSize: 120px
    fontWeight: '700'
    lineHeight: 128px
    letterSpacing: '-0.04em'
  headline-lg:
    fontFamily: LA28Bold, Helvetica, sans-serif
    fontSize: 56px
    fontWeight: '600'
    lineHeight: 64px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: LA28Black, Helvetica, sans-serif
    fontSize: 48px
    fontWeight: '700'
    lineHeight: 56px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: LA28Bold, Helvetica, sans-serif
    fontSize: 32px
    fontWeight: '600'
    lineHeight: 40px
  body-lg:
    fontFamily: LA28Regular, Helvetica, sans-serif
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
  body-md:
    fontFamily: LA28Regular, Helvetica, sans-serif
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  label-md:
    fontFamily: LA28Bold, Helvetica, sans-serif
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: LA28Medium, Helvetica, sans-serif
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.05em
rounded:
  sm: 2px
  DEFAULT: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 32px
  container-max: 1440px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 0 8px 24px rgba(0, 0, 0, 0.12)
layout:
  containerMaxWidth: 1440px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 12px 24px
    height: 48px
    border: 2px solid {colors.primary}
  button-primary-hover:
    backgroundColor: '#0078a8'
    textColor: '{colors.on-primary}'
    border: '2px solid #0078a8'
  button-primary-focus:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    border: 2px solid {colors.on-primary}
    boxShadow: 0 0 0 3px rgba(0, 158, 214, 0.2)
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 12px 24px
    height: 48px
    border: 2px solid {colors.primary}
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
    border: 2px solid {colors.primary}
  card:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.md}'
    border: 1px solid {colors.outline-variant}
    boxShadow: '{elevation.md}'
  card-hover:
    backgroundColor: '{colors.surface-container-low}'
    boxShadow: '{elevation.lg}'
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 12px 16px
    border: 1px solid {colors.outline-variant}
    height: 40px
  input-field-focus:
    backgroundColor: '{colors.surface}'
    border: 2px solid {colors.primary}
    boxShadow: 0 0 0 3px rgba(0, 158, 214, 0.1)
  badge-primary:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
  badge-secondary:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.on-secondary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
  modal-overlay:
    backgroundColor: rgba(0, 0, 0, 0.5)
    backdropFilter: blur(4px)
  modal-content:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.lg}'
    padding: '{spacing.lg}'
    boxShadow: '{elevation.lg}'
    border: 1px solid {colors.outline-variant}
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary interactive component. Button-primary uses #009ed6 background with white text, 2px solid border, 12px 24px padding, and 48px height. On hover, the background darkens to #0078a8 with the border matching. On focus, a 3px ring of rgba(0, 158, 214, 0.2) appears around the button, and the border becomes white (#ffffff) for high contrast. Button-secondary uses a transparent background with #009ed6 text and border; on hover, the background fills with #d0d0d0. All buttons use LA28Bold at 14px with 0.01em letter-spacing. Transition timing: all state changes use 150ms ease-out.

### Containers & Surfaces
Cards use #ffffff background with 1px solid #c6c6c6 border, 4px border-radius, and 24px padding. Box-shadow is 0 3px 8px rgba(0, 0, 0, 0.15). On hover, th

## Do's and Don'ts

**Do**
- Do use LA28 Sans for all body and UI text; reserve LA28 Serif Bold only for subheadings and accent moments to maintain visual hierarchy.
- Do apply 2px solid borders to all interactive elements (buttons, inputs, cards) to reinforce the architectural precision of the brand.
- Do use the primary teal (#009ed6) sparingly on CTAs and focus states; secondary colors (#ff470f, #ff018f) should appear on no more than 15% of the page.
- Do maintain 32px horizontal gutter (2rem mobile, 6.4rem tablet+) and use lg spacing (40px) for section separation to create breathing room.
- Do apply text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5) on small labels over busy backgrounds to ensure legibility.

**Don't**
- Don't use rounded corners greater than 4px on buttons or inputs; reserve 16px+ radii for cards and modals only.
- Don't apply box-shadow values greater than 0 8px 24px rgba(0, 0, 0, 0.12); the system prioritizes flat, architectural clarity over depth.
- Don't mix LA28 Sans weights arbitrarily; use Black only for display/headline, Bold for titles/buttons, Regular for body text.
- Don't use secondary or tertiary colors as backgrounds; they are accent colors for interactive elements and highlights only.
- Don't set font-size below 12px or line-height below 1.4 for body text; accessibility requires minimum 16px for body-md on mobile.

Edit, then copy or download.