Website / Design System

Introduction

Welcome to the Guðmundur Design System.

This is where design and code finally stop arguing and start working together. The system keeps everything visually consistent, speeds up the design process, and gives everyone a shared language when building digital products.

Inside you will find modular spacing, thoughtful typography, color systems, and reusable components, all designed to make prototyping faster and implementation smoother.

Think of it as a toolkit for building clear, simple, and human friendly experiences.

Design Principles

Human-Centric

We design for people first, prioritizing extreme reading clarity and intuitive interface feedback flow anchors.

Playful Subtlety

Deliberate micro-animations (like magnetic translation pulls) amplify delight without degrading usability benchmarks.

Structured Rhythm

Strict grid bounds and proportion scales keep layouts harmoniously balanced for cross-device responsiveness.

How to Use

Include the tokens and components stylesheets in your HTML head to get started rapidly: 

<link rel="stylesheet" href="assets/design_system/css/tokens.css">
<link rel="stylesheet" href="assets/design_system/css/components.css">

Colors

Core Palette

Background
--bg-color
Text Primary
--text-color
Text Muted
--text-muted
Accent Area
--accent-color
Border
--border-color

Neutral Scale

Structured UI Grays supporting border shades, surface backing layering multipliers triggers.

Gray 100
--gray-100
Gray 200
--gray-200
Gray 300
--gray-300
Gray 400
--gray-400
Gray 500
--gray-500
Gray 600
--gray-600
Gray 700
--gray-700
Gray 800
--gray-800
Gray 900
--gray-900

Semantic States

Success
--success-color
Danger
--danger-color
Warning
--warning-color
Info
--info-color

Typography

Our typographic scale is built on hierarchical step multipliers, prioritizing absolute reading clarity and balanced display weights securely.

Typefaces

Aa
Outfit (Primary Sans) Used for default body copy, grid descriptions, and navigation elements.
Aa
Playfair Display (Serif) Reserved for large display headlines and hero summaries framing.

Type Scale

Style / Landmark Size (rem) Size (px) Line Height Visual Sample
H1 (Hero) 3.5rem 56px 1.1 Headline Large
H2 (Section Header) 2.5rem 40px 1.2 Section Title
H3 (Card Title) 1.25rem 20px 1.4 Layout Title
Body Regular 1.0rem 16px 1.6 Scalable structural nodes reading cleanly.
Small / Caption 0.875rem 14px 1.5 Secondary helper microcopy notes.

Font Weights

Aa
Light (300)
Aa
Regular (400)
Aa
Medium (500)
Aa
Bold (700)

Spacing Scale

--space-10.25rem
--space-20.5rem
--space-30.75rem
--space-41.0rem
--space-62.0rem
--space-84.0rem

Layout & Structure

12-Column Grid System

Responsive columns with utility classes like .ds-grid and column spans .ds-col-[1-12].

1
1
10 Columns remaining
4 Col Span
8 Col Span

* Uses media queries for tablet/mobile collapsing overlaps accurately.

Containers Max-Widths

Central constraints limiting alignment structures responsibly framed limits.

fluid
100%
XL
1280px
LG
1024px
MD
768px

Responsive Breakpoints

Breakpoint Size Range Layout Type
Desktop (XL) ≥ 1200px 12-Column Grid
Laptop (LG) 1024px - 1199px 12-Column Grid
Tablet (MD) 768px - 1023px Flex / Stacked Grid Offset
Mobile (SM) < 768px 1-Column Stacked layout

Motion Design

Motion creates fluid relationships between states. Our physics curves prioritize crisp responses with soft decelerations multipliers.

Durations & Timing

Speed Value Usage
Fast 200ms Subtle fades, tooltip reveals, toggle triggers.
Standard 300ms Cards Lift, Scale bounces, Button fills.
Slow 500ms Large dashboard content reveals, modals overlays scaling.

Micro-interactions Showcase

Hover & move mouse to test pull physics.

Hover Lift

Smooth translateY(-6px) layout offsets floating offsets.

Compound Micro-interactions

Combining Magnetic pull Physics with dynamic pointer Glows created for core CTA interfaces.

Interactive demo combining Magnetic translates and radial pointer-driven gradients inside grids.

Continuous FX & Backgrounds

Aurora Shimmer

A continuous wave mesh used in high-impact headers to simulate glowing gradients flawlessly multipliers.

Buttons & Magnetic Effects

Interactive Samples

Hover over these to see the magnetic translation pulls from the real website.

Static CSS States

Normal
Hover
Focus
Disabled
Loading
Sizes 
<!-- Use 'magnetic-btn' class for interactive translating effects -->
<button class="primary-button magnetic-btn">Action</button>

Forms & Inputs

Validation & States

Please enter a valid email address.
Password strength: Strong 
<div class="form-group">
  <label class="form-label">Label</label>
  <input type="text" class="form-input">
</div>

Badges & Tags

Default Success Danger Warning Info 
<span class="tag">Default</span>
<span class="tag tag-success">Success</span>

Cards & Tables

Cards

Standard Card

A basic card component with background padding and border radius support framing items beautifully.

Interactive Card

This card includes hover elevation translations smoothly with a shadow offsets glow.

Striped Tables

Name Role Status
Alex Morgan Designer Active
Sarah James Developer Away
Michael Chen Director Offline

Avatars

AM
SJ
MC
Avatar

Bullet Lists

  • Comprehensive design documentation
  • Pixel perfect variables scale
  • Mobile responsive layouts grid

Loaders

<div class="loader-spinner"></div>

Overlays & Feedback

Alerts

Action completed successfully!
Something went wrong, please try again.

Tooltips

Insights enabled
Standard Tip

Toast Notifications

Changes saved successfully

Empty States

No items found

We couldn't find any results matching your current filters scale setups.

Progress Indicators

Uploading files60%
Task completed100%

UX Solutions & Patterns

Higher-level structures combining base components to solve common user experience flows.

Authentication Form

Welcome Back

Log in to continue your session.

Instant Search Toolbar

Card Loading Skeletons

Interaction States

Standardized visual feedback behaviors applied across all interactive components (buttons, links, inputs) to ensure unified UX.

Hover

High Contrast Inverse Background, translations, or opacity shifts.

Focus

Outline offset rings with 4px gaps spacing.

Active

Scale translation reductions for absolute click triggers.

Disabled

Reduced opacity (0.4) and pointer-events lockouts.

Loading

Spinning overlays utilizing `.is-loading` pseudo-elements.

Accessibility Guidelines

Ensuring the design system is inclusive, perceivable, and operable by everyone, adhering closely to WCAG 2.1 AA standards.

Color Contrast (WCAG AA)

Element Type Min Ratio Our Variable Status
Normal Text 4.5:1 `--text-color` on `--bg-color` Pass (AA)
Large Text (18pt+) 3.0:1 `--text-color` on `--bg-color` Pass (AA)
UI Components / Graphics 3.0:1 `--border-color` on `--bg-color` Pass (AA)

Keyboard & Focus Management

  • Skip Links: Include anchors to bypass repeated navigation sections.
  • Visual Focus Indicators: Always maintain high contrast offset rings for tab focuses.
  • Logical Tab Order: Match the visual layout structure chronologically.

Screen Reader Checklist

Attribute Usage / Purpose Example
`aria-label` Descriptive text for pure iconography or symbols. ``
`aria-expanded` Indicates expanded/collapsed state on drawers. ``
Semantic HTML Use `
`, `
 ``

Content Guidelines

Standards for writing clear, empathetic, and action-oriented copy across all user touchpoints.

Voice & Tone

Principle Do Don't
Human-Centric "Reset your password below." "Execute credential reset sequence."
Active Direction "Save changes to continue." "The changes will be saved."
Empathetic Errors "That password is too short. Try 8+ characters." "ERROR 403: Invalid credential length."

Button Labels & Microcopy Guidelines

  • Start with Verbs: Use action words (e.g., *Create*, *Delete*, *Send*).
  • Predictable Outcomes: Avoid vague titles like "Submit" when specific triggers apply.
  • Helper Microcopy: Explain *why* data points are required (e.g., "For order tracking alerts").