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
Usage
Do
- Use on paper (#F8F7F5) 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
Typography
Messina Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz0123456789
Messina Sans Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz0123456789
Weight ramp
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Type scale
Turn your website into a growth engine.
Ready to accelerate your growth?
Growth that compounds.
We structure knowledge work as living code: versioned, observed, and continuously improved through AI-driven workflows.
Impact Snapshot
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
Impact
Organic growth at a glance.
Increase in organic traffic
Pages indexed across clients
Demo requests per quarter
Site frame
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 |