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
season
dress the site in the season where you are, using the date and your device's time zone, without sending anything anywhereno season: Wordplay's own colorsthe rainy season: rain, ripples, and lotus on a green pagethe dry season: savanna grass and dust on a parchment pagethe hot season: a baking sun and drifting dunes on a sand pagethe cool season: desert stars and a crescent moon on a dusk pagespring: falling petals and sprouts on a blossom pagesummer: fireflies and a wind chime on a warm pageautumn: falling leaves and passing geese on a maple pagewinter: snowflakes made of your own letters, and a snowman, on an icy pagepolar day: a midnight sun that never sets, on a pale pagepolar night: an aurora and stars on a night-blue page
Seasons
Seasons recolor the site and add a seasonal glyphs to its margins. Each is a second axis beside light and dark, with a palette for both, and every palette passes the same contrast checks as the default before it can ship. Each season's colors and figures are data in the seasons source↗.
☂ wetAaAaAaAa
ʬ dryAaAaAaAa
☼ hotAaAaAaAa
☾ coolAaAaAaAa
✿ springAaAaAaAa
☀ summerAaAaAaAa
❦ autumnAaAaAaAa
❄ winterAaAaAaAa
◠ polar dayAaAaAaAa
✦ polar nightAaAaAaAa
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தமிழ் அரிச்சுவடிతెలుగు లిపి
