solidcore
Black studio photography, tall condensed caps and an electric blue booking button.
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.
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.
Avoid
- Round the main button: it is square.
- Spread the blue across large areas.
- Loosen the headline leading.
Colors
Color roles
Background
#ffffffThe page ground
Surface
#000000Raised panels, bands and cards
Text
#000000Primary ink, 21.0:1 on the background
Muted text
#333333Supporting copy, 12.6:1 on the background
Accent
#036cffPrimary actions
Border
#000000Hairlines and dividers
Typography
Type
Switzer Variabledisplay and body, 89% of the text
Use Switzer. Switzer is free from Fontshare under the ITF Free Font License.
Nimbussancon Boldisplay, 11% of the text
Use Roboto Condensed. Nimbus Sans Condensed is a paid typeface. Roboto Condensed is a free stand-in, not a match.
Systems that ship
Hierarchy at a glance
A quieter supporting head
Body copy carries the explanation, so it has to stay readable at length on every screen.
Labels, captions and metadata
Sizes in use: 72px / 48px / 20px / 16px / 14px / 12px
Spacing
Spacing
Values sit on a 4px grid.
Shape
Corners and depth
Components
Buttons and cards
Rebuilt here from the measured values, not copied from the site's code.
Book a classBook now
DESIGN.md
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.
# 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.
solidcore 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 solidcore.