Protect brand colors, inspect concrete failures and export an implementation-ready system—not just attractive swatches.
9/11Core token checks passingComputed from your current colors
ROLE AUDIT
Color-pair quality
2 to review
Normal text: 4.5:1. Meaningful controls: 3:1. These checks evaluate defined role combinations, not an entire website.
✓
Body copy on pagetext / background
15.47:1min 4.5:1
✓
Body copy on cardstext / surface
16.52:1min 4.5:1
✓
Secondary copy on pagemuted / background
6.08:1min 4.5:1
✓
Secondary copy on cardsmuted / surface
6.50:1min 4.5:1
✓
Primary icons on pageprimary / background
3.48:1min 3:1
✓
Primary icons on cardsprimary / surface
3.72:1min 3:1
!
Accent/focus on pageaccent / background
1.68:1min 3:1
!
Accent/focus on cardsaccent / surface
1.79:1min 3:1
✓
primary button labelon-primary / primary
4.76:1min 4.5:1
✓
secondary button labelon-secondary / secondary
11.69:1min 4.5:1
✓
accent button labelon-accent / accent
9.88:1min 4.5:1
SMART REPAIR
Suggested adjustments
Only adjusts unlocked UI roles; uploaded identity colors remain available as the reference.
→
accent#F1B765 → #C97D12Accent/focus visibility
Suggestions target token pairs. Recheck actual sections, focus indicators, photos, and interactive states.
ACTUAL TEMPLATE
Rendered text stress test · orvan
0 elements checked
Unlike palette-only checks, this samples the selected website’s computed text and solid background colors in the live preview.
Checking the current website preview… Results will appear once the updated page has been sampled.
REAL COMPONENT STATES
Interaction-state sampling
0 controls sampled
Open a menu, select a product, or focus a button in the live website to capture its real state. No artificial interactions are triggered.
Waiting for live website-state analysis…
Other design states to verify
Check mobile menus, keyboard focus, selected tabs, disabled controls, error messages, photo overlays, and real content lengths. Automatic sampling cannot assess all of these reliably.
How logo colors become a website
01
Analyze
Your logo is processed locally. Transparent pixels and neutral backgrounds are discounted so useful brand colors have more influence.
02
Map
The color system assigns dedicated roles for background, surface, body text, primary action, secondary details, accents and borders.
03
Preview
Three separately designed Nuxt pages react to your selected theme. They keep their own layouts and interactions while using the same color tokens.
04
Validate
Lock identity colors, review automated text and control contrast, apply suggested fixes, then export CSS, Tailwind, DTCG tokens or a reusable project file.
Important: logo colors alone cannot guarantee a usable design. Review all text and controls; this tool generates a starting point, not a complete validated brand identity. The Jiro-inspired websites contain illustrative content and are not included with the theme export.