Design language
Prism design language
The design language of the GEO platform, built on one image: a single beam of light refracted into a spectrum. Core metaphor, five principles, references and the interactive demo.
One beam of light, refracted into a spectrum. GEO takes one piece of content (white light) and refracts it into search, AI answers, social platforms, site clusters and many languages (the spectrum). The interface is the prism: clear, precise and quiet. Color appears only where the light is refracted, which is wherever there is information.
Open the interactive demo ↗. Every rule on these pages can be clicked, played and viewed in light and dark themes there.
This section is the shared specification for the website, the console, the admin app, the default cluster-site theme and the SDK docs (v3 draft, 2026-11-03). Tokens live in packages/tokens, components in packages/ui/src/prism.
Core metaphor
Three layers
| Metaphor | In the interface | Rule | Tokens |
|---|---|---|---|
| White light | Neutral grounds and text | Cool near-white; the dark theme is a "darkroom": near black, never pure black | canvas surface container ink |
| Glass | Every surface: slabs of optical glass | Thickness is elevation; a lit top edge replaces borders; higher means brighter | elev-1…elev-4 edge |
| Spectrum | Color: six domain bands, status colors, data | Color carries information only; domains are ordered by wavelength | distribution…ai |
| Key light | The Iris brand color | One key light per screen: the primary action and the current location | brand |
| Refraction | Motion | Starts at the light source (the trigger), spreads outward, returns to it on close | spring-* |
Why it fits GEO
- The product is refraction. An article enters the platform and becomes language versions, sites and social posts, which search engines and AI answers then cite. The interface explains this with one image: content is the light, channels are the spectrum.
- Color has a source. Domain colors are wavelengths of the same beam, so their order, lightness and chroma follow one rule.
- Elevation has a physical basis. Glass thickness, lighting and shadow make elevation a rule you can derive instead of a per-component choice.
- Motion has a direction. Every movement answers "where does the light come from?" Things appear, expand and get selected from their trigger, never out of nowhere.
Five principles
When the spec does not cover a case, decide with these five.
| # | Principle | Meaning | How | Don't |
|---|---|---|---|---|
| 1 | One key light | Only one primary action per screen is lit | Only the primary button uses solid brand; brand covers ≤ 10% of the screen (primary button + current nav + focus ring); other actions use tonal or text buttons | Two blue primary buttons in a header; a card filled with brand color |
| 2 | Color means something | Color appears only for domain identity, data and status | Neutral grounds; domain colors only in icon tiles, charts and category badges; status colors only for status; no decorative color | Random card colors "to look nice"; status red used for emphasis |
| 3 | Light has a source | Every movement has a cause and a direction | Menus grow from their trigger (transform-origin points at it); dialogs rise from just below the center; closing returns the same way | Popovers flying in from a screen corner; list items appearing in random order |
| 4 | Glass has thickness | Elevation comes from thickness, not lines | Card = surface + elev-1 + top-edge highlight; higher layers are brighter with softer, wider shadows; group with space and lightness | 1px borders on cards, tables and sidebars; bordered cards nested inside cards |
| 5 | Light follows the hand | Every input gets optical feedback within 100ms | Hover catches light (lift + specular), press sinks (0.97), focus casts a beam (the ring converges), selection lets light through (refract) | No feedback while waiting for the API; color change only, with no movement or elevation change |
References
| Source | What we borrowed | How Prism differs |
|---|---|---|
| Apple HIG | Spring animation (response + damping ratio), 44pt touch targets, frosted materials, direct manipulation and interruptible motion | Apple's materials bend light and deform; Prism's glass is flat: only thickness, a lit edge and shadow, no deformation |
| Material 3 | State layers (ink overlays on hover and press), window size classes, motion tokens, accent reserved for the primary action | M3 separates levels with tonal surfaces; Prism uses shadow plus highlight, and domain colors have fixed meanings |
| Fluent 2 | Density levels (compact, default, comfortable), visible focus, keyboard first | Fluent leans on borders; Prism uses no structural lines |
| Tide | Spring parameters compiled to CSS linear() at build time; one signature motion per component | Tide's motions squash and stretch; Prism's are optical: catching light, refraction, a light sweep, with no change of shape |
| Moyun (ink) | A transition catalogue row by row, gesture thresholds as numbers, a separate reduced-motion section, rules and code from one source | Moyun targets tablet touch with physics only; Prism targets desktop consoles and mixes springs with fades |
In this section
| Page | Contents |
|---|---|
| Color & material | White light, key light, spectrum, status colors, dispersion, spectrum bar, contrast; five glass levels, frosted glass, scrim, specular light, z-index |
| Type, shape & icons | Font stack, type scale, typesetting rules, radii and the concentric rule, icons and icon tiles |
| Layout | Spacing, size classes, shell dimensions, seven page templates, density, responsive tables, website layout |
| Interaction | State model, hit targets, response timing, feedback levels, destructive actions, forms, keyboard, tooltips, bulk selection, drag and drop, gestures |
| Motion | Spring presets, fade and exit, choreography, six signature motions, transition catalogue, reduced motion, performance |
| Components & patterns | Component spec table, the dashboard pattern, accessibility checklist |