Brand Guidelines

Logo, color, and typography reference for the GrowthX brand.

GrowthX Brand Skill

Markdown reference for AI tools — logo, color, typography, and layout patterns.

Logo

Specimens

Minimum height: 14px

Clear space: logo height on all sides

Usage

Do

Use on paper (#FFFFFF) or dark (#080A0D) 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

Typography

Messina Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz0123456789

Messina Sans Mono

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz0123456789

Weight ramp

400 Regular

The quick brown fox jumps over the lazy dog

450 Book

The quick brown fox jumps over the lazy dog

500 Medium

The quick brown fox jumps over the lazy dog

600 Semibold

The quick brown fox jumps over the lazy dog

700 Bold

The quick brown fox jumps over the lazy dog

Type scale

Hero

clamp(2.25rem, 4vw + 0.75rem, 4rem)-0.05em0.99700

Turn your website into a growth engine.

Display

clamp(1.5rem, 2vw + 0.5rem, 2.5rem)-0.04em0.95700

Ready to accelerate your growth?

H1

clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem)-0.04em1.15700

Growth that compounds.

Body

clamp(1rem, 0.5vw + 0.875rem, 1.125rem)-0.02em1.4450

We structure knowledge work as living code: versioned, observed, and continuously improved through AI-driven workflows.

Eyebrow

0.9375rem-0.01emnormal500

Impact Snapshot

Caption

0.75rem-0.01emnormal500

Founded · San Francisco, CA

Grid

GrowthX uses a bordered grid system across all formats — web, slides, and print. Grid lines are visible as 1px borders, creating structure without heavy chrome.

Slide grid

Apply the same bordered grid to presentation decks. Use 1px lines at 10% black to divide content zones. Keep consistent margins and cell padding.

Title

Two-column

Stats grid

Preview

Q2 2026 Results

Impact

Organic growth at a glance.

200x

Increase in organic traffic

12M

Pages indexed across clients

3x

Demo requests per quarter

Organic traffic by quarter

Q1 ’24Q2 ’26

Featuring

Abnormal AI

Enterprise security

Site frame

max-width: 1400px · margin: 25px · border-x: rgba(0,0,0,0.1)

Rules

Borders are the grid

Use 1px borders at rgba(0,0,0,0.1) to separate sections. Never use margin or gap for major section separation.

Only border-t between adjacent sections

Bottom borders come from the next section’s top to avoid double lines.

50px cell padding

Desktop: p-[50px]. Mobile: px-6 py-8.

Two-column splits use border-r

Left column gets md:border-r border-foreground/10.

Full-bleed dividers

Use absolute left-[-50vw] right-[-50vw] h-px for page-level breaks.

Anatomy

Element	Value	CSS
Frame width	1400px	max-w-[1400px]
Frame margin	25px	sm:mx-[25px] xl:mx-auto
Frame border	1px, 10% black	sm:border-x border-foreground/10
Section padding	50px / 24px	px-6 py-8 md:p-[50px]
Section divider	1px, 10% black	border-t border-foreground/10
Internal divider	1px, 6% black	border-foreground/6
Column split	border-r on left	md:border-r border-foreground/10

Buttons

All interactive CTAs use the Button component with a tone prop. Never recreate button styles from scratch.

Standard

tone="cta"

Primary action — hero, header, key conversion points

tone="cta-sm"

Compact CTA — inline CTAs, smaller layouts

tone="cta-outline"

Secondary action — paired with a primary CTA

On dark surfaces

Used on bg-foreground surfaces — cookie banner, notification bars. The semantic --background token provides contrast without any CSS variable overrides.

tone="cta-inverse"

Confirm / primary action

tone="cta-inverse-outline"

Dismiss / secondary action