Water Foundation Brand Kit & Theme System

Color Variable Grid

All color variables used in our Tailwind theme system

Primary Colors

primary-50

var(--color-primary-50)

primary-100

var(--color-primary-100)

primary-200

var(--color-primary-200)

primary-300

var(--color-primary-300)

primary-400

var(--color-primary-400)

primary-500

var(--color-primary-500)

primary-600

var(--color-primary-600)

primary-700

var(--color-primary-700)

primary-800

var(--color-primary-800)

primary-900

var(--color-primary-900)

primary-950

var(--color-primary-950)

Secondary Colors

secondary-50

var(--color-secondary-50)

secondary-100

var(--color-secondary-100)

secondary-200

var(--color-secondary-200)

secondary-300

var(--color-secondary-300)

secondary-400

var(--color-secondary-400)

secondary-500

var(--color-secondary-500)

secondary-600

var(--color-secondary-600)

secondary-700

var(--color-secondary-700)

secondary-800

var(--color-secondary-800)

secondary-900

var(--color-secondary-900)

secondary-950

var(--color-secondary-950)

Accent Colors

accent-50

var(--color-accent-50)

accent-100

var(--color-accent-100)

accent-200

var(--color-accent-200)

accent-300

var(--color-accent-300)

accent-400

var(--color-accent-400)

accent-500

var(--color-accent-500)

accent-600

var(--color-accent-600)

accent-700

var(--color-accent-700)

accent-800

var(--color-accent-800)

accent-900

var(--color-accent-900)

accent-950

var(--color-accent-950)

Typography & Spacing Patterns

Text styles and spacing demonstrations using theme variables

Typography Styles

Heading Large

Main page headings with bold weight

Typography & Spacing Test

text-3xl font-bold

Heading Medium

Section headings with semibold weight

Section Heading Example

text-2xl font-semibold

Body Text

Standard paragraph text with comfortable line height

This page demonstrates the theme system with CSS custom properties. Click the toggle button to switch between the default theme and the water theme.

text-base leading-relaxed

Small Text

Secondary information and captions

Secondary information and helper text

text-sm text-secondary-600

Component Spacing

Custom Spacing Button

Primary action with custom spacing variables

Custom Spacing

bg-primary-500 text-white px-lg py-sm rounded-md font-medium

Extended Spacing Button

Secondary action with larger spacing

More Spacing

bg-accent-500 text-white px-xl py-md rounded-lg font-medium

Interactive Demo

Custom SpacingMore Spacing