Vault Design System & Style Guide

Vault Learning Games Library - Design System

Overview

The Vault Learning Games Library employs a modern, clean design system that balances professionalism with approachability. The design emphasizes accessibility, readability, and a distinctive brand identity centered around learning and discovery.

Color Palette

Primary Colors

Teal Primary
Teal Primary
#00ECD0
rgb(0, 236, 208)
Primary brand color, used for CTAs, links, highlights, and accent elements
Teal Dark
Teal Dark
#00B8A3
rgb(0, 184, 163)
Hover states, active elements, and gradient endpoints
Black
Black
#000000
rgb(0, 0, 0)
Header background, hero sections, footer, high-contrast areas

Text Colors

Charcoal
Charcoal
#333
rgb(51, 51, 51)
Primary body text color
Gray 900
Gray 900
#1f2937
rgb(31, 41, 55)
Headings, titles, high-emphasis text
Gray 700
Gray 700
#374151
rgb(55, 65, 81)
Secondary text, labels, medium-emphasis content
Gray 500
Gray 500
#6b7280
rgb(107, 114, 128)
Descriptions, metadata, low-emphasis text
Gray 400
Gray 400
#9ca3af
rgb(156, 163, 175)
Privacy notes, subtle text, placeholders

Background Colors

Light Gray
Light Gray
#f8f9fa
rgb(248, 249, 250)
Page background, subtle content containers
Gray 100
Gray 100
#f3f4f6
rgb(243, 244, 246)
Alternate backgrounds, code blocks, input fields
Gray 200
Gray 200
#e5e7eb
rgb(229, 231, 235)
Borders, dividers, separators
White
White
#ffffff
rgb(255, 255, 255)
Card backgrounds, content containers, text on dark backgrounds

Hero Section Colors

Gray 300
Gray 300
#d1d5db
rgb(209, 213, 219)
Hero section descriptions, text on dark backgrounds
Light Blue Gray
Light Blue Gray
#e5e7eb
rgb(229, 231, 235)
Hero section subtitles
Light Gray
Light Gray
#cccccc
rgb(204, 204, 204)
Vault brand text, secondary text on dark backgrounds

Tag Colors

Grade Tag
Grade Tag
Background: #dbeafe
Text: #1e40af
Grade level tags (light blue background, dark blue text)
Subject Tag
Subject Tag
Background: #dcfce7
Text: #166534
Subject tags (light green background, dark green text)
Topic Tag
Topic Tag
Background: #fef3c7
Text: #92400e
Topic tags (light amber background, dark amber text)
Maker Tag
Maker Tag
Background: #f3e8ff
Text: #7c3aed
Maker/creator tags (light purple background, dark purple text)

Gradients

Primary Gradient

Usage: Buttons, CTAs, hero titles, highlights

Code: linear-gradient(45deg, #00ECD0, #00B8A3)

Newsletter Background

Usage: Newsletter section, dark content areas

Code: linear-gradient(135deg, #1f2937 0%, #374151 100%)

Placeholder Background

Usage: Image placeholders, empty states

Code: linear-gradient(135deg, #f3f4f6, #e5e7eb)

Typography

Font Families

The Vault design system uses two primary typefaces:

Body Text: IBM Plex Sans

The quick brown fox jumps over the lazy dog

Font Family
IBM Plex Sans
Fallback Stack
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Primary Weight
300 (Light)
Usage
Body text, paragraphs

Headings: Lato

The quick brown fox jumps over the lazy dog

Font Family
Lato
Fallback Stack
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Primary Weight
700 (Bold)
Usage
Headings, titles, navigation

Monospace: Courier New

#00ECD0 | rgb(0, 236, 208) | font-weight: 700

Font Family
Courier New
Fallback
monospace
Usage
Code, color codes, retro elements

Type Scale

Hero Title - 3.5rem

56px / Used in hero sections

Page Title - 3rem

48px / Main page headings

Section Title - 2.5rem

40px / Section headings, newsletter titles

Subsection Title - 1.5rem

24px / Filter headers, content sections

Card Title - 1.25rem

20px / Game card titles

Large Body - 1.2rem

19.2px / Page descriptions, emphasized content

Medium Body - 1.1rem

17.6px / Hero descriptions, buttons, newsletter text

Body Text - 1rem

16px / Default body text, form inputs

Small CTA - 0.9rem

14.4px / Navigation CTA buttons

Small Text - 0.875rem

14px / Tags, metadata, filter options

Tiny Text - 0.75rem

12px / Counts, privacy notes, supplementary info

Font Weights

  • 300 (Light): Body text, paragraphs
  • 400 (Regular): Standard weight for UI elements
  • 500 (Medium): Tags, emphasized UI elements
  • 600 (Semi-Bold): Buttons, labels, important text
  • 700 (Bold): Headings, titles, navigation, CTAs

Line Height

  • Body Text: 1.6 - Comfortable reading for paragraphs
  • Headings: 1.2-1.3 - Tighter spacing for impact
  • Content: 1.7 - Enhanced readability for long-form content

Letter Spacing

  • CTA Buttons: 0.5px - Improved readability for uppercase text
  • Brand Text: 0.5px - Enhanced spacing for uppercase branding

Spacing System

The design uses a consistent spacing scale based on rem units:

0.25rem (4px)
Tight spacing, small gaps
0.5rem (8px)
Element gaps, tag spacing
0.75rem (12px)
Input padding, filter groups
1rem (16px)
Standard padding, margins
1.5rem (24px)
Card padding, content spacing
2rem (32px)
Section padding, large gaps
3rem (48px)
Section margins, major spacing
4rem (64px)
Large section padding

Shadows

Shadows add depth and visual hierarchy to the interface:

Small Shadow
0 2px 4px rgba(0,0,0,0.1)
Subtle depth
Medium Shadow
0 4px 6px rgba(0,0,0,0.1)
Cards, containers
Large Shadow
0 8px 25px rgba(0,0,0,0.15)
Hover states, modals
Teal Shadow
0 10px 25px rgba(0,236,208,0.3)
CTA buttons, brand elements

Border Radius

Rounded corners create a friendly, modern aesthetic:

  • 4px: Small elements, tags, code blocks
  • 6px: Inputs, small buttons, filter elements
  • 8px: Cards, images, standard buttons
  • 12px: Large cards, hero images, sections
  • 20px: Pills, tags, rounded elements
  • 50%: Circular elements, navigation arrows

Components

Buttons

Primary CTA Button

Gradient background, bold weight, rounded corners
background: linear-gradient(45deg, #00ECD0, #00B8A3)

Navigation CTA

Solid teal background, uppercase, letter-spacing
background: #00ECD0

Subtle gray background, full-width, medium weight
background: #f3f4f6

Tags

Grade K-2 Math Addition PBS Kids

Rounded pill shape, colored backgrounds with semantic meaning
Grade (blue) | Subject (green) | Topic (amber) | Maker (purple)

Cards

🎮

Game Title

A brief description of the game that explains what it's about and what students will learn.

Grade 3-5 Science

White background, rounded corners, shadow for depth
Fixed image height (220px), flexible content padding
Hover effect: transform: translateY(-5px)

Form Inputs

Light border, rounded corners
Focus state: border-color: #00ECD0

Accessibility

Color Contrast

All color combinations meet WCAG 2.1 AA standards minimum:

  • Body text (#333 on #f8f9fa): Contrast ratio 12.6:1 ✓
  • Headings (#1f2937 on white): Contrast ratio 16.1:1 ✓
  • Primary button (white on #00ECD0): Contrast ratio 4.8:1 ✓
  • Tag text (various on light backgrounds): All exceed 7:1 ✓

Focus States

All interactive elements have visible focus states:

  • Inputs: 2px solid teal border (#00ECD0)
  • Buttons: Teal outline with box-shadow
  • Links: Teal color change on hover

Touch Targets

All interactive elements meet minimum touch target size:

  • Buttons: Minimum 44px height
  • Navigation links: Adequate padding for 44px touch area
  • Cards: Entire card is clickable

Layout & Responsive Design

Breakpoints

  • Desktop: Default (1600px max container)
  • Tablet: 1024px and below
  • Mobile: 768px and below
  • Small Mobile: 480px and below

Grid Systems

Game Masonry (3-column)

  • Desktop: 3 columns
  • Tablet: 2 columns
  • Mobile: 1 column
  • Gap: 2rem (desktop), 1.5rem (tablet), 1rem (mobile)

Screenshots Grid (3x3)

  • Desktop: 3 columns
  • Tablet: 2 columns
  • Mobile: 1 column
  • Gap: 0.75rem

Animation & Transitions

Timing Functions

  • Standard: 0.3s ease
  • Hover states: transform 0.3s ease, box-shadow 0.3s ease
  • Focus states: border-color 0.3s ease
  • Button interactions: all 0.3s ease

Common Animations

  • Hover lift: transform: translateY(-2px) to translateY(-5px)
  • Glow animation: Pulsing opacity on gradient borders
  • Pulse animation: Scale transformation for attention

Design Recommendations

Based on the current design system analysis, here are recommendations for improvement:

Strengths

  1. Consistent Color Palette: Well-defined primary colors with good contrast
  2. Clear Typography Hierarchy: Distinct heading and body text families
  3. Accessible Design: Good color contrast ratios throughout
  4. Modern Aesthetics: Clean, contemporary design with gradients and shadows
  5. Semantic Tag Colors: Color-coded tags for different content types

Areas for Enhancement

  1. Design Tokens

    • Consider implementing CSS custom properties (variables) for easier theme management
    • Create a centralized token system for colors, spacing, and typography

  2. Component Documentation

    • Expand component library with more interactive examples
    • Document all states (default, hover, active, disabled, focus, error)

  3. Responsive Typography

    • Implement fluid typography using clamp() for better scaling across devices
    • Consider reducing font sizes more aggressively on mobile

  4. Dark Mode

    • The black backgrounds are already present - consider a full dark mode variant
    • Define dark mode color palette and switching mechanism

  5. Iconography System

    • Establish icon style guidelines (size, color, usage)
    • Document emoji vs. icon font vs. SVG usage

  6. Motion Design

    • Create timing function constants for consistent animations
    • Document reduced motion preferences for accessibility

  7. Spacing System

    • Formalize the spacing scale into documented design tokens
    • Consider a more systematic approach (4px/8px base scale)

Getting Started

To use this design system in new components:

  1. Colors: Use the documented hex codes or implement CSS variables
  2. Typography: Apply Lato for headings, IBM Plex Sans for body text
  3. Spacing: Use rem-based spacing from the documented scale
  4. Components: Reference component demos for consistent styling
  5. Accessibility: Ensure all color combinations meet WCAG AA standards
  6. Responsive: Test across all documented breakpoints

Version History

  • v1.0 (December 2025) - Initial design system documentation

This style guide is a living document and should be updated as the design system evolves.