Brand Guidelines.

Design system reference.

Overview

A living reference for our visual language — typography, color, spacing, and components rendered with the actual code they describe.

Logo

The GrowthX wordmark

Specimens

Minimum height: 14px

Clear space: logo height on all sides

Usage

Use on paper (#F1EEE9) or dark (#111) backgrounds
Maintain clear space equal to logo height
Use the SVG source for all digital applications

Don't

Stretch, rotate, or apply effects
Place on busy or low-contrast backgrounds
Alter proportions or spacing

Color

Brand palette

Swatches

Typography

Typefaces & scale

Messina Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Weight ramp

300

You held the balance of the time

400

This place is so inviting, you can take me in

450

We had time against us and miles between us

480

I feel the waves come in, I feel them crash around me

520

I watched a change in you, it's like you never had wings

580

I'll come flooding through your veins and leave no trace

680

Set it off like napalm with the way you hold

800

When the sun comes crashing in, it all falls down

Type scale

heroTitle

And if I had the sense to realize what I had

sizes: 50 / 68 / 78 / 114tracking: -0.07emleading: 0.99wght: 680

sectionTitle

Tonight I feel like more

sizes: 18 / 24 / 26 / 36tracking: -0.04emleading: 1.167wght: 580

cardTitle

The stars will fall for us

sizes: 16 / 18 / — / 26tracking: -0.04emleading: tightwght: 580

label

Winding down the hours

sizes: 14 / 16 / 18tracking: -0.04emleading: normalwght: 480

body

I feel the water rising, I feel the waves come in. This place is so inviting — you can take me in.

sizes: 14 (base)tracking: -0.03emleading: 1.4wght: 480

Layout

Spacing & grid

Grid

content area (inset)

Breakpoints

NameWidthColsContent

mobile< 768px18col 2–16

tablet768px22col 3–18

desktop1180px30col 3–26 / 8–16

cinema1920px30max-w 1920 centered

Content sizes

normalcol-[2/span_16] tablet:col-[3/span_18] desktop:col-[3/span_26]

mediumcol-[2/span_16] tablet:col-[3/span_18] desktop:col-[6/span_20]

insetcol-[2/span_16] tablet:col-[3/span_18] desktop:col-[8/span_16]

Components

Interactive elements

UIButton

UILink

Active nav Inactive nav Default With arrow

SectionHeader

Label

Section title goes here

Optional subtitle with muted color

Patterns

Layout conventions

Borders

Section dividers use border-t border-border — a 1px line in #B3B3B3.

Cards use border border-border rounded-lg with optional bg-card fill.

Buttons use rounded-[60px] for a full pill shape.

Dark mode

Components auto-adapt via CSS variable overrides on data-nav-theme="dark"

Media

Photography & video

Portraits

Aspect ratios

16:9

4:3

1:1

Guidelines

Warm, natural lighting — avoid harsh flash or overly saturated color
Video backgrounds should be dark (#111) for maximum contrast
Use Next.js Image component with remote patterns for Strapi assets
Apply rounded-lg to all media containers

Tokens

Design tokens

Reference

Colors

TokenValueNotes--background38 22% 93%#F1EEE9 — paper--foreground210 23% 3%#080A0D — ink--secondary37 14% 89%#E6E3DE--muted-foreground0 0% 58%#959595 — charcoal--border0 0% 70%#B3B3B3--pink341 100% 88%#FFC3D6--yellow48 100% 74%#FFE57B--card0 0% 100%#FFFFFF

Typography

TokenValueNotes--font-messina-sansMessina Sans, sans-serifPrimary typeface--font-geist-monoGeist Mono, monospaceCode & tokensbody wght480Default body weightheading wght680Default heading weight

Spacing

TokenValueNotessection gap4.375rem / 6rem / 8remmobile / desktop / cinemagrid cols18 / 22 / 30mobile / tablet / desktopcontent insetcol 2–16 / 3–18 / 8–16SIZE_STYLES.insetcontent normalcol 2–16 / 3–18 / 3–26SIZE_STYLES.normal

Border Radius

TokenValueNotes--radius0.5remBase radius (8px)--radius-mdcalc(var(--radius) - 2px)6px--radius-smcalc(var(--radius) - 4px)4pxbutton radius60pxPill shape

Shadows

TokenValueNotesshadow-sm0 1px 2px 0 rgb(0 0 0 / 0.05)Preferred maximumshadow0 1px 3px 0 rgb(0 0 0 / 0.1)Use sparingly