Internal Style Guide

Design styles for
Web Impetus.

A clean reference for the brand’s typography, color system, text styles, and effects.

Typography
Fonts

Primary and accent typefaces used across the Web Impetus brand system.

Primary — All UI
The quick brown
fox jumps over.
Plus Jakarta Sans
Used for everything — headings, body, buttons, labels, nav
Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700 ExtraBold 800
Accent — Hero Payoff Only
Your revenue
isn't.
Instrument Serif
Italic only. Used exclusively for the emotional payoff phrase in hero and section headlines. Never in body copy or cards.
Italic 400 only
Color System
Color Styles

Click any swatch to copy the hex code to your clipboard.

Brand Colors
Brand / Accent
#00A896
Copied!
Brand / Accent Dark
#028C7D
Copied!
Brand / Accent Light
#E0F5F3
Copied!
Neutrals
Neutral / Dark
#1A1A1A
Copied!
Neutral / Mid
#555555
Copied!
Neutral / Soft
#888888
Copied!
Neutral / BG
#FAFAFA
Copied!
Neutral / White
#FFFFFF
Copied!
Section Backgrounds
Section / Light
#FAFAFA — most sections
Copied!
Section / White
#FFFFFF — alternating white
Copied!
Section / Dark
#1A1A1A — checklist, tech, CTA
Copied!
Section / Footer
#111111 — footer bar only
Copied!
Pastel Service Card Colors — create all 6 pairs (BG + Icon background)
Pastel / Green
#E8F5E9 BG
#C8E6C9 Icon
#2E7D32 Text
Pastel / Blue
#E3F2FD BG
#BBDEFB Icon
#0277BD Text
Pastel / Orange
#FFF3E0 BG
#FFE0B2 Icon
#E65100 Text
Pastel / Purple
#F3E5F5 BG
#E1BEE7 Icon
#6A1B9A Text
Pastel / Teal
#E0F5F3 BG
#B2DFDB Icon
#028C7D Text
Pastel / Yellow
#FFF9E6 BG
#FFF3C4 Icon
#E65100 Text
Typography
Text Styles

Reference styles for headings, body copy, labels, and UI text.

Style Name Specimen Specs
Heading/H1
Revenue.
Plus Jakarta Sans 64px Bold 700 −3.5% tracking
Hero main headline. Scale to ~44px on mobile.
Heading/H1 Serif
Your revenue isn't.
Instrument Serif 72px Italic 400 −3% tracking
Payoff phrase in hero only. Set font style to Italic after creating.
Heading/H2
Section Heading
Plus Jakarta Sans 48px Bold 700 −3% tracking
All section titles. Scale to ~32px on mobile.
Heading/H3
Card Title or Sub-heading
Plus Jakarta Sans 19px Bold 700
Card titles, FAQ questions, dropdown item names.
Body/Large
Intro paragraph or hero subheadline text.
Plus Jakarta Sans 18px Medium 500 1.65 line-height
Hero sub, section intros.
Body/Default
Standard body copy for most paragraphs and descriptions.
Plus Jakarta Sans 16px Regular 400 1.6 line-height
Body/Small
Card descriptions, secondary body text and FAQ answers.
Plus Jakarta Sans 15px Regular 400 1.6 line-height
Body/XSmall
Fine print, small card labels, badge text.
Plus Jakarta Sans 14px Regular 400 1.5 line-height
Label/Eyebrow
What We Do
Plus Jakarta Sans 12px SemiBold 600 12% tracking Uppercase
Section eyebrow labels. Color: Neutral/Soft on light, Brand/Accent on dark.
Label/Small
Badge text or pill label
Plus Jakarta Sans 13px SemiBold 600
Button/Primary
Get in Touch →
Plus Jakarta Sans 16px SemiBold 600
Primary CTA buttons.
Button/Secondary
See Our Work
Plus Jakarta Sans 15px SemiBold 600
Secondary and outline buttons.
Stat/Number
65+
Plus Jakarta Sans 72px Bold 700 −4% tracking
Homepage big stat numbers only (65+ Projects, 7+ Years, 40+ Businesses).
Step 4
Effect Styles (Shadows)

Reference shadows used across buttons, cards, and interface elements.

Shadow/Button Primary
X: 0 · Y: 8px
Blur: 24px · Spread: 0
Color: #00A896 · 30%
Shadow/Button Hover
X: 0 · Y: 12px
Blur: 28px · Spread: 0
Color: #00A896 · 35%
Shadow/Card
X: 0 · Y: 2px
Blur: 12px · Spread: 0
Color: #000000 · 6%
Shadow/Card Hover
X: 0 · Y: 8px
Blur: 24px · Spread: 0
Color: #000000 · 10%
Shadow/Nav
X: 0 · Y: 1px
Blur: 0 · Spread: 0
Color: #000000 · 8%