← Back to site

Style Guide

Brand system for Vibecheck Digital. Colors, typography, components, and usage guidelines.

01 / Colors

Off White
#F2F0EB
Page background
Warm Cream
#E5D9CB
Scroll transition (sunset)
Deep Navy
#1A2332
Text, headings, logo
Teal
#0891B2
Primary accent, CTAs
Teal Dark
#066D8C
Hover state
Bone
#D8CFBF
Neutral accent
Gray
#737373
Body text, descriptions
Lines
#DAD8D3
Borders, dividers

02 / Typography

HEADLINES / Fraunces (Variable, WONK axis)
Build the engine.
Not the campaign.
Fraunces 400 / -0.03em tracking / Size: clamp(36px, 5.5vw, 72px)
WONK AXIS DEMO
Systems that scale. Brands that last.
The WONK axis creates playful mixing between upright and italic letterforms
BODY / Inter
We design AI-native content systems that produce, distribute, and measure your marketing. Your brand grows without your team drowning.
Inter 400 / 1.6 line-height / Size: 16px base
LABELS + DATA / JetBrains Mono
CONTENT SYSTEMS · 3,964% GROWTH · 01 AUDIT & ARCHITECT
JetBrains Mono 500 / 0.08em tracking / uppercase / Size: 11px
TYPE SCALE
H1 Display
H2 Section Head
H3 Card Title
Body text at 16px with 1.6 line height for comfortable reading.
MONO LABEL

03 / Buttons

Button styles

Radius: 999px (full pill) · Padding: 16px 32px · Transition: 0.15s cubic-bezier
Primary: teal bg, white text, dot indicator · Active: 1px press-down + inset shadow

04 / Components

Cards

Content Systems

Talerico Group

Consulting firm with no time for marketing. We built a system: one 30-minute recording per month becomes a full content pipeline.

Background: #FFFFFF · Border: 1px solid #DAD8D3 · Radius: 16px · Padding: 40-48px
Hover: border darkens, subtle box-shadow (0 8px 32px rgba(0,0,0,0.04))

Labels

Section label
JetBrains Mono 500 · 11px · 0.08em tracking · Uppercase · Teal color

Tool pills

Claude GPT Gemini ElevenLabs Riverside
JetBrains Mono 500 · 13px · Pill radius (999px) · Teal border + text on hover

05 / Spacing

8px
16px
24px
32px
48px
64px
80px
Section padding: clamp(80px, 10vw, 140px) · Card padding: 40-48px · Grid gaps: 24px cards, 80px sections

06 / Motion

Transitions

QUICK (interactions)
0.15s
cubic-bezier(0.33, 0.01, 0.31, 0.99)
NORMAL (reveals)
0.8s
cubic-bezier(0, 0.57, 0.53, 1)
SCROLL EFFECTS
  • • Background sunset: progressive warmth (#F2F0EB → #E5D9CB) tied to scroll position
  • • Scroll reveals: translateY(32px) + opacity 0 → in-view state
  • • Problem section: pinned sticky, items slide from right on scroll progress
  • • Number tickers: count up with eased cubic on intersection
  • • WebGL fluid: mouse-reactive with smoothed lerp (0.03 factor)

07 / Brand Voice

We are

  • ✓ Direct, not corporate
  • ✓ Technical, not jargon-heavy
  • ✓ Confident, not arrogant
  • ✓ Warm systems, not cold automation

We avoid

  • ✕ Em dashes
  • ✕ "Leverage," "synergy," "utilize"
  • ✕ Claiming proprietary magic
  • ✕ Blaming people (blame the process)