Palette Studio
Click any swatch background to lock/unlock • Press Space to generate

Real-time application of your 5-color system across a SaaS landing interface.

https://prism-analytics.app/design-system
Design System v4.2 Live

Build cohesive interfaces with algorithmic color harmony.

Preview how your primary, secondary, and accent tokens interact across typography, surfaces, and interactive data visualizations before shipping to production.

Start Free Trial Explore Tokens
Token Distribution & Velocity +28.4% QoQ
99.98%
Uptime SLA
1.4ms
Latency
AA+
Accessibility
Pair Contrast Inspector WCAG 2.1 Relative Luminance
Contrast Ratio
4.50 : 1
AA Compliant
AA Normal Text Requires ≥ 4.5 : 1
PASS
AAA Normal Text Requires ≥ 7.0 : 1
FAIL
AA Large Text (18pt+) Requires ≥ 3.0 : 1
PASS
AAA Large Text (18pt+) Requires ≥ 4.5 : 1
PASS
Large Heading Sample (18pt+ Bold)

Body copy legibility test. Accessible color pairings ensure every user can effortlessly read critical content across varying ambient light conditions and displays.

Interactive Component Border & Label
5×5 Palette Contrast Matrix Click any cell to inspect pair

Quickly spot which combinations in your current 5-color palette pass WCAG legibility thresholds.

CSS Custom Properties 

        


        

          

            Tailwind Config Snippet
            
          

          

        


        

          

            Design Tokens JSON