Design system sheet

6FigureGuarantee.com
The Look

The parts, not the page. Every token below is lifted verbatim from the shipped YHSGR.com build. Approve the look here, then the landing page gets built on top of it.

Source of truth: YHSGR.com / dist-min / index.html :root · Fonts self hosted · Zero external requests
Section 01 Colour

Colour tokens

Thirteen solid tokens plus four alpha tokens. Hex values are printed under each chip and match the shipped build character for character.

--black#060B1C
--black-2#0A1230
--black-3#0F1A3C
--white#FFFFFF
--off#F6F5F2
--red#CE202F
--red-hot#E23340
--red-deep#B11F28
--red-disp#F41421
--blue#0E86D6
--blue-soft#3BA0E8
--blue-deep#0371B9
--grn#2FC96D
--mut-wrgba(255,255,255,.62)
--mut-brgba(6,11,28,.64)
--line-wrgba(255,255,255,.10)
--line-brgba(6,11,28,.12)
--easecubic-bezier(.16,1,.3,1)
--rad4px
--wrap1320px
Section 02 Type

Three families, real clamp sizes

Archivo for display, Geist for body, Geist Mono for labels and figures. Every size below is a clamp() copied from the shipped build, so what you see here is what the page will do.

Archivo display / weight 800 font-size: clamp(2.2rem, 1rem + 4.6vw, 5.4rem)
Lorem ipsum dolor headline
Archivo display / weight 800 font-size: clamp(2rem, 1rem + 3.6vw, 3.9rem)
Consectetur adipiscing elit sed
Archivo display / weight 700 font-size: clamp(1.7rem, 1rem + 2.2vw, 3rem)
Eiusmod tempor incididunt labore
Archivo display / weight 700 font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem)
Magna aliqua ut enim ad minim
Geist body / lede font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Geist body / base font-size: clamp(.98rem, .92rem + .3vw, 1.14rem)

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Geist body / small font-size: clamp(.9rem, .84rem + .25vw, 1.02rem)

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Geist Mono / section label font-size: 13px · letter-spacing: .22em · uppercase
Placeholder label text
Geist Mono / eyebrow font-size: 11.5px · letter-spacing: .22em · uppercase
Placeholder eyebrow
Geist Mono / micro font-size: 10px · letter-spacing: .22em · uppercase
No. 00 / 00 placeholder
Geist Mono / figure font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem)
0123456789 $000,000
Section 03 Buttons

Primary and secondary, both grounds

Primary is the shipped red button: 15px, weight 700, 16px by 26px padding, 4px radius. Secondary is a hairline outline that inverts with the ground. Same geometry either way, so the two can sit side by side.

On dark ground Primary action › Secondary action Primary, full width › background: var(--red) #CE202F
hover: var(--red-hot) #E23340
On light ground Primary action › Secondary action Ink alternate, full width › ink: var(--black) #060B1C
outline: rgba(6,11,28,.28)
Section 04 Form fields

The state the funnel will use

Every field computes to 17px, above the 16px floor that stops iOS Safari zooming the viewport on focus. Labels are Geist Mono. Focus ring is blue-soft at 3px so it never reads as an error.

Fine print placeholder. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Section 05a Grounds / dark

The step between the three darks

Three navy blacks, not one. The step is small on purpose: it separates bands without ever reading as a colour change. This section itself sits on --black.

--black
#060B1C

Page floor. Body background and the deepest band.

--black-2
#0A1230

One step up. Alternating bands, footer, legal.

--black-3
#0F1A3C

Two steps up. Raised cards and inset panels.

Section 05b Grounds / light

The light band

This whole section is on --off #F6F5F2, the warm paper the shipped site uses for its relief bands. Pure --white #FFFFFF is held back for cards sitting on top of it, so a card still reads as a card.

--off
#F6F5F2

Warm paper. The light band ground.

--white
#FFFFFF

Card ground only. Lifts off the paper.

Section 06 Hero lockup

Mark, proof line, figure, one action

The assembled top of the page: knockout mark, headline, an avatar proof line, the display figure, and exactly one action button. All copy below is placeholder.

Placeholder eyebrow line

Lorem ipsum dolor sit amet consectetur

Placeholder subhead. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

000 placeholder lorem ipsum
dolor sit amet consectetur
000+
Placeholder figure caption
Placeholder action ›
Placeholder signature
Section 07 Testimonial card

White card on the light band

A white card on --off paper, hairline --line-b border, 10px radius. Media plate on top, quote in Geist at 1.02rem, attribution in Geist Mono above a hairline. All quote text below is placeholder.

Media plate placeholder
Placeholder quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Placeholder Name / Placeholder Role / Placeholder City
Media plate placeholder
Placeholder quote. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Placeholder Name / Placeholder Role / Placeholder City
Media plate placeholder
Placeholder quote. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Placeholder Name / Placeholder Role / Placeholder City