Tutorial 3

CSCI 344: Design Systems

Spring 2026

Announcements

1. Tutorial 2 (CSS) – Due tonight
2. HW2 – when you come to class on Monday, try to have at least ½ of it completed, and come with questions
3. Next Week: Design Mockups with Figma. Before class on Monday:
• Register for a Figma account (https://www.figma.com/)
• Watch the Figma Wireframe Tutorial for Beginners video tutorial
• Read the Low-Fidelity Prototypes article
4. Today in class: design systems

What is a design system?

Design has become a well-established field

Design has become a well-established field (e.g., Nielsen / Norman Group, UX Certificate Programs, and tech design is its own subfield / specialization within the tech world. Because of this:

• Many different organizations have codified best practices in interaction design, accessibility, usability, visual design, etc. in UI Kits and design systems.
• The big idea: instead of making common UX/UI widgets “from scratch,” why not “bootstrap” your website from a baseline set of common widgets and design patterns?

4

Design Systems in Industry

Increasingly, design is becoming separated from implementation in larger tech shops:

1. Design team works with a baseline “Design System” in Figma (a prototyping tool). This is customized to fit the website’s look-and-feel / brand. Example of Figma → Childcare Network of Evanston
2. Components and CSS are exported from Figma and “synced” with front-end stylesheet.
3. So long as the front-end developer is using the correct class names, the design team can work in parallel, with periodic syncing.

5

Examples of UI Kits & Style Guides

• TailwindCSS (Tutorial 3)
• Salesforce’s Lightning Design System
• Alibaba’s Ant Design
• Atlassian’s Design Guidelines
• Firefox’s Photon Design
• IBM’s Carbon Design
• Shopify’s Polaris
• Google’s Material

6

Introduction to Tailwind

1. Tailwind CSS is a CSS framework that gives you predefined CSS classes like p-4, text-lg, bg-blue-500
2. Instead of writing lots of custom CSS rules, you style elements directly in your HTML
3. It’s not a component library:
• Tailwind doesn’t give you a button. It gives you the Lego pieces to build your button.

Traditional CSS Approach

�.card {

padding: 1rem;

border-radius: 0.5rem;

background: white;

}

​

<div class="card">...</div>

Tailwind Approach

��<div class="p-4 rounded-lg bg-white">...</div>

​

(the classes already exist and do one thing)

​

​

But how does it work?

• Tailwind uses a special tool called a bundler to automatically generate a stylesheet based on all of the embedded classes in your HTML file.
• To generate your stylesheet, you need to make sure you’re running the bundler

npx tailwindcss -i ./src/input.css -o ./public/output.css --watch

• The “transpiled” stylesheet will be available in your public folder

Tutorial 3 Setup: Please Listen Carefully

• If you haven’t yet installed Node.js, you will need to do this
• Download the tutorial files and save them in your csci344/tutorials directory.
• Create the node project in the Terminal: npm init --y
• Install the dependencies and create the public folder:�npm install -D tailwindcss @tailwindcss/cli�mkdir public
• Run the bundler:�npx tailwindcss -i ./src/input.css -o ./public/output.css --watch