# Skadden design system

> Captured from https://www.skadden.com/ on 2026-10-06 by Brooks New Media (https://design.brooksnewmedia.com/styles/skadden/). An independent analysis for reference: Skadden and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

Skadden keeps a white page with #0e0e0e near black bands and uses #ee2517 red only as short underline marks beneath card titles. Univers Light Condensed sets 47px headings, Univers Condensed Bold labels the photo tiles, and Arial runs 16px body. Tiles are full bleed architectural photos with a dark fade, and nothing is rounded or shadowed.

- Theme: light
- Mood: corporate, condensed, red marks, architectural, monochrome
- Category: Law firm

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#ffffff` | The page ground |
| Surface | `#0e0e0e` | Raised panels, bands and cards |
| Text | `#0e0e0e` | Primary ink, 19.3:1 on the background |
| Accent | `#ee2517` | Primary actions |
| Highlight | `#bf443a` | Brand color in artwork, marks and badges |
| Border | `#0e0e0e` | Hairlines and dividers |

Full palette, most used first: `#ffffff`, `#0e0e0e`, `#ee2517`, `#bf443a`.

## Typography

- **Arial**: body, 72.2% of the text. Use Arimo. Arial is a licensed system font. Arimo is a free metric compatible stand-in.
- **UniversLTStd-CondensedBold**: display and body, 22.8% of the text. Use Roboto Condensed. Univers is a paid typeface. Roboto Condensed is a free stand-in, not a match.
- **UniversLTStd-LightCn**: display, 2.3% of the text. Use Roboto Condensed. The light condensed cut of Univers, a paid typeface. Roboto Condensed Light is a free stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | UniversLTStd-LightCn | 47px | 400 | 1.2 | 0 |
| Heading | UniversLTStd-LightCn | 45px | 400 | 1.1 | 0 |
| Subheading | UniversLTStd-CondensedBold | 28px | 400 | 1.25 | 0 |
| Body | Arial | 16px | 400 | 1.5 | 0 |

Sizes in use, largest first: 47px, 45px, 33px, 28px, 21px, 19px, 18px, 16px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 26px, 30px, 35px, 45px, 130px.

## Shape

Corners are square throughout.

No shadows: depth comes from color and borders.

## Components

### Primary button ("MENU")

- Fill: #0e0e0e
- Text: #ffffff, 16px at weight 400
- Border: none
- Corner: 0px
- Height: 61px, padding 0px 0px

## Do

- Set headings in a light condensed grotesque.
- Use the red only as a short rule under titles.
- Build a grid of square edged photo tiles with titles on a dark fade.

## Don't

- Fill buttons with the red.
- Round tile corners or add shadows.
- Use bold weights for large headings; they are light.

## CSS variables

```css
:root {
  --color-background: #ffffff;
  --color-surface: #0e0e0e;
  --color-text: #0e0e0e;
  --color-accent: #ee2517;
  --color-highlight: #bf443a;
  --color-border: #0e0e0e;
  --font-display: "UniversLTStd-LightCn", system-ui, sans-serif;
  --text-display: 47px;
  --weight-display: 400;
  --font-heading: "UniversLTStd-LightCn", system-ui, sans-serif;
  --text-heading: 45px;
  --weight-heading: 400;
  --font-subheading: "UniversLTStd-CondensedBold", system-ui, sans-serif;
  --text-subheading: 28px;
  --weight-subheading: 400;
  --font-body: "Arial", system-ui, sans-serif;
  --text-body: 16px;
  --weight-body: 400;
  --space-1: 26px;
  --space-2: 30px;
  --space-3: 35px;
  --space-4: 45px;
  --space-5: 130px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-06.