Catalyst-Q

Brand & Product Assets

Professional assets, design tokens, and product language for keeping Catalyst-Q consistent across workbench, dashboards, docs, and buyer materials.

Color tokens.

Use these tokens when extending the webapp.

canvas#f7f9f8
canvasAlt#eef5f2
ink#111614
inkSoft#34413d
muted#66736e
line#d9e4df
surface#ffffff
surfaceRaised#fbfdfc
accent#007f73
accentStrong#005f56
accentSoft#dff6f2
signal#63c174
signalSoft#e7f7e9
gold#c08a2c
goldSoft#f7eedc
danger#b94444
dangerSoft#fae8e8
codeBg#101815
codeText#e8f4ee

Typography

{"display":"Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif","mono":"'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace","scale":{"xs":"0.75rem","sm":"0.875rem","base":"1rem","md":"1.0625rem","lg":"1.25rem","xl":"1.5rem","xxl":"2rem","display":"clamp(2.75rem, 7vw, 5.85rem)"},"lineHeight":{"tight":"1.02","heading":"1.12","body":"1.62","ui":"1.35"},"weight":{"regular":"400","medium":"520","semibold":"650","bold":"760"}}

Spacing and radius

{"space":{"1":"0.25rem","2":"0.5rem","3":"0.75rem","4":"1rem","5":"1.25rem","6":"1.5rem","8":"2rem","10":"2.5rem","12":"3rem","16":"4rem","20":"5rem","24":"6rem"},"radius":{"xs":"4px","sm":"6px","md":"8px","lg":"12px","xl":"18px"},"shadow":{"hairline":"0 0 0 1px rgba(17, 22, 20, 0.06)","panel":"0 18px 48px rgba(29, 49, 42, 0.12)","media":"0 28px 80px rgba(25, 64, 55, 0.18)"}}