Catalyst-Q

Brand & Product Assets

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

Wordmark Architecture

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)"}}