# solidcore design system

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

## Overview

solidcore pairs a dark studio hero with a white page, black text and #036cff electric blue for the square booking button and feature heads. Nimbus Sans Condensed Bold sets 72px uppercase display at a tight 0.75 line height, and Switzer runs 14px body. Image cards round at 8px, and a check mark list explains the method.

- Theme: light
- Mood: blue, black, condensed, studio, clean
- Category: Fitness studio

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#ffffff` | The page ground |
| Surface | `#000000` | Raised panels, bands and cards |
| Text | `#000000` | Primary ink, 21.0:1 on the background |
| Muted text | `#333333` | Supporting copy, 12.6:1 on the background |
| Accent | `#036cff` | Primary actions |
| Border | `#000000` | Hairlines and dividers |

Full palette, most used first: `#000000`, `#ffffff`, `#f2f2f2`, `#036cff`, `#333333`.

## Typography

- **Switzer Variable**: display and body, 89% of the text. Use Switzer. Switzer is free from Fontshare under the ITF Free Font License.
- **Nimbussancon Bol**: display, 11% of the text. Use Roboto Condensed. Nimbus Sans Condensed is a paid typeface. Roboto Condensed is a free stand-in, not a match.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | Nimbussancon Bol | 72px | 700 | 0.75 | 0 |
| Heading | Nimbussancon Bol | 48px | 700 | 0.85 | 0 |
| Subheading | Switzer Variable | 20px | 600 | 1.2 | 0 |
| Body | Switzer Variable | 14px | 400 | 1.5 | 0 |
| Small | Switzer Variable | 12px | 400 | 1.5 | 0 |

Sizes in use, largest first: 72px, 48px, 20px, 16px, 14px, 12px.

## Spacing

Values sit on a 4px grid.
Values in use: 8px, 10px, 12px, 15px, 20px, 24px, 40px, 60px.

## Shape

Corner radii, smallest first: 8px.

Shadows, most used first:

- `rgba(0, 0, 0, 0.06) 0px 1px 6px 0px, rgba(0, 0, 0, 0.16) 0px 2px 32px 0px`

## Components

### Primary button ("Book a class")

- Fill: #036cff
- Text: #ffffff, 16px at weight 600
- Border: none
- Corner: 0px
- Height: 48px, padding 12px 20px

### Secondary button ("Book now")

- Fill: #000000
- Text: #ffffff, 16px at weight 700
- Border: none
- Corner: 8px
- Height: 48px, padding 12px 24px

## Do

- Set display type in tall condensed uppercase with a very tight line height.
- Use one electric blue for the booking button and small headings.
- Keep the page white beneath a dark photographic hero.

## Don't

- Round the main button: it is square.
- Spread the blue across large areas.
- Loosen the headline leading.

## CSS variables

```css
:root {
  --color-background: #ffffff;
  --color-surface: #000000;
  --color-text: #000000;
  --color-text-muted: #333333;
  --color-accent: #036cff;
  --color-border: #000000;
  --font-display: "Nimbussancon Bol", system-ui, sans-serif;
  --text-display: 72px;
  --weight-display: 700;
  --font-heading: "Nimbussancon Bol", system-ui, sans-serif;
  --text-heading: 48px;
  --weight-heading: 700;
  --font-subheading: "Switzer Variable", system-ui, sans-serif;
  --text-subheading: 20px;
  --weight-subheading: 600;
  --font-body: "Switzer Variable", system-ui, sans-serif;
  --text-body: 14px;
  --weight-body: 400;
  --font-small: "Switzer Variable", system-ui, sans-serif;
  --text-small: 12px;
  --weight-small: 400;
  --space-1: 8px;
  --space-2: 10px;
  --space-3: 12px;
  --space-4: 15px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 40px;
  --space-8: 60px;
  --radius-1: 8px;
}
```

## 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.