aTOMIS • Design System
A conceptual design system exploring how scalable interfaces can be built through layered foundations and reusable structures.
TIMELINE
Feb 2026 - Mar 2026
MY ROLE
Product Designer
Overview
As products grow, maintaining consistency becomes increasingly difficult. Instead of solving a single interface problem, I wanted to explore how a design system could organize decisions into reusable layers that scale across products.
aTOMIS is my conceptual exploration of that idea. It combines ideas learned from industry practitioners with my own architecture to understand how foundations, semantics, and components work together.
Why this system
Most UI libraries solve consistency at the component level. I wanted to explore what happens before components exist. How colors, typography, spacing, icons, and semantics can become independent building blocks that make interfaces easier to evolve.
System at a glance
78+
Components
Scale
Color Modes
Adaptability
Light/Dark
Themes
Visual Adaptability
350+
Variables
System depth
System Architecture
Rather than embedding design decisions directly inside components, aTOMIS separates them into independent layers. This allows foundations to evolve independently while structures remain reusable across themes, brands, and products.
Foundations
The system is built on independent foundations. Each layer owns a single responsibility, allowing components to remain reusable and scalable.
Chromatics
Three layer color system. capable of handling multi brand and light/dark modes
Lexemes
Lexemes define the typographic language of the system including hierarchy, scale, and usage roles.
Fields
8-point grid system for spacing and sizing
Glyphs
Glyphs form a centralized icon system designed for consistency across the product.
Structures (Components)
Structures combine the independent foundations into reusable interface components. They inherit typography, spacing, semantics, and visual decisions from the underlying layers rather than defining them themselves.
System in Action
To validate the architecture beyond theory, I applied the same foundations and structures across two different product concepts. Each interface adapts its branding, content, and imagery while preserving consistent typography, spacing, semantics, and interaction patterns.
Healthcare
Concept • Onboarding & Monitoring
Sports Platform
Concept • Match Discovery & Join Flow
Dashboard
Concept • Project Management Dashboard for Studio owners
