Edgell Building
- Pages (4)
- Style sheet
- Measured from 4 Pages
- Captured Oct 27, 2026
- Built with Squarespace
Summary
Across 4 measured Pages: 9 colours, 2 typefaces and one corner radius. Not every Page uses all of them.
- Colours
- 9coloursSurface, Accent, Background and 2 more
- Typefaces
- 2typefacesBalthazar + Bitter
- Base unit
- 4pxbase unit3 of 3 paddings on it
- Corner radii
- 1radius10px
01 · Colour
Colour
Named by the job each colour does
Bands and cards on the page
4/4 PagesButtons and links
4/4 PagesThe page behind everything
4/4 PagesMost of the text
2/4 PagesSecondary text
2/4 PagesSecondary text
1/4 PagesMost of the text
1/4 PagesBands and cards on the page
1/4 PagesMost of the text
1/4 Pages
Contrast
Text on background 16.8 : 1 · AAA
Text on surface 1.1 : 1 · fails
Accent on background 3.1 : 1 · large text only
02 · Type
Type
Drawn in the Site's fonts if your browser has them
Headings
Balthazar
Edgell Building
4/4 Pages
Body
Bitter
The quick brown fox jumps over the lazy dog.
4/4 Pages
03 · Spacing
Spacing
Measured as drawn on the desktop Capture
Section padding
4px base · 3 of 3 on the grid
- 76px2/4 Pages
- 72px1/4 Pages
The typical space at the top of a Section, one value per Page.
04 · Radius
Radius
The corner most buttons, fields and cards share
10px 4/4 Pages
05 · Export
Export
Take the system with you
/* Design tokens from Edgell Building (https://www.edgellbuilding.com), https://designly.sh/style-sheets/edgell-building, via Designly. Credit the business if you use them. */
:root {
--color-surface: #FFFFFF;
--color-accent: #C41230;
--color-background: #0E1113;
--color-text: #EEF2F4;
--color-muted: #A8B0B6;
--color-muted-2: #D2D9DE;
--color-text-2: #DFE5E9;
--color-surface-2: #E5E3DF;
--color-text-3: #DFE6EA;
--font-display: "Balthazar", sans-serif;
--font-body: "Bitter", sans-serif;
--radius: 10px;
--spacing: 4px;
--spacing-section: 76px;
}
Values only: Designly never copies a Site's font files or images. Fonts are named so you can license them.