First-principles reasoning and edge-case thinking before pixels
AC Design System
A living collection of reusable tokens and components guided by clear standards — used across AC Design and client work like CC Electrical Services.
Design Principles
How I keep complex products consistent — tokens, components, and clear interaction patterns under real technical constraints.
Reusable patterns for data-heavy, permission-driven interfaces
Accessible hierarchy, spacing, and focus states by default
Design decisions that translate to code — Figma → React / Tailwind
Tokens
Colors
Typography
Display
Design. Engage. Inspire.
H1
AC Design System
H2
Foundations & components
H3
Reusable building blocks
H4
Consistent, accessible UI
Body large
Lead paragraphs introduce a section with a slightly larger reading size.
Body
Body copy carries the bulk of content — readable, calm, and high contrast.
Caption
Captions and metadata sit quieter in the hierarchy.
Spacing & Grid
8px
16px
24px
32px
48px
64px
Components
Buttons
Iconography
Icons used across the live site — nav, contact channels, status, and back-to-top.
- About
- UX & Dev Work
- Design System
- Contact
- GitHub
- Back to top
- In Progress
- Completed
Chips - Labels - Tabs
Category ribbons and status badges (labels) plus the work filter tab control from UX & Dev Work.
Category ribbons
UXUX/DEVDEVSystem
Status badges
In ProgressCompleted
Skill chips
UXResearchAstro
Work filter tabs
Forms
Cards
Live patterns from the landing page (CTA button) andUX & Dev Work (arrow affordance).
Landing page
UXCompletedUX & Dev Work
UX/DEVIn ProgressCC Electrical Services Website
UX & Front-End
Navigation patterns
Same dark theme, mark, and link set — shown at desktop and mobile breakpoints.
Feedback - Alerts
SuccessYour changes have been saved.
ErrorSomething went wrong. Please try again.
WarningReview required before publishing.
InfoNew case study drafts are available.
NeutralSystem maintenance this weekend.
Mobile layouts
Mid-fi mobile structure for Landing and UX & Dev Work — content matched to the live desktop pages. Use the hamburger to open the mobile nav.
Adrian Crinnigan
AC Design
DESIGN. ENGAGE. INSPIRE.
Designing intuitive product experiences through structured reasoning, rapid prototyping, and deep technical understanding.
Get in touch
UX WORK | DEV WORK
SystemIn ProgressDesigning AC Design
UX · IA · Astro
View Case Study →UX/DEVIn ProgressCC Electrical Services Website
UX & Front-End
View Project →UXCompletedSwiftAir
UX Research
View Case Study →UX WORK | DEV WORK
UX WorkAll WorkDEV Work
SystemIn ProgressDesigning AC Design
UX · IA · Astro
UX/DEVIn ProgressCC Electrical Services Website
UX & Front-End
UXCompletedSwiftAir
UX Research
DEVCompletedFlashyCardy App
Next.js · TypeScript
Skills & Tools
A snapshot of how I work across research, design, engineering, and AI-assisted workflows.
DesignResearchFrontendTools & AI
Interaction DesignIAWireframingPrototypingMicro-InteractionsDesign SystemsResponsive DesignAccessibility
In practice
This system supports the AC Design portfolio and client work like CC Electrical Services — shared foundations with brand-specific layers where needed.