blockline design system
Creating a General-Purpose Neubrutal Design System for Web Platforms
Neubrutalism is a mix of regular brutalism in web design and more modern typography, illustration and animation.
As part of the Visual Design course, I developed a design system named Blockline. Grounded in specific principles, I meticulously defined each foundational element and crafted guidelines to ensure cohesion. The project culminated in creating essential components and patterns, which I applied to design a concept website demonstrating their usability.
final deliverable
The final outcome of this project is a design system named Crude. Following aspects of Crude are available:
- Principles
- Foundations
- Components and patterns
why a design system?
Design systems merge technology and design, making them both challenging and exciting to create.
With experience in both tech and design, I viewed design systems through multiple lenses, sparking a natural interest.
This course provided the perfect platform to explore, experiment, and hone skills in building a design system from scratch.
design systems study
Material 3.0 by Google
Carbon by IBM
Mailchimp Design System
Atlassian Design System
Figma’s Design System
Spectrum by Adobe
The Guardian’s Design System
Fluent by Microsoft
Key Learnings:
Foundational principles guide design decisions.
Color and typography scales should follow intentional patterns.
Grid systems support logical and consistent layouts.
Leveraging existing user behaviors enhances usability.
exploration
principles
moodboard
type
Why Zilla Slab?
color
grids and spacing
Mobile grid system
Desktop grid system
border and elevation
accessibility
components
patterns
concept website
learnings
Design systems evolve continuously.
Component-specific use cases drive system direction.
Foundational decisions scale exponentially as systems grow.
what if I had more time?
Expand the library with more components and patterns.
Adapt the system for additional devices (e.g., tablets, smartwatches, and TVs).
Provide detailed examples and documentation for every component.
Tokenize foundational elements (e.g., text styles, color styles, spacing).
Facilitate developer hand-offs with coded components.
