Guðmundur's Design System v1.1

Design with
Purpose

A unified language for building consistent, accessible, and efficient user interfaces. From core foundations to interactive components.

Color roles
Typography
Aa
Aa
Aa
Iconography
Components
New
Forms
Pagination
1 2 3
Spacing
Design Principles

Design Principles

These core values guide every design decision, ensuring the system remains robust, usable, and scalable.

Clarity

Design decisions reduce cognitive load and help users focus on what matters. Interfaces should be intuitive and free of distraction.

Focus on the essential
Consistency

Reusable patterns create predictable and scalable interfaces. Users shouldn't have to learn different ways to do the same thing.

Predictable Patterns
Accessibility

Design works for everyone, not just ideal users. We adhere to WCAG 2.1 AA standards to ensure inclusivity.

Inclusive Design
Efficiency

Streamlined workflows enable faster product development and iteration. We build tools that save time.

Fast & Scalable
Color System

Color System

The color palette is structured into Brand and Neutral tones to establish a clear visual hierarchy. It defines specific roles for primary actions, accents, and functional states, ensuring consistency and accessibility throughout the interface. Tints are generated via opacity for subtle variations.

Brand Colors

Blue
#4B91E2 — Primary

Used for primary actions, links, and active states.

Tradewind
#51B3A3 — Secondary

Used for success states, illustrations, and secondary branding.

Casablanca
#F7C94B — Accent

Used for warnings, highlights, and attention-grabbing elements.

Zest
#E77E23 — Action

Used for primary calls to action and high-priority alerts.

Tenn
#D15400 — Danger

Used for errors, destructive actions, and critical warnings.

Neutral Colors

Neutral Dark Background
#F8F9FB — Background #1F2933 — Background

Main page background.

Mid Neutral Dark Border
#B1B5BD — Borders #4A5568 — Borders

Used for borders, dividers, and disabled states.

Dark Neutral Light Secondary
#6B7280 — Secondary text #B1B5BD — Secondary text

Used for secondary text, captions, and icons.

Dark Light Primary
#1F2933 — Primary text #F8F9FB — Primary text

Used for primary headings and body text.

Typography

Typography

The typography system defines a clear hierarchy for text elements, primarily showcasing a desktop scale with various heading levels, body text, and smaller text for secondary information. It uses different font sizes for each element to ensure readability and visual structure across the design.

Desktop Scale

Heading 1 h1
Size: 48px
Line: 56px
Weight: 400

Design with Purpose

Heading 2 h2
Size: 32px
Line: 40px
Weight: 400

Section Headlines

Heading 3 h3
Size: 24px
Line: 32px
Weight: 400

Component Titles

Body p
Size: 16px
Line: 1.6
Weight: 400

The quick brown fox jumps over the lazy dog. Good design is obvious. Great design is transparent.

Small small
Size: 14px
Line: 1.5
Weight: 400
Helper text, captions, and secondary information.

Mobile Scale

Heading 1 (Mobile)
Size: 36px
Line: 44px

Design with Purpose

Heading 2 (Mobile)
Size: 28px
Line: 36px

Section Headlines

Heading 3 (Mobile)
Size: 20px
Line: 28px

Component Titles

Body (Mobile)
Size: 16px
Line: 1.6

Primary reading text

Small (Mobile)
Size: 14px
Line: 1.5
Helper text
Spacing & Layout

Spacing & Layout

A combination of a square modular and columnar grid. The modular grid is 4x4 pixels, flexible, and capable of meeting many needs. A 12-column grid is applied to the desktop interface, while a 6-column grid is used on mobile. The grid ensures visual harmony, consistent spacing, and predictable layout behavior across screens.

Grid System

Desktop Grid

12-column grid structure for desktop viewports.

4
6
2
12
Mobile Grid

6-column grid structure for mobile viewports.

3
3
6
2
2
2

Spacing Scale

Responsive Scale

A responsive spacing scale that adapts to screen size, ensuring appropriate density on both small and large viewports.

Variable Small screens Large screens
--space-1
5px
5px
--space-2
10px
10px
--space-3
15px
15px
--space-4
15px
20px
--space-5
15px
25px
--space-6
20px
30px
--space-7
25px
40px
--space-8
30px
50px
--space-9
40px
60px

Applied Layout

Component Spacing

Examples of how spacing tokens are applied within components to create hierarchy and separation.

Example card

Consistent padding and spacing show how tokens work in UI layouts.

User Avatar

User Profile

Last updated: Yesterday

This card demonstrates a more complex component layout, integrating an image, multiple text elements, and various action buttons, all while adhering to the established spacing and typography.

#tag
Elevation

Elevation

Shadows communicate hierarchy, interactivity, and spatial relationships. Higher elevation indicates elements that are closer to the user.

Static Elevation

Level 1 (XS)
shadow-xs

Subtle depth for interactive states or borders.

XS
Level 2 (SM)
shadow-sm

Default state for cards and list items.

SM
Level 3 (MD)
shadow-md

Dropdown menus, popovers, and hover states.

MD
Level 4 (LG)
shadow-lg

Modals, dialogs, and sticky navigation.

LG
Level 5 (XL)
shadow-xl

Toasts, notifications, and drag-and-drop states.

XL

Interactive Elevation

Hover State

Elevation can be used to provide feedback on user interaction.

Hover me

Layering

Overlapping Surfaces

Use elevation to define relationships between overlapping surfaces.

Base Layer
Overlaid Layer
Components

Components

A collection of reusable interactive elements designed for consistency and usability. This section includes primary and secondary buttons, icon-enhanced actions, and comprehensive form inputs with clear states for focus, validation, and errors.

Actions

Hierarchy

Button styles indicate the priority of actions. Use Primary for the main call-to-action, Secondary for alternative actions, and Ghost for low-priority tasks.

States

Visual feedback for user interactions including hover, active, and disabled states.

Default
Hover
Active
Focused
Disabled
Sizes

Buttons come in different sizes to fit various contexts, from dense tables to marketing headers.

Icon Buttons

Buttons enhanced with icons for better visual recognition or space-saving layouts.

Selection Controls

Toggles

Switches for binary states, typically used for settings or preferences.

Checkboxes

For selecting one or multiple items from a list.

Radio Buttons

For selecting exactly one option from a list.

Dropdowns

Menus for displaying a list of actions or options.

Inputs

Text Fields

Input fields for text data, supporting various states like focus, error, and success.

Tell the user why there is an error
This is some helper text to guide the user.
Dropdown Input

A text input with an expandable menu, suitable for autocomplete or selection fields.

Feedback

Badges

Small status indicators for metadata.

Primary Success Warning Error Neutral
Alerts

Contextual feedback messages for user actions.

Info: Helpful information.
Success: Changes saved successfully.
Warning: Please check your connection.
Error: Something went wrong.

Navigation

Pagination

Navigation for paginated content.

Breadcrumbs

A secondary navigation scheme that reveals the user's location in a website or web application.

Calendar

Date Picker

A calendar component for selecting dates. It includes navigation for months and highlights the current day.

Sun
Mon
Tue
Wed
Thu
Fri
Sat
Event Calendar

A comprehensive calendar view for managing schedules, featuring event indicators and a detailed daily agenda sidebar.

October 2023
Su
Mo
Tu
We
Th
Fr
Sa
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2

October 16, 2023

09:00 AM - 10:00 AM
Team Standup
02:00 PM - 03:30 PM
Design Review
04:00 PM - 05:00 PM
Client Meeting
Weekly View Calendar

A detailed weekly calendar with time slots for precise event scheduling and visualization of event durations.

October 16 - 22, 2023
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
Mon 16
Team Standup
09:00 - 10:00
Client Meeting
14:00 - 15:00
Tue17
Wed18
Design Review
12:00 - 13:30
Thu19
Fri20
Sat21
Sun22
Iconography

Iconography

A comprehensive set of stroke-based icons designed on a 24px grid with rounded caps. Ranging from navigation and system controls to commerce and media, these icons ensure a consistent, friendly, and accessible visual language throughout the interface.

Interface

Navigation

Core navigation elements for moving through the application structure.

Actions & Interface

Common action icons for manipulating content and interface states.

System Controls

Icons for system-level actions and configurations.

Media & Feedback

Media & Playback

Icons for controlling audio, video, and file transfers.

Status & Notifications

Icons for conveying system status, alerts, and directional cues.

Topics

Commerce

Icons related to shopping, payments, and retail.

Weather

Icons representing weather conditions and celestial bodies.

Social Media

Logos for popular social platforms.

User Profile

Icons for user accounts and groups.

Accessibility

Accessibility

Accessibility is foundational to this system, ensuring inclusive experiences for all users. Adhering to WCAG 2.1 AA standards, we prioritize usability across diverse abilities through rigorous design and development practices.

Visual Standards

Contrast & Readability

Text and interactive elements meet strict contrast ratios (4.5:1 minimum) to support users with visual impairments.

AA Pass
4.5:1 Ratio
Inclusive Feedback

Errors and status updates rely on both color and text to ensure clarity for everyone.

Error message explains what happened.

Interaction

Keyboard & Focus

A logical tab order and distinct focus states ensure full navigability without a mouse.

Touch Accessibility

All interactive targets are sized at least 44x44px for easy interaction on touch devices.

Structure

Semantic HTML

Proper HTML semantics provide meaningful context for screen readers and assistive tech.

<nav>...</nav>
<main>...</main>
<button>Action</button>
Reflection

Reflection

This design system was created to demonstrate how I approach scalable UI foundations. I focus on clarity, accessibility, and making design decisions that support real users and real products.

Balance

Balancing structure with flexibility. Defining strict tokens for spacing and color while allowing creative variation.

Accessibility

Establishing a color system that is both visually appealing and accessible, focusing on WCAG AA contrast ratios.

Systems

Thinking in systems rather than isolated pages. Architecting UI foundations that support real-world product development.

View related UI projects