Colors
Navy
Teal + Orange
Surfaces
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
Section Label
Example Label
font-heading text-[1.0625rem] font-medium uppercase tracking-widest + color: #faaa68
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
On Dark (#142d63 navy-800)
white
17.4:1Passwhite/80
5.2:1Passorange-400
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
Ready to start?
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 Backgrounds
Alternating pattern: Hero (dark) → white → color → white → color → dark → white → color → white → CTA. Three brand tint colors with matching FloatingShapes.
Navy Blue
#e2e6ef
Wave key: teal-tint
Shapes: #142d63, #1e3f7a, #2a5090
Warm Orange
#faeadb
Wave key: orange-tint
Shapes: #e8943a, #d4782a, #faaa68
Teal Blue
#daeef0
Wave key: blue-tint
Shapes: #028393, #1a8a9a, #2abfcf
Section Dividers
Gradient Line
variant="gradient-line" Subtle teal gradient, max-w-xs. Default between light sections.
Branded S Compass
variant="geometric" Centered S with tapered compass lines. Use between major content sections.
Wave Transition
variant="wave" from="light" to="dark" Use at light/dark section boundaries only.
Hero
Cinematic image bg with gradient overlay.
Eyebrow Copy
You statement headline goes here.
Supporting copy that names the visitor's pain. Then a bold turn: We fix that.
image: AI-generated atmospheric, 16:9, 2K
overlay: linear-gradient(to right, rgba(10,26,58,0.92) 0%, rgba(26,55,112,0.7) 70%, rgba(33,64,128,0.5) 100%)
eyebrow: #faaa68 (orange-400), xs uppercase tracking-widest
headline: #ffffff, SplitText word-by-word reveal
body: rgba(255,255,255,0.85)
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.