Back to Home

Style Guide

Brand guidelines and design system documentation

Brand Attributes

Calm Precision
Order, clarity, low noise
Systems Thinking
Grids, diagrams, subtle structure
Pragmatic Speed
Fast, minimal, low JS
Trust & Credibility
Legible, high contrast, readable

Colors

Light Theme

Brand
hsl(221, 83%, 53%)
Background
hsl(0, 0%, 100%)
Foreground
hsl(222, 47%, 11%)
Muted
hsl(220, 14%, 96%)
Accent
hsl(173, 80%, 40%)

Dark Theme

Brand (Dark)
hsl(219, 85%, 66%)
Background (Dark)
hsl(222, 47%, 11%)
Foreground (Dark)
hsl(0, 0%, 100%)

Typography

--step-4 (2.44rem - 3.20rem)

Heading 1 - The quick brown fox

--step-3 (1.95rem - 2.40rem)

Heading 2 - The quick brown fox

--step-2 (1.56rem - 1.88rem)

Heading 3 - The quick brown fox

--step-1 (1.25rem - 1.50rem)
Large text - The quick brown fox
--step-0 (1.00rem - 1.06rem)

Body text - The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow.

--step--1 (0.83rem)
Small text - The quick brown fox jumps over the lazy dog
Monospace (Code)
const greeting = "Hello, World!";

Components

Buttons

Button Sizes

Badges

Default
Secondary
Outline
Destructive
Kubernetes
Docker
Terraform

Cards

Basic Card
This is a standard card component

Card content goes here with proper spacing and typography.

Interactive Card
Hover to see the effect

This card has hover states with shadow and transform.

Motion

Easing Function
cubic-bezier(0.22, 0.61, 0.36, 1)
Durations
120ms - Quick
220ms - Standard
420ms - Slow

All transitions use prefers-reduced-motion support

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

Usage Guidelines

✓ Do
  • Use brand colors sparingly (max 2 per view)
  • Maintain WCAG AA contrast ratios
  • Use system fonts (Geist) for consistency
  • Keep animations subtle and purposeful
  • Use semantic HTML and ARIA labels
  • Test with keyboard navigation
✗ Don't
  • Use heavy gradients or complex patterns
  • Add animations that interfere with content
  • Use more than 3 font weights in a single view
  • Override focus states without providing alternatives
  • Introduce third-party tracking without consent
  • Block rendering with external font requests

Accessibility Checklist

  • ✓WCAG AA contrast ratios for all text/background combinations
  • ✓Focus-visible ring on all interactive elements
  • ✓Semantic headings in logical order
  • ✓Meaningful alt text for all images
  • ✓Motion respects prefers-reduced-motion
  • ✓Keyboard navigation support