MirhanLabs Design System
Visual Architecture & Component QA Preview
MirhanLabs Design System Primitives
Restrained, monochromatic, engineering-driven design foundation. Built using CSS Custom Properties, accessible semantics, and WCAG AA contrast ratios.
1. Color Tokens & Semantic Palette
Minimal accent usage. Strong neutral depth across surfaces, borders, and typography.
Primary Surface
var(--bg-primary)
Secondary Surface
var(--bg-secondary)
Elevated Surface
var(--bg-elevated)
Border Default
var(--border-default)
Accent Primary
var(--accent-primary)
State Success
var(--state-success)
2. Typography Scale
System-native sans-serif font stack (`var(--font-sans)`).
Display Heading (56px)
Product Engineering
H1 Heading (40px)
Software & Digital Products
H2 Heading (32px)
Restrained & Purposeful Architecture
H3 Heading (24px)
Clean Technical Foundations
Body Large (18px)
MirhanLabs builds software focused on performance, clarity, and long-term user trust.
Body Regular (16px) & Small (14px)
Standard body paragraph text designed for optimal line length and contrast compliance.
Secondary metadata line or supplementary explanation text.
3. Button Variants & Touch Targets
Minimum 44px height touch targets on mobile. Accessible focus rings enabled.
Button Variants
Button Sizes
States & Icon Buttons
4. Badges & Status Indicators
Compact pill elements for category tags, product availability, and status.
5. Card System & Product Containers
Restrained rectangular cards with 1px border lines and interactive hover elevations.
Static Information
Clean background surface (`var(--bg-secondary)`) for standard content grouping.
Focal Feature
Slightly elevated surface (`var(--bg-elevated)`) with subtle shadow depth.
Product Showcase
Hover state features smooth background transition and subtle vertical translation.
6. Links & Accessibility Focus
Semantic text links with explicit keyboard focus indicators.