Inside the Guðmundur Design System
Case Study · System Design
Project Background
When Every Decision Starts From Scratch
Every project started the same way.
Pick a font. Define spacing. Rebuild buttons. Re-explain interactions to developers. Again. And again.
Small inconsistencies stacked up. Screens looked fine in isolation, but together, they felt disconnected.
Design wasn’t scaling. It was resetting.
The problem wasn’t the UI. It was the lack of a system behind it.
The Challenge
Without a shared system:
- Components behaved differently across screens
- Design and development drifted apart
- Simple decisions took too long
- User experience felt inconsistent and unpredictable
Users don’t notice design systems. But they always feel when one is missing.
The goal wasn’t consistency for its own sake. It was clarity, speed, and alignment.
My Role
I built the system from the ground up:
- Defined principles and system logic
- Created tokens (color, type, spacing)
- Designed reusable components
- Standardized interaction states and motion
- Wrote clear, usable documentation
This wasn’t a UI kit. It was a shared language between design and code.
The Process
The Insight
The issue wasn’t inconsistency. It was that every decision lived in isolation.
Design files looked polished. But they didn’t translate cleanly into real products.
So instead of refining screens, I shifted focus:
From designing interfaces → to designing the rules behind them.
The System
Everything was anchored in three principles:
- Clarity: Make interfaces easy to read, scan, and understand instantly.
- Flow: Ensure interactions feel natural, responsive, and uninterrupted.
- Rhythm: Use consistent spacing, grids, and hierarchy to create balance.
Foundations
- A dark-first color system with semantic states
- A typography scale built for readability, not decoration
- A strict spacing system to eliminate visual guesswork
- A responsive 12-column grid for layout consistency
Components
- Buttons with predictable states and behaviors
- Forms with clear validation and feedback
- Navigation patterns that scale across products
- Cards, tables, loaders, and overlays
“What should happen here?”
Before anyone had to ask it again.
Interaction & Motion
- Fast, responsive transitions
- Subtle hover and lift interactions
- Magnetic effects for key actions
Every interaction gives feedback. Nothing feels static or uncertain.
Accessibility & Content
- WCAG-compliant contrast and readability
- Strong focus states and keyboard navigation
- Semantic structure for assistive technologies
And just as important:
- Clear, human microcopy
- Action-driven labels
- Error messages that help, not frustrate
Because UX is as much words as it is design.
Outcome & Impact
- Faster design decisions
- Cleaner developer handoffs
- Consistent user experiences across screens
- Reduced friction in both workflow and product
But the biggest shift wasn’t visual. It was mental.
Instead of asking: “What should this look like?”
We started asking: “What system does this belong to?”
Reflection
This project reinforced something simple:
Good design systems don’t restrict creativity. They remove the need to rethink the basics.
When structure is clear, design becomes faster, sharper, and more intentional.
And that’s the kind of foundation every product needs.