UI/UX/AI Design that thinks.
A live preview of the Bloomindesign design system. Switch themes in the header to see how every token, component, and pattern responds to light, dark, and matrix.
Technical Architect
Monospace-only typography, a 24px grid, paper-vs-graphite palette, and crop-mark cards. Three coexisting themes: light, dark, matrix.
Technical & Quiet
Confident-but-restrained, draftsman, terminal-comfortable. One warm accent at a time.
Overpass Mono Only
100% monospace. No proportional fallback. Five weights, one tracking ruleset. The mono is the brand.
Square Default
No card radius. No button radius. 1px hairline borders + 6px crop-mark corner ticks.
Palette & Tokens
The active theme determines every value below. Switch in the header to see surfaces, text, and accents shift in unison.
Semantic Roles
| Role | Token | Used For |
|---|---|---|
| Surface base | --bg-primary | Page floor, footer, card interiors |
| Surface band | --bg-secondary | Header, alt section bands, mono-tags |
| Hairline | --border-color | 1px borders on every card & divider |
| Body foreground | --text-primary | Headings, dark CTAs, avatars |
| Body content | --text-secondary | Paragraphs, crop-mark corners |
| Brand warm | --accent-gold | Hover, current state, dot accents |
| Brand cool | --accent-ai | AI callouts only — never decorative |
Overpass Mono
Five weights, fluid sizes via clamp(). No proportional fallback — mono is the brand.
Headline display
Section title
Card title
Lead paragraph. Default <p> at 18px in --text-secondary.
Standard body copy used inside long-form sections.
Card body, small descriptions, table cells.
24px Base Unit
Every spacing decision snaps to multiples of 6: 6 / 12 / 24 / 48 / 72 / 120.
Container & Breakpoints
| Token | Value | Notes |
|---|---|---|
| --container-max | 1152px | 48 grid units |
| --container-padding | 24px → 16 (≤768) | Horizontal pad |
| --space-xl | 72 → 60 (≤768) | Section vertical |
| --space-2xl | 120 → 80 (≤768) | Major bands |
| ≤1024px | tablet | Portfolio drops to 6-col |
| ≤968px | medium tablet | Hero stacks, 1-col cards |
| ≤768px | mobile | Burger nav |
| ≤600px | compact | Header 48px |
| ≤480px | phone | CTAs full-width |
Square + Crop Marks
Radius defaults to 0. Depth comes from hairlines, crop-mark corner ticks, backdrop blur, and a cursor-tracked glow on cards.
Radius Exceptions
| Element | Radius |
|---|---|
| Cards · Buttons · Inputs · Tags · Sections | 0 |
| Browser dot | 50% |
| Browser URL bar | 4px |
| Skip link (focused) | 4px |
| Code block | 4px |
| Phone screen | 4px |
| Phone notch | 3px |
| Phone home indicator | 2px |
| Phone frame card | 24px |
Primitive Library
Buttons, tags, labels, inputs, frames, and avatars. Crop-mark cards appear in the next section.
Buttons
Tags & Labels
What I Do
Testimonials
Journey
Form Fields
Crop-Mark Cards in Action
The crop-mark card is the system signature. It appears in every composition: services, beliefs, testimonials, blog, portfolio.
Services (3-up)
UX Design
User-centered design that puts your customers first. From research to wireframes, creating experiences that feel intuitive.
- User Flows
- Wireframing
- Prototyping
UI Design
Pixel-perfect interfaces that balance beauty with function. Design systems that scale with your product.
- Interface Design
- Design Systems
- Visual Design
Full App Development
End-to-end builds using AI-powered development tools. From architecture to deployed product, faster than ever.
- Solutions Architecture
- Web & Mobile
- AI-Powered
Beliefs (3-up, denser)
Good UX is instinctive, Great UX is iterative
The first solution isn't always perfect. Learn and adapt. Your customer base is a moving target.
User experience informs content and design
You must understand the user and their motives before putting pen to paper.
AI tools amplify human creativity
Modern AI doesn't replace designers. It empowers them to work faster and explore more possibilities.
Testimonials (2-up, solid bg)
"Simon did an incredible job on our UX and UI. He's extremely experienced and fast, and I'd definitely want to work again with him!"
"Simon is just brilliant. He puts the desired outcome at the forefront of every conversation. Patient, thoughtful and thorough."
Timeline
Bloomindesign Founded
Started the UX design journey, focusing on user-centered design principles.
Enterprise UX
Worked with major brands including Atlassian, Commonwealth Bank, Telstra, and Capital International.
Volume11.ai Founded
Launched Volume11.ai - bringing AI-enhanced capabilities to creative workflows.
UI/UX/AI Evolution
Bloomindesign evolves to integrate 20+ years of UX expertise with cutting-edge AI capabilities.
Stay On-System
[Do]
- Use Overpass Mono for everything.
- Snap spacing to 6 / 12 / 24 / 48 / 72 / 120.
- Wrap every card in 1px border + 4 crop-mark spans.
- Pair mono-label eyebrow with each section h2.
- Limit accent-gold to 1–2 appearances per viewport.
- Reserve accent-ai strictly for AI-related content.
- Default to dark theme on first paint.
- Persist theme + imagery in localStorage.
[Don't]
- Don't introduce a proportional sans-serif.
- Don't add drop shadows on cards or buttons.
- Don't round card / button / input corners.
- Don't use gradient fills on buttons.
- Don't use multiple bright colors at once.
- Don't replace crop-marks with rounded outlines.
- Don't render the site in matrix theme by default.
- Don't add icons inside mono-tags or mono-labels.