Design System
Colors, typography, gradients, and components used across the TechTank TO website.
Color palette
Brand
Teal
#2A6B7CRing / focus, kicker labels
Teal Dark
#1B4B5APrimary (light mode)
Amber
#FFBC55Warning / secondary CTA
Amber Dark
#EFA020Amber surfaces, dark-mode accent text
Accent
Coral
#E87C4EDestructive / orange accent
Mint
#5B9A8BCheck icons, accent green
Seafoam
#A8D5D8Secondary (light mode)
Sand
#F7EDE2Warm off-white, gradients
Peach
#F5D4C1Warm gradient base
Blush
#EABFBFPink accent
Semantic tokens
Every token resolves differently in light and dark mode. Never use raw brand hex values for text, surfaces, or borders in components — always use the semantic name.
bg-background#F9F6F2text-foregroundteal-darkbg-muted#EBF3F4text-muted-foreground#4A6670bg-cardwhite / 70%text-card-foregroundteal-darkbg-primaryteal-darktext-primary-foregroundwhitebg-secondaryseafoamtext-secondary-foregroundteal-darkbg-accentseafoam / 20%text-accent-foregroundteal-darkbg-destructivecoraltext-destructive-foregroundwhitebg-warningambertext-warning-foregroundteal-darkUtilities
borderteal-dark / 12%ringtealinputteal-dark / 18%overline#8A5200bg-background#0D2B35text-foreground#E8F4F5bg-muted#1A3D4Atext-muted-foreground#8BBEC6bg-cardteal-dark / 50%text-card-foreground#E8F4F5bg-primaryseafoamtext-primary-foreground#0D2B35bg-secondaryteal-darktext-secondary-foregroundseafoambg-accent#1E4A58text-accent-foregroundseafoambg-destructivecoraltext-destructive-foregroundwhitebg-warningambertext-warning-foregroundteal-darkUtilities
borderseafoam / 15%ringseafoaminputseafoam / 20%overlineamberGradient utilities
Each gradient has a paired dark variant in CSS — same class name, palette flips automatically.
.gradient-brand135° — seafoam → sand → peach
.gradient-brand-vertical180° vertical — seafoam → sand → peach
.gradient-hero160° — aqua → warm off-white → peach
.gradient-hero-softSoft brand gradient for CTA sections
.gradient-brand135° — seafoam → sand → peach
.gradient-brand-vertical180° vertical — seafoam → sand → peach
.gradient-hero160° — aqua → warm off-white → peach
.gradient-hero-softSoft brand gradient for CTA sections
Type scale
Display — Space Grotesk (.font-display)
Aa Display 6xl
Aa Display 5xl
Aa Display 4xl
Aa Display 3xl
Aa Display 2xl
Aa Display xl
Body — Inter (.font-sans)
Text xl — lead paragraphs
Text base — body copy, default size
Text sm — secondary copy, captions
Text xs — labels, overlines, metadata
Special — Overlines
Section overline patternButtons
Variants
Sizes
With icons
States
Tags & Badges
Variants
Sizes
CSS tag utilities
Cards
Icon card
Used for feature lists and benefit sections throughout the site.
Checklist — ring tint
- Speaker sourcing
- Marketing
- Recording
Checklist — amber tint
- Venue
- Food & drinks
- Optional: your speaker
Stat label
40–120
Attendees per event
Hover-link card
Used for downloadable resources and media kit assets.
Surfaces & effects
.glass
White 55%, blur 20px, saturate 180%
.glass-subtle
White 35%, blur 16px, saturate 150%
.glass-dark
Teal-dark 80%, blur 20px, saturate 180%
.shadow-soft
Layered drop shadows, default cards
.shadow-soft-lg
Deeper layered shadow for elevated panels
Process stepper
- Initial contact
- Step description goes here.
- Scoping call
- Step description goes here.
- Confirm details
- Step description goes here.
- Marketing kickoff
- Step description goes here.
- Event day
- Step description goes here.
Gradient CTA section
Used at the bottom of every get-involved sub-page. Always ends with a primary action.