Skadden
White and near black with light condensed headlines and red underline marks on photo tiles.
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.
- 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.
- Fill buttons with the red.
- Round tile corners or add shadows.
- Use bold weights for large headings; they are light.
Color roles
#ffffffThe page ground
#0e0e0eRaised panels, bands and cards
#0e0e0ePrimary ink, 19.3:1 on the background
#ee2517Primary actions
#bf443aBrand color in artwork, marks and badges
#0e0e0eHairlines and dividers
Type
Use Arimo. Arial is a licensed system font. Arimo is a free metric compatible stand-in.
Use Roboto Condensed. Univers is a paid typeface. Roboto Condensed is a free stand-in, not a match.
Use Roboto Condensed. The light condensed cut of Univers, a paid typeface. Roboto Condensed Light is a free stand-in.
Sizes in use: 47px / 45px / 33px / 28px / 21px / 19px / 18px / 16px
Spacing
No single base unit: these are the values the page repeats.
Corners and depth
Square corners throughout.
Buttons and cards
Rebuilt here from the measured values, not copied from the site's code.
Hand this to your AI coding tool
Drop it in your repo as DESIGN.md and point Claude Code, Cursor or Codex at it before you ask for a page.
# 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.
Skadden and its marks belong to their owner. This page is an independent analysis of the public website, measured on 2026-10-06. We're not affiliated with or endorsed by Skadden.