General Assembly logo

Design Systems and Visual Hierarchy

Session Time: 120 minutes

Table of Contents

  1. Introduction: Trust and Consistency in AI Products
  2. The "DRY" Principle of Design: CSS Variables
  3. Visual Hierarchy: Directing the User's Attention
  4. AI-Assisted Design Critique
  5. Lab: Creating a Visual Design System
  6. Wrap-Up and Reflection

Learning Objectives

Upon completion of this session, participants will be able to:

  • Develop a unified visual system using CSS variables to maintain consistent typography, color palettes, and spacing.
  • Evaluate site readability and visual hierarchy to ensure users understand the priority of information (e.g., Model Output vs. Footer).
  • Use AI (Vision-enabled LLMs) to analyze screenshots of their UI and suggest aesthetic or accessibility enhancements.
  • Implement a reusable style guide that documents the "source of truth" for the application's design.

Session Breakdown

Segment Topic Duration (minutes)
Introduction Why Design Systems Build User Trust 15
Core Concepts CSS Variables (Design Tokens) & Typography 25
Technique Visual Hierarchy (Size, Color, Contrast) 25
AI Tooling Using Vision Models for UI Critique 15
Practical Lab Lab: Creating a Visual Design System 30
Conclusion Wrap-Up and Reflection 10
Total 120 minutes

1. Introduction: Trust and Consistency in AI Products

Learning objective: Understand the relationship between visual consistency and user trust in AI models.

As an AI Engineer, you spend weeks optimizing your model's F1 score. However, if your interface looks chaotic—inconsistent fonts, clashing colors, or misaligned buttons—users will subconsciously assume the model is also unreliable.

Design Systems are the solution. A Design System is a collection of reusable components and standards.

The Engineering Analogy

  • Ad-hoc Styling: Writing hardcoded strings everywhere. color: #3498db repeated 50 times.
  • Design System: Defining a constant PRIMARY_COLOR = "#3498db" and referencing it. If you change the brand, you change it in one place.

2. The "DRY" Principle of Design: CSS Variables

Learning objective: Develop a unified visual system using consistent palettes and variables.

In CSS, we use Custom Properties (Variables) to create "Design Tokens." These act like configuration files for your UI.

Defining Variables

We typically define these in the :root pseudo-class (global scope).

:root {
    /* Color Palette */
    --primary-color: #6366f1; /* Indigo */
    --secondary-color: #a5b4fc;
    --danger-color: #ef4444;
    --background-color: #f8fafc;
    --text-main: #1e293b;

    /* Typography Scale */
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --text-xl: 2.5rem;  /* 40px */
    --text-lg: 1.5rem;  /* 24px */
    --text-base: 1rem;  /* 16px */
    
    /* Spacing Units */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
}

Using Variables

.submit-btn {
    background-color: var(--primary-color);
    padding: var(--spacing-md);
    font-family: var(--font-body);
}

If you decide to rebrand from Indigo to Emerald, you only edit the --primary-color value in :root. This follows the DRY (Don't Repeat Yourself) principle you know from Python.

3. Visual Hierarchy: Directing the User's Attention

Learning objective: Evaluate site readability and hierarchy for usability.

Visual Hierarchy is the arrangement of elements in a way that implies importance. In an AI dashboard, the Model Output is usually the most important element.

Tools of Hierarchy

  1. Size: Larger elements demand attention first.
    • Rule: Your <h1> should be significantly larger than your <h2>.
  2. Color: Bright or bold colors draw the eye. Gray recedes.
    • Application: The "Generate" button should be high-contrast (Primary Color). The "Cancel" button should be low-contrast (Gray/Outline).
  3. Whitespace: Space creates focus.
    • Concept: Surrounding the AI's answer with padding makes it feel more authoritative.

Discussion: Imagine a "Chat with PDF" interface. Rank the following elements in order of visual importance (1 = Most important, 4 = Least):

  • The "Send Message" button.
  • The copyright footer text.
  • The Chat History window.
  • The Settings icon.

How would you use Size and Color to reflect this ranking?

4. AI-Assisted Design Critique

Learning objective: Use AI to analyze and enhance visual design elements.

Modern LLMs (like GPT-4o or Claude 3.5 Sonnet) have Vision capabilities. They can act as a senior designer sitting next to you.

The "Critique My UI" Workflow

  1. Take a screenshot of your app.
  2. Upload it to the AI.
  3. Prompt:

    "Act as a UI/UX expert. Analyze this screenshot of my AI dashboard.

    1. Identify 3 areas where the visual hierarchy is unclear.
    2. Check the color contrast for accessibility.
    3. Suggest a more modern color palette that conveys 'trustworthy' and 'scientific'."

Generating Design Tokens with AI

You can also ask AI to generate your CSS variables based on a "vibe."

"Generate a CSS :root block with a color palette suitable for a 'Cyberpunk' themed AI image generator. Include neon accents and dark backgrounds."

5. Lab: Creating a Visual Design System

Learning objective: Implement a reusable style guide that defines colors, fonts, and spacing.

Scenario: You are building the "Design System" for a company called DataMind. You need to create a single HTML page that displays all the available styles so other developers can copy them. This is often called a "Kitchen Sink" page.

Step 1: Define the Tokens

  1. Create style.css.
  2. In :root, define:
    • Two brand colors (Primary, Accent).
    • Three font sizes (Header, Body, Caption).
    • Three spacing variables (Small, Medium, Large).

Step 2: Build the Component Classes

Create CSS classes that consume these variables.

  • .btn-primary: Uses primary color background, white text.
  • .card: Uses a border, padding (var), and shadow.
  • .input-field: Uses standard padding and border radius.

Step 3: The "Kitchen Sink" HTML

Create an HTML file that displays examples of every element:

  • A section showing all Headings (h1 through h6).
  • A section showing Buttons (Primary, Secondary, Disabled).
  • A section showing a "Result Card" (simulating an AI output).

Step 4: AI Documentation

  1. Task: Paste your CSS into an AI chat.
  2. Prompt: "Generate a Markdown documentation table explaining these CSS variables and how to use them. Include a column for 'Example Use Case'."
  3. Save this documentation in your project's README.md.

6. Wrap-Up and Reflection

Group Discussion:

  1. How does defining colors in one place (:root) help when you want to add "Dark Mode" later?
  2. Did the AI critique of your color choices align with your own intuition?
  3. Why is whitespace often considered "active" design elements rather than just empty space?

Resources