Colors
Navy
Teal
Orange
500 primary (eyebrows + links) · 600 hover · 400 secondarySurfaces
Type
Space Grotesk: Display
Ambitious
ideas deserve
a sidekick with
superpowers that ship fast
DM Sans: Body
Strategy, design, development, and marketing. We bring the firepower so you can focus on the vision.
We're a crew of strategists, designers, and builders who believe great work happens when ambition meets execution.
Secondary text, captions, meta information, and supporting details.
Timestamps, auxiliary labels, and supplementary content.
Weights
Aa
400 Regular
Aa
500 Medium
Aa
700 Bold
Eyebrows
Pill: hero and page-level labels, left aligned. Centered with rules: section heads. Both teal, text-xs, wide tracking.
Contrast
WCAG AA requires 4.5:1 for normal text, 3:1 for large bold.
On Light (#fafafa)
navy-700 on background
navy-500 on background
navy-400 on background
teal-600 on background
teal-500 on background
orange-600 on background
orange-500 (primary) on background
On Dark (#142d63 navy-800)
white
17.4:1Passwhite/80
5.2:1Passorange-500 (primary)
4.9:1Passorange-400 (secondary)
8.5:1Passteal-500
3.1:1Largewhite/60
3.5:1FailSpacing
8px base unit.
Effects
Shadows
sm
Subtle lift
md
Cards
lg
Modals
glow
Teal accent
Border Radius
Transitions
Fast
150ms · Hovers, focus
Base
300ms · Color, opacity
Slow
500ms · Layout shifts
Components
Cards
Surface
White bg, border, teal accent on hover.
Elevated
Gray bg, no border, shadow on hover.
Dark
For contrast sections or CTA blocks.
CTA Banner
Let's Build Something Great
Drop us a line and let's get the conversation started.
Get StartedScroll Reveal
This block animated in
Fade up 30px, 0.6s, power2.out. Wrap anything in <ScrollReveal>
Section Surfaces
Sections sit on the page background and separate with space and a hairline border, not color bands or waves. Every surface has a dark twin.
Background
bg-background / dark:iron-950
Surface (cards)
bg-surface / dark:iron-850
Elevated
bg-elevated / dark:iron-900
Section Dividers
Default: border-t border-border between sections. <SectionDivider variant="gradient-line" /> when a section needs a softer break.
Hero
Ambient glow, copy first, light and dark.
You Statement Headline Goes Here
Supporting copy that names the visitor's pain. Then a bold turn: We fix that.
surface: page background, no photo, no overlay
glow: blurred teal-to-orange gradient behind the copy (dark: teal-600/20 to orange-600/20)
eyebrow: teal pill, text-xs, tracking 0.16em
headline: navy-800 / white, leading-[1.02], key phrase in <Accent>
buttons: <CtaButton> primary + outline
Testimonials
Dark band with glassmorphic cards.
“Example testimonial quote that shows the card pattern. The glassmorphic background and orange stars create a premium feel on the dark band.”
Client Name
Company Name
band bg: bg-navy-800, full-width
card bg: rgba(255,255,255,0.05) with 0.1 border
stars: #faaa68 (orange-400), ★ entity
quote: rgba(255,255,255,0.8), text-sm
name: #ffffff, font-bold
Interactive
Motion-powered components. Hover and interact.
Magnetic Button
<MagneticButton> wraps any element. Pulls toward cursor within ~60px. Spring physics on release.
Split Text Animation
<SplitText> splits into word or char spans. GSAP stagger animation. SSR-safe.
3D Tilt Card
Hover me
This card tilts in 3D based on your cursor position. 6 degrees max, spring physics.
Works on dark too
Same tilt effect, any background.
<AnimatedCard> wraps children. Mouse-tracking rotateX/Y with spring easing.
Image Card (Services Pattern)
Service Name
One-line benefit statement.
Short description of what the service does for the client.
3:2 aspect image + p-7 text block. Teal benefit line. Hover: shadow-md + border-teal-200.
Animation
Duration, easing, and the decision framework.
Duration Scale
Easing Curves
Premium
cubic-bezier(0.25, 0, 0, 1)
Default. Fast start, slow end.
Spring
stiffness: 300, damping: 30
Motion hover/tap. Natural bounce.
Power2 Out
GSAP power2.out
Scroll reveals. Clean deceleration.
Back Out
GSAP back.out(1.4)
Hero entrances. Slight overshoot.
Decision Framework
Rule: CSS first. If CSS can't do it, use Motion. If Motion can't do it, use GSAP.
Voice
Do
- ✓ Talk to a smart friend, not a boardroom
- ✓ Lead with energy, follow with substance
- ✓ Active voice, short sentences, punchy rhythm
- ✓ Be specific: "We ship fast" not "We deliver solutions"
- ✓ Humor when it fits naturally
Don't
- ✗ No Lorem ipsum, always real copy
- ✗ No corporate jargon or buzzwords
- ✗ No "Welcome to our website"
- ✗ No stiff, formal, boardroom language
- ✗ No generic gradients or stock photos
Logo
Space Grotesk Bold. Teal (#028393) on dark, navy (#142d63) on light. Clear space: 1× cap height on all sides.