Brand Guidelines

Design System

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

Colors

Brand palette

Teal

#2A6B7C

Ring / focus, kicker labels

bg-teal / text-teal

Teal Dark

#1B4B5A

Primary (light mode)

bg-teal-dark / text-teal-dark

Amber

#FFBC55

Warning / secondary CTA

bg-amber / text-amber

Amber Dark

#EFA020

Overlines, hover links

bg-amber-dark / text-amber-dark

Colors

Accent tokens

Coral

#E87C4E

Destructive / orange accent

bg-coral / text-coral

Mint

#5B9A8B

Check icons, accent green

bg-mint / text-mint

Seafoam

#A8D5D8

Secondary (light mode)

bg-seafoam / text-seafoam

Sand

#F7EDE2

Warm off-white, gradients

bg-sand / text-sand

Peach

#F5D4C1

Warm gradient base

bg-peach / text-peach

Blush

#EABFBF

Pink accent

bg-blush / text-blush

Theming

Semantic tokens & gradients

Every semantic token adapts across .light and .dark — never reach for a raw brand token for text, backgrounds, or borders. Use bg-* for surfaces and text-*-foreground for text on top.

bg-backgroundtext-foreground

Page background / body text

bg-mutedtext-muted-foreground

De-emphasized surface / secondary text

bg-cardtext-card-foreground

Glass card surface

bg-primarytext-primary-foreground

Primary actions, buttons

bg-secondarytext-secondary-foreground

Secondary actions, icon fills

bg-accenttext-accent-foreground

Hover / active highlight states

bg-destructivetext-destructive-foreground

Errors, destructive actions

bg-warningtext-warning-foreground

Upcoming, caution states

border

Dividers, card borders

ring

Focus ring (keyboard nav)

input

Input field borders

Gradient utilities

Each gradient has a matching dark variant defined in CSS — the class name stays the same, the palette flips.

.gradient-brand

135° — seafoam → sand → peach

.gradient-brand-vertical

180° vertical — seafoam → sand → peach

.gradient-hero

160° hero — aqua → warm off-white → peach

.gradient-brand-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

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.

CTA section pattern

Gradient CTA section

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