Olivia - Webflow HTML Website Template Design System & DESIGN.md Report

Detected Language

Design Style

technical / mono accents

monospace font in use

Palette

Colors

primary

#DDDDDD

1.36 on white · 15.46 on black · 0° 0% 87%

secondary

#000000

21 on white · 1 on black · 0° 0% 0%

Token Roles 11 tokens

background

#FFFFFF · 21:1 vs black

surface

#FDFDFD · 20.65:1 vs black

text-primary

#000000 · 21:1 vs white

text-secondary

#DDDDDD · 15.46:1 vs black

border

#777777 · 4.48:1 vs white

on-secondary

#FFFFFF · 21:1 vs black

surface-container-lowest

#FFFFFF · 21:1 vs black

surface-container-low

#FDFDFD · 20.65:1 vs black

surface-container

#E2E2E2 · 16.21:1 vs black

surface-container-high

#DDDDDD · 15.46:1 vs black

surface-container-highest

#C8C8C8 · 12.55:1 vs black

Detected Palette 14 colors by frequency in source CSS

#FFFFFF

used 14× · 0° 0% 100%

#000000

used 12× · 0° 0% 0%

#1A1A1A

used 10× · 0° 0% 10%

#030303

used 7× · 0° 0% 1%

#DDDDDD

used 4× · 0° 0% 87%

#777777

used 4× · 0° 0% 47%

#9A9A9A

used 4× · 0° 0% 60%

#C8C8C8

used 2× · 0° 0% 78%

#FFFF00

used 1× · 60° 100% 50%

#333333

used 1× · 0° 0% 20%

#E2E2E2

used 1× · 0° 0% 89%

#222222

used 1× · 0° 0% 13%

#636363

used 1× · 0° 0% 39%

#FDFDFD

used 1× · 0° 0% 99%

Type System

Typography

display

inherit

152px · 300 · LH 1 · LS -2px

Olivia - Webflow HTML Website Template

headline-lg

inherit

40px · 300 · LH 1 · LS -2px

Olivia - Webflow HTML Website Template

headline-md

inherit

28px · 300 · LH 1 · LS -2px

Olivia - Webflow HTML Website Template

body-lg

inherit

18px · 300 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

body-md

inherit

16px · 300 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

label-md

inherit

14px · 300 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

label-sm

inherit

12px · 300 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

Detected Font Stacks

BdogroteskBdogrotesk, Arial, sans-serifvar(--_typography---font-family)monospacewebflow-iconswebflow-icons !importantArial, sans-serif

Structure

Layout

Container

Section padding: — · card padding: —

Grid

12-column reference grid · gap —

Spacing Scale

sm

10px

md

16px

lg

40px

xl

60px

detected

10px

detected

15px

detected

16px

detected

20px

detected

21px

detected

25px

detected

30px

detected

40px

detected

50px

detected

60px

Breakpoints

0px479px480px767px991px1280px1440px

Geometry

Shapes

md

100px

pill

100%

Tokens in Context

Components

card

background{colors.surface}

border1px solid {colors.border}

radius100px

button-primary

radius100%

Animation

Motion

Keyframes 1 found

@keyframes spin

0% { transform: rotate(0); } 100% { transform: rotate(360deg); }

Transitions

border .2sall .2s

Proof

Live Preview

Complete Reference

Full design.md Specification

Design Specification — Olivia - Webflow HTML Website Template

Field	Value
Site / Project	https://ddesign-reference---songengine.webflow.io
Analyzed on	2026-10-16
Analysis mode	Automated code extraction (no AI)

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000). All type is set in Bdogrotesk. Detected font weights: 300, 400, 500, 600, 700. Detected style signatures: technical / mono accents.

Logo asset(s): https://cdn.prod.website-files.com/6ad267d9fa9c5529df55702e/6ad267dafa9c5529df5570f6_logo_white.png · https://cdn.prod.website-files.com/6ad267d9fa9c5529df55702e/6ad267dafa9c5529df5570cf_client_logo_1.png

Color System

Detected palette (by frequency)

Hex	RGB	HSL	Count
`#FFFFFF`	255, 255, 255	0° 0% 100%	14
`#000000`	0, 0, 0	0° 0% 0%	12
`#1A1A1A`	26, 26, 26	0° 0% 10%	10
`#030303`	3, 3, 3	0° 0% 1%	7
`#DDDDDD`	221, 221, 221	0° 0% 87%	4
`#777777`	119, 119, 119	0° 0% 47%	4
`#9A9A9A`	154, 154, 154	0° 0% 60%	4
`#C8C8C8`	200, 200, 200	0° 0% 78%	2
`#FFFF00`	255, 255, 0	60° 100% 50%	1
`#333333`	51, 51, 51	0° 0% 20%	1
`#E2E2E2`	226, 226, 226	0° 0% 89%	1
`#222222`	34, 34, 34	0° 0% 13%	1
`#636363`	99, 99, 99	0° 0% 39%	1
`#FDFDFD`	253, 253, 253	0° 0% 99%	1

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Token	Hex	RGB	HSL
`--color-background`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-surface`	`#FDFDFD`	253, 253, 253	0° 0% 99%
`--color-text-primary`	`#000000`	0, 0, 0	0° 0% 0%
`--color-secondary`	`#000000`	0, 0, 0	0° 0% 0%
`--color-text-secondary`	`#DDDDDD`	221, 221, 221	0° 0% 87%
`--color-border`	`#777777`	119, 119, 119	0° 0% 47%
`--color-on-secondary`	`#FFFFFF`	255, 255, 255	0° 0% 100%

Surface ramp (derived from detected light neutrals)

Token	Hex
`--color-surface-container-lowest`	`#FFFFFF`
`--color-surface-container-low`	`#FDFDFD`
`--color-surface-container`	`#E2E2E2`
`--color-surface-container-high`	`#DDDDDD`
`--color-surface-container-highest`	`#C8C8C8`

Gradients

linear-gradient(180deg, black, #03030300 50%, #030303)

Typography

Primary typeface: Bdogrotesk — stack: Bdogrotesk

Font stacks (most used first)

Bdogrotesk
Bdogrotesk, Arial, sans-serif
var(--_typography---font-family)
monospace
webflow-icons
webflow-icons !important
Arial, sans-serif

Derived type scale

Token	Size
display	152px
headline-lg	40px
headline-md	28px
body-lg	18px
body-md	16px
label-md	14px
label-sm	12px

Font sizes (by frequency)

Size	Count
14px	2
32px	2
24px	2
18px	2
15rem	2
2em	1
1em	1
38px	1
12px	1
40px	1
8.1rem	1
9.5rem	1
4.8rem	1
7rem	1
28px	1
6rem	1
5rem	1

Weights in use: 300, 400, 500, 600, 700

Line heights (by frequency)

Value	Count
1.25rem	3
1.5rem	3
20px	2
24px	2
13rem	2
1.75rem	2
0	1
1	1
44px	1
36px	1

Letter spacing (by frequency)

Value	Count
0	5
-2px	3
-3px	3
-1px	1
-6px	1

Spacing

Derived spacing scale

Token	Value
sm	10px
md	16px
lg	40px
xl	60px

Raw values (by frequency)

Value	Count
10px	22
30px	16
20px	15
0px	12
40px	9
50px	8
60px	6
70px	6
100px	6
80px	5
15px	5
21px	4
150px	4
25px	3
16px	3
200px	2

Borders & Radius

Derived radius tokens

Token	Value
md	`100px`
pill	`100%`

Raw values (resolved, by frequency)

Radius	Count
`100px`	5
`100%`	1

Layout

Container max-width: 767px

Breakpoints

0px
479px
480px
767px
991px
1280px
1440px

Animation & Motion

Transitions

border .2s
all .2s

Keyframes

@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

CTA labels found on page

Explore All
Subscribe Now
Let's Discuss

Effects

backdrop-filter: blur(5px)

Source Design Tokens (CSS custom properties)

:root {
  --black: #030303;
  --_typography---font-family: Bdogrotesk, Arial, sans-serif;
  --white: #fff;
  --_typography---font-size--body-s: 1rem;
  --_typography---font-weight--font-weight-light: 300;
  --_typography---font-size--heading-h1: 3.5rem;
  --_typography---line-height--line-height-m: 3.875rem;
  --_typography---font-size--heading-h2: 1.75rem;
  --_typography---line-height--line-height-s: 2.25rem;
  --_typography---font-size--body-xs: .875rem;
  --transparent: #fff0;
  --_typography---font-weight--font-weight-regular: 400;
  --_typography---font-weight--font-weight-medium: 500;
  --black-soft: #1a1a1a;
  --_typography---font-size--display-m: 4.5rem;
  --spacing-xl: 220px;
  --_typography---font-size--display-xl: 11.25rem;
  --_typography---line-height--line-height-xxl: 10.5rem;
  --_typography---font-weight--font-weight-bold: 700;
  --_typography---line-height--line-height-l: 5rem;
  --grey-strong: #777;
  --grey-medium: #9a9a9a;
  --_typography---font-size--display-l: 7.5rem;
  --_typography---line-height--line-height-xl: 7.5rem;
  --_typography---font-weight--font-weight-semibold: 600;
  --spacing-l: 180px;
  --_typography---font-size--body-m: 1.125rem;
  --_typography---font-size--body-l: 1.25rem;
  --_typography---font-size--body-xl: 1.5rem;
}

Do's and Don'ts

Do

Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
Do stick to the detected font weight(s): 300, 400, 500, 600, 700.

Don't

Don't introduce colors outside the detected palette — every hue above was found in the source.
Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-background: #FFFFFF;
  --color-surface: #FDFDFD;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #DDDDDD;
  --color-border: #777777;
  --color-on-secondary: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FDFDFD;
  --color-surface-container: #E2E2E2;
  --color-surface-container-high: #DDDDDD;
  --color-surface-container-highest: #C8C8C8;
  --font-sans: Bdogrotesk;
  --font-size-display: 152px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 28px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-md: 100px;
  --radius-pill: 100%;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 40px;
  --space-xl: 60px;
  --tracking-display: -2px;
  --container-max: 767px;
}