Lab 8: Creating a Visual Design System

Introduction

In this lab, you’ll create your first reusable visual design system: a structured set of decisions about color, typography, spacing, and components that developers and designers can consistently apply across an application.

You’ll begin by defining foundational design tokens (colors, fonts, spacing units), then create a small reusable style guide using CSS variables. You’ll then use an AI assistant to critique the clarity and visual consistency of your design system. Finally, you'll document your design principles so future contributors can use them effectively.

By the end of this lab, you’ll understand how modern teams create design systems and how to apply consistency at scale.

Learning Objectives

By the end of this lab, you will be able to:

Understand design systems as reusable collections of design tokens and rules
Create a simple but scalable style guide using CSS variables
Define core design tokens: color palette, typography, spacing
Apply tokens to basic components (button, card, text styles)
Use AI to critique and improve your visual consistency
Document design principles for clarity, accessibility, and component usage

Getting Started

Prerequisites

Before beginning this lab, ensure you have:

Basic HTML/CSS knowledge
A code editor (VS Code recommended)
A modern browser or VS Code for web viewing

Setup Instructions

Create a new project folder:

mkdir lab3_1_design_system
cd lab3_1_design_system

Create the following starter files:
- index.html
- styles.css
- design-system.md (for documentation)
Open the folder in your editor.

Lab Structure

This lab contains the following files:

README.md – Lab instructions and overview
index.html – Test page for your design system
styles.css – Your design tokens and components
design-system.md – Principles and guidelines

Exercise Overview

In this lab you will:

Define design tokens:
- Colors (primary, secondary, neutrals)
- Typography (font families, scale, weights)
- Spacing (8-pt scale or similar)
Implement a reusable CSS variables–based style guide
Build two core components using your design tokens:
- A button
- A card
Ask an AI assistant to critique your design system for:
- Contrast
- Clarity
- Naming consistency
- Scalability
Document design principles in your design-system.md

How to Work Through the Lab

Define tokens in styles.css using CSS variables
Apply tokens to simple HTML components in index.html
Refine by using AI feedback to improve variable naming, spacing, and readability
Document your final design system in design-system.md
Review the reflection questions at the end

Exercises

Exercise 1 - Create Your Design Tokens

Inside styles.css, define a root block with your core variables.

Example structure (do not copy exactly—create your own choices):

:root {
  /* Colors */
  --color-primary: #4A65F6;
  --color-secondary: #FFB100;
  --color-neutral-100: #ffffff;
  --color-neutral-900: #121212;

  /* Typography */
  --font-base: 'Inter', sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
}

Tasks

Choose a color palette (3–6 colors)
Choose 1–2 font families
Define a spacing scale (4, 8, or 10 pt system recommended)
Create variable names that are consistent and intuitive

Exercise 2 - Build Two Base Components

Inside styles.css, create reusable component classes using your tokens.

Component 1: Button

You must define:

Padding using spacing tokens
Typography using font tokens
Background using primary/secondary colors
Hover state

Example structure:

.btn {
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary);
  color: var(--color-neutral-100);
  border: none;
  border-radius: 6px;
  font-size: var(--font-size-md);
}

.btn:hover {
  background: var(--color-primary-hover);
}

Component 2: Card

Must include:

A container with padding and background
Title text styled with tokens
Body text with the base font size

Add simple demo HTML for testing:

<button class="btn">Click Me</button>

<div class="card">
  <h2 class="card-title">Card Title</h2>
  <p>Card body text goes here.</p>
</div>

Tasks

Apply tokens consistently
Add hover/focus states
Ensure contrast meets accessibility minimums

Exercise 3 - Use AI to Critique Your Style Guide

Ask an AI tool (ChatGPT or your preferred tool):

“Critique my design system: Are my variable names clear? Are my color choices accessible? Is my spacing scale consistent? Suggest improvements.”

Tasks

Paste your entire styles.css into the prompt
Incorporate at least two improvements recommended by the AI
Note in design-system.md what changes you made and why

Exercise 4 - Document Your Design Principles

Open design-system.md and document:

Required Sections

Color System
- Explain primary, secondary, and neutral usage
Typography System
- Describe when to use each font size
Spacing Rules
- Describe vertical vs horizontal spacing
Component Guidelines
- Buttons (variants, states, padding rules)
- Cards (layout, spacing)
Design Principles
- Consistency
- Accessibility
- Scalability
- Clarity

Tasks

Write a short justification for each design choice
Include examples (“Buttons always use var(--space-2) padding vertically…”)

Reflection Questions

How does defining design tokens improve scalability and consistency?
What tradeoffs did you consider when choosing your color palette?
How did AI critique influence your final design?
Which parts of your design system feel easiest to scale? Hardest?
If you were building a full design system, what would be the next components to add?

Tips for Success

Keep your naming convention extremely consistent
Choose a spacing scale and stick to it absolutely
Do not optimize for aesthetics—optimize for clarity and reuse
Follow WCAG AA color contrast minimums
Consider documenting a “do and don’t” example for each component