Clarity Through Simplicity
I try to remove unnecessary visual noise and focus on what actually matters in the interface. Clear hierarchy, readable typography, and balanced spacing help users quickly understand what they are looking at.
Visual Language / Personal Archive
Version 1.0
Design System
System, but personal
The visual foundation of my portfolio
A design system for UX, game design, and interactive media that balances structure, clarity, and subtle cultural references without losing warmth or personality.
01 / Introduction
Introduction
Learn about me and what I do and why I created this design system.
This design system reflects how I approach design across my work in UX/UI, game design, and interactive media. I wanted to build a visual language that feels clear, structured, and modern, but also subtly connected to my background and personal experiences.
Growing up in Iran and later moving to Canada has shaped how I see design and visual culture. Persian design traditions often use rich colors, rhythm, and balance, while contemporary digital interfaces emphasize simplicity and clarity.
Rather than using literal cultural patterns or ornamentation, I chose colors that quietly reference Persian visual culture, like turquoise and saffron. These colors appear often in Iranian architecture, ceramics, and textiles.
My goal was to create a system that feels simple, calm, and intentional, where layout, spacing, and typography guide the experience while color adds a subtle sense of identity.
02 / Principles
Guiding Principles
Structure & Balance
Structure is important in my design process. I rely on grids, spacing systems, and alignment to create a sense of order and visual rhythm.
Purposeful Color
Color is used carefully and intentionally in this system. Turquoise acts as the main accent in the interface, while saffron appears more subtly as a secondary highlight.
Cultural Subtlety
Instead of directly using Persian patterns or motifs, I chose colors that reference cultural materials like tiles, ceramics, and traditional architecture.
03 / Foundations
Color System
The palette combines neutral tones for clarity and readability with accent colors inspired by Persian visual culture.
this is where I let the cultural references come through softly
Primary & Accent
Turquoise 500#1C8C8B
Turquoise 400#2BA6A5
Turquoise 600#157372
Saffron 500#D4AC4C
Saffron 400#E1BC66
Neutrals
Charcoal#121212
Gray 700#404040
Gray 500#737373
Gray 300#D4D4D4
Gray 100#F5F5F5
White#FFFFFF
03 / Foundations
Typography
The typography combines a clean modern sans serif with a more handwritten expressive style. I wanted the type system to feel minimal and readable, but still leave room for personality and imperfection in the way key moments are presented.
fonts that combine the modern minimal side of my style with a more personal imperfect side
Fonts Used
Headings: Space Grotesk
Handwritten Accent: Caveat
Body: Segoe UI
Space Grotesk in action
Caveat in action
Segoe UI in action
Display72px / 80px
The quick brown fox
Headline48px / 56px
The quick brown fox jumps
Title32px / 40px
The quick brown fox jumps over
Body16px / 28px
The quick brown fox jumps over the lazy dog
03 / Foundations
Iconography
Home
Search
Settings
Arrow
Arrow Up
03 / Foundations
Spacing Scale
4px
8px
16px
24px
32px
48px
64px
spacing does a lot of the quiet work here
03 / Foundations
Grid System
010203040506
070809101112
03 / Foundations
Responsive Design
Mobile<768px
Tablet768-1024px
Desktop1024-1440px
Large Desktop1440px+
03 / Foundations
Elevation
1
Cards, containers
2
Popovers, dropdowns
3
Important information
03 / Foundations
Image Aspect Ratio
Thumbnail, profile image
1:1
Project image, gallery
4:3
Cinematic image, video
16:9
04 / Components
Text Input
04 / Components
Checkbox
04 / Components
Dropdown
04 / Components
Card Component
Basic Card
Base card using light elevation for flat, stable surfaces.
Learn moreElevated Card
Uses layered shadow for default floating content.
Learn moreInteractive Card
Raises on hover for clear interaction depth.
Click to action05 / Application
Wireframes
View the original Figma wireframe:
View Figma
I wireframed these in Figma to create a low-fidelity prototype of my portfolio layout. I also started adding the colors and visual style I wanted to use.
05 / Application
Portfolio Mockups
View the live portfolio website:
Visit Website
