Brand Guidelines

Design System

Colors, typography, gradients, and components used across the TechTank TO website.

Colors

Color palette

Brand

Teal

#2A6B7C

Ring / focus, kicker labels

Teal Dark

#1B4B5A

Primary (light mode)

Amber

#FFBC55

Warning / secondary CTA

Amber Dark

#EFA020

Overlines, hover links

Accent

Coral

#E87C4E

Destructive / orange accent

Mint

#5B9A8B

Check icons, accent green

Seafoam

#A8D5D8

Secondary (light mode)

Sand

#F7EDE2

Warm off-white, gradients

Peach

#F5D4C1

Warm gradient base

Blush

#EABFBF

Pink accent

Theming

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.

Light mode
bg-background#F9F6F2
text-foregroundteal-dark
bg-muted#EBF3F4
text-muted-foreground#4A6670
bg-cardwhite / 70%
text-card-foregroundteal-dark
bg-primaryteal-dark
text-primary-foregroundwhite
bg-secondaryseafoam
text-secondary-foregroundteal-dark
bg-accentseafoam / 20%
text-accent-foregroundteal-dark
bg-destructivecoral
text-destructive-foregroundwhite
bg-warningamber
text-warning-foregroundteal-dark

Utilities

borderteal-dark / 12%
ringteal
inputteal-dark / 18%
Dark mode
bg-background#0D2B35
text-foreground#E8F4F5
bg-muted#1A3D4A
text-muted-foreground#8BBEC6
bg-cardteal-dark / 50%
text-card-foreground#E8F4F5
bg-primaryseafoam
text-primary-foreground#0D2B35
bg-secondaryteal-dark
text-secondary-foregroundseafoam
bg-accent#1E4A58
text-accent-foregroundseafoam
bg-destructivecoral
text-destructive-foregroundwhite
bg-warningamber
text-warning-foregroundteal-dark

Utilities

borderseafoam / 15%
ringseafoam
inputseafoam / 20%
Theming

Gradient utilities

Each gradient has a paired dark variant in CSS — same class name, palette flips automatically.

Light mode
.gradient-brand

135° — seafoam → sand → peach

.gradient-brand-vertical

180° vertical — seafoam → sand → peach

.gradient-hero

160° — aqua → warm off-white → peach

.gradient-hero-soft

Soft brand gradient for CTA sections

Dark mode
.gradient-brand

135° — seafoam → sand → peach

.gradient-brand-vertical

180° vertical — seafoam → sand → peach

.gradient-hero

160° — aqua → warm off-white → peach

.gradient-hero-soft

Soft brand gradient for CTA sections

Typography

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 pattern
Components

Buttons

Variants

Sizes

With icons

States

Components

Tags & Badges

Variants

DefaultSecondaryWarningDestructiveOutline

Sizes

Medium (default)Small

CSS tag utilities

tag filledtag outline
Components

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–100

Attendees per event

Hover-link card

Used for downloadable resources and media kit assets.

Components

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

Components

Process stepper

1

Initial contact

Step description goes here.

2

Scoping call

Step description goes here.

3

Confirm details

Step description goes here.

4

Marketing kickoff

Step description goes here.

5

Event day

Step description goes here.

CTA section pattern

Gradient CTA section

Used at the bottom of every get-involved sub-page. Always ends with a primary action.