This is a reference for 's visual design system, including colors, fonts, spacing, and reusable components. See the design wiki↗ and develop wiki↗ guides for contributing.
Theme
☼ light☽ dark
Colors
Palette
--color-blue
--color-purple
--color-pink
--color-orange
--color-yellow
--color-white
--color-black
--color-light-grey
--color-very-light-grey
--color-dark-grey
--color-shadow
Semantic Colors
Variable
Color
Hex
Contrast
--wordplay-foreground
–
–
--wordplay-background
–
–
--wordplay-header
–
–
--wordplay-chrome
–
–
--wordplay-border-color
–
–
--wordplay-evaluation-color
–
–
--wordplay-highlight-color
–
–
--wordplay-focus-color
–
–
--wordplay-hover
–
–
--wordplay-error
–
–
--wordplay-warning
–
–
--wordplay-inactive-color
–
–
--wordplay-alternating-color
–
–
--wordplay-doc-color
–
–
--wordplay-relation-color
–
–
Color Accessibility
Anything rendered as text must use one of the AA text variants (—color-gold-text, —color-grey-text, —color-blue-text, —color-orange-text, or a semantic variable that points at one), which meet the 4.5:1 contrast that WCAG 2.2↗ requires. The brighter brand hues are only for backgrounds, borders, and highlights, which need 3:1 or nothing. These ratios are enforced by unit tests and by automated scans of every page, in both light and dark mode. One deliberate exception: the light-mode border grey is below 3:1, because borders here are decorative separation and every essential boundary carries another cue.
Never convey meaning by color alone: pair every color-coded state with a second cue — a shape, a line style, a glyph, or a word. For example, the editor draws the caret's highlight and major conflicts solid, selected output dashed, and minor conflicts dotted, so severity and selection remain distinct without hue.
See the design wiki↗ guide for the full contributor guidance.
The Wordplay logo is a speech bubble holding one letter: a tiny stage on which the bubble can say anything — a letter of the reader's writing system, an emoji, or a circle, triangle, and square while something loads. In the app, the letter follows your primary language's writing system; on script-neutral surfaces like the browser icon and share images, the bubble shows the three shapes, about to make something.
The drawing itself never depicts motion. Movement is behavioral — the landing page cycles what the bubble says in step with the language chooser, and while loading the shapes take turns hopping, like a crowd doing the wave — and always scales with the animation speed setting, stopping entirely when animation is off.
The mark is always drawn in the current text color, so wherever text meets contrast requirements, the logo does too.
At restLoading
Across writing systems
عربيবাংলা লিপিКириллицаदेवनागरीΕλληνικάગુજરાતી લિપિਗੁਰਮੁਖੀ简化字אָלֶף־בֵּית עִבְרִי平仮名ಕನ್ನಡ ಲಿಪಿ한글Latinதமிழ் அரிச்சுவடிతెలుగు లిపి
