SAY ~ Digital 2.0

Design System

Living reference for the SAY Carbon Yachts brand system. Everything on this page renders from the design-system tokens and classes in assets/css, scoped under .say.

Logo

Colors

Brand

Heatpoint Orange#FF4900--heatpoint-orange

Neutral

Precision White#FFFFFF--precision-white
Jet Black#000000--jet-black
Carbon Grey 01#2F2F2F--carbon-grey-01
Carbon Grey 02#828282--carbon-grey-02

Typography

SAY Carbon Yachts
.h0Display H0 — GT Flexa · Italic · 32 → 48px
SAY Carbon Yachts
.h1Heading H1 — GT Flexa · Italic · 32 → 40px
SAY Carbon Yachts
.h2Heading H2 — GT Flexa · Italic · 24 → 32px
SAY Carbon Yachts
.h3Heading H3 — GT Flexa · Italic · 20 → 24px
SAY Carbon Yachts
.h4Heading H4 — GT Flexa · Italic · 16px
SAY Carbon Yachts
.title-1Title 1 — Monument Grotesk Medium · 20 → 24px
SAY Carbon Yachts
.title-2Title 2 — Monument Grotesk Medium · 18 → 20px
SAY Carbon Yachts
.bodyBody — Monument Grotesk · 16px
SAY Carbon Yachts
.body-2Body 2 — Monument Grotesk · 14px
SAY Carbon Yachts
.nav-labelNav label — Monument Grotesk Medium · 15px
SAY Carbon Yachts
.button-labelButton label — Monument Grotesk Medium · 13 → 15px
SAY Carbon Yachts
.eyebrowEyebrow / Label — Monument Grotesk Medium · 14px · uppercase
SAY Carbon Yachts
.captionCaption — Monument Grotesk Mono · 12 → 14px

Grid & Layout

BreakpointRangeColumnsGutterSide margin
Mobile393 – 767px412px20px
Tablet768 – 1023px816px24px
Desktop1024 – 1439px1216px32px
Wide1440px +1220px40px

Spacing

--space-00px
--space-14px
--space-28px
--space-312px
--space-416px
--space-520px
--space-624px
--space-832px
--space-1040px
--space-1248px
--space-1456px
--space-1664px
--space-1872px
--space-2080px

Radius

--radius-none0px
--radius-xs2px
--radius-sm4px
--radius-md8px
--radius-lg12px
--radius-xl20px
--radius-full64px

Buttons

Forms