Design system

Logo & wordmark

96px16pxVialisme

The wordmark is the band name "Vialisme" in small uppercase letters in the site header, linking back to the home page. There is no tagline. The home hero shows the wordmark "Vialisme" set in maran orthodox church (--font-brand) in the brand red #AE0014, centred over the background poster/video as the hero's only text and control. The red logo from the MOJO bible ships as public/images/brand/logo-rouge.png (800×800, transparent).

The browser mark is a single bold red N drawn inside a hexagonal outline (public/favicon.svg), shared by the public pages and the Studio workspace. Keep the silhouette readable at 16px. It does not replace the wordmark.

Colour palette

Ten base colours from the MOJO brand bible (approved 2026-11-01), and only these, for all UI. They are defined once as tokens in src/styles/design-tokens/tokens.scss; component styles reference semantic tokens, never literals. The page and panel background is exactly #D5D5D5 silver, with black text.

• Readable pairings only: white or silver on red / ink / blue, black on silver / sky, white on ink.
• Red is the brand accent and the logo colour, never small text on a dark background.
• Transparent overlays, opacity and gradients must derive from approved tokens (e.g. a navy video overlay fading to transparent) and introduce no new base colour.
• States are communicated with text or shape as well as colour.
• Original photos, video, artwork and third-party media keep their own colours.

Approved exceptions: platform logos use their network colours via the --network-* tokens (logos only, names stay in tooltips and accessible text); the ready/published badge uses the green --color-success in the Studio checklist only; the Studio Production XP bar uses metallic gold #d4af37 only; each Studio release derives its own pastel from a stored hue.

Typography

• MOJO brand bible typefaces (approved 2026-11-01): maran orthodox church for the wordmark (--font-brand), Druk Wide Trial 700 for display headlines (--font-display), BankGothic Md BT for metadata (--font-condensed), Syne for the manifesto line (--font-manifesto).
• Font files ship in /public/fonts/ as .woff2 with @font-face in tokens.scss; the token stacks carry system fallbacks for loading and offline.
• Space Grotesk (Google Fonts, weights 300-700, font-optical-sizing: auto) remains the body/UI typeface; system-ui, sans-serif is the fallback.
• Do not introduce another typeface without an explicit brand decision.

Corners & spacing

• Zero rounded corners on the site: no border-radius anywhere, including video players, cards, buttons and the link-hub blocks. The only exception is 50% for true circles (avatars, circular logo buttons).
• Horizontal gutters: --space-page (clamp(1rem, 4vw, 3rem)) owned by PageContainer; content capped at max-width 80rem, centred. Pages must not add their own outer width or padding.

Page layout

• Every page shares the same header and footer, aligned on the PageContainer gutters.
• One PageShell renders the same SiteHeader and SiteFooter on every page; the header keeps its layout space above the home hero. After 24px of scroll it compacts and gains a slate glass surface.
• Unknown URLs render a branded 404 page ("Lost in the noise") linking back to Home, Releases and Shows.
• Each public page emits Open Graph / Twitter Card metadata with the Dissociate poster as image when SITE_URL is configured; without it, pages stay noindex.

Interaction & motion

• Hovered navigation items lift gently while a thin dark-red underline draws in; the current page uses the same dark-red underline and text, distinguishable by its label and aria-current, not colour alone.
• Links strengthen their underline on hover; buttons gain a focus-colour (blue) ring.
• Clickable cards lift slightly and gain a shadow and border on hover or keyboard focus.
• Hover effects apply to pointer devices only; disabled buttons stay inert; prefers-reduced-motion removes all movement.
• Motion is limited to short hover/press feedback.

Files & references

• Brand guide (docs/brand/README.md)
• Palette tokens (tokens.scss)
• Interaction tokens (interactions.scss)
• Browser favicon (favicon.svg)
• Red logo (public/images/brand/logo-rouge.png)
• Brand visuals (public/images/brand/)
• MOJO brand bible source (Figma)
• Source repository (GitHub)

Band contact: @vialisme_ on Instagram. Music: /releases/.