Component: Sticky Header Preview
CAPStech Design System
Visual workspace for brand assets, tokens, typography, and reusable components.
1. Color Tokens (60 / 30 / 10 Rule)
#009C92
Teal (Primary)
Primary brand & links
#073C3A
Deep Petrol
Headlines & dark backgrounds
#8FDED3
Mint
Highlights & soft backgrounds
#FF6B4A
Coral (Accent)
Spice, use sparingly (CTA)
#FFC24B
Amber
Secondary accents & charts
#11201F
Ink (Body Text)
Main text on light backgrounds
#46514F
Graphite (Muted)
Secondary text & captions
#EDF3F1
Cloud (Page Bg)
Light background
#FFFFFF
White
Base components
2. Typography Scale
Display (Space Grotesk Bold, 48px)
Smart IT. Sharp design.
H1 (Space Grotesk Bold, 36px)
Boka ett kostnadsfritt möte
H2 (Space Grotesk SemiBold, 28px)
Så jobbar vi med AI & Automation
H3 (Space Grotesk Medium, 22px)
Lead Signals — 3k kr/mån
Body Large (Inter Regular, 18px)
Vi upptäcker affärs- och livshändelser i svenska offentliga register och berikar dem.
Body (Inter Regular, 16px)
Smart IT och skarp design behöver inte kosta miljoner. Vi bygger snabba, säkra Next.js-lösningar integrerade med avancerad AI.
Caption (Inter Medium, 13px)
* GDPR-efterlevnad berättigat intresse, IMY-2024-medvetet.
Code / Tech (JetBrains Mono, 14px)
DATABASE_URL="mysql://user:pass@host:3306/capstech"
3. UI Component Primitives
Buttons
Badges
Teal BadgePetrol BadgeMint BadgeCoral BadgeOutline
4. Framer Motion Animations
FadeIn Primitive
This card fades in smoothly with a subtle translation on load.
StaggerChildren Primitive
Staggered Item #1
Staggered Item #2
Staggered Item #3
ScrollReveal Primitive
This component reveals itself as it enters the viewport.
Component: Footer Preview (Deep Petrol)