The branding & accessibility platform for Slate

configured for  ·  Yale SOM

On-brand, accessible Slate & built to scale.

CLAVA is the platform for branding and accessibility on Technolutions Slate — harvest a brand, apply it accessibly across every admissions instance, audit content for accessibility and equity, and keep it all maintained from one governed source. Yale SOM is the first institution it’s built for; the platform is the product. The tools run in your browser — your brand never leaves your device.

Start in the Workshop → What is CLAVA? →

The horizon — Yale SOM → Yale University → everywhere.

For Admissions

Choose a branding level

Decide how much brand a program wants — and see exactly what each level looks like before committing.

Tier Chooser

The three levels — Essence · Signature · Bespoke — rendered side by side, so Admissions can pick the right depth for a program.

Seat of the applicant

Apply for your branding

Walk the real Slate journey in your own brand, sandboxed — then walk away with the files.

Apply for Your Branding

Make brand decisions, walk the real applicant journey in that brand, then download your build.css + XSLT. The meta-application.

Load Any Shell

Preview your branding against any instance's page shell — fail-states to distinction.

Regenerate: npm run slate:build-shell-loader

For reviewers & stakeholders

See the work

A window into the design — what changed, why, and how it renders — without needing Slate access.

Design Review Portal

The branding work laid out for reviewers and stakeholders: the decisions, the rationale, and the rendered result.

Peer Catalogue internal

A living registry of 105 verified peer Slate instances (8 categories); the analyzed set is graded on Build-out × Lean, with each school's real brand rendered on a Slate apply page in our sim — the arbiter for branding questions and the baseline our work is measured against. Populate previews: npm run slate:css-analyze -- --registry --store; rebuild: npm run slate:catalogue.

For content editors

Author & clean content

Write Form Builder content that stays on-brand — and see exactly which patterns you're allowed to use.

Content Check & Clean (AFINA)

Paste your content's Source HTML; it cleans the markup, flags judgment calls, and never touches your words, links, or Slate {{ }}/{% %} logic. Also lives, server-free, in Atelier → Clean.

Run first: npm run afina:serve

Style Guide

The content patterns — headings, blockquote, dividers, tables, callouts — each rendered in the live brand, with when-to-use notes and copy-paste snippets. The portable companion to the Slate Style & Standards capstone portal.

Opens directly. Slate Style & Standards portal (four-pillar capstone — Accessibility · Usability · Slate · SOM Style — with a live “check your build.css” grader): npm run slate:build-styleguide-portal. Maintainer source: Design System.

Portal Navigation

The portal navigation system — a CSS-only, accessible menu (real anchors + native checkbox/label disclosure, no faked ARIA), plus the side-nav pattern. Paired with the shipped nav styling in build.css. Paste the fragment into a portal.

Opens directly (axe-gated, both viewports). Design rationale + the build.css side-nav recommendation: PORTAL_NAV_DESIGN.md.

Brand-Standards Auditor

Paste or upload any Slate build.css and get a two-axis graded report — a Brand Grade (reserved colours, colour legibility, tokenised colours) and a Lean Score (gzip weight, slow-3G load, render-cost — the leaner=greener equity axis). A shareable quick-check for any instance; runs entirely in your browser.

Opens directly (axe-gated). Engine: scripts/lib/brand-audit-checks.mjs; canonical gate stays npm run slate:scorecard.

Slate Form Builder (simulator)

A “fake” Slate Form Builder: pick form elements from the 7 families and each renders in the captured Slate runtime identity (class + data-type, grounded to live captures) under the live build.css — see how Slate renders and how the brand hooks in. Reorder, remove, copy the source.

Opens directly (axe-gated). Element model: scripts/lib/slate-form-registry.mjs (gate: tests/slate-form-registry.test.mjs).

For admins & developers

Build a brand & inspect offline

Harvest a brand from a homepage, tune the decisions, and inspect every surface offline — no upload cycle.

Brand Harvest

Point at a homepage; get an accessible, on-brand Slate build.css + fonts + logo — the equity floor for any instance.

Regenerate: npm run slate:build-brand-harvest-portable

Brand Configurator

Tune brand decisions with a live offline preview — colour, type, controls — before anything ships.

Branding Decisions

The decision log and the rationale behind each call, portable and shareable.

Offline Fixture Lab

Every fixture × viewport with evidence badges and visual baselines — the offline QA surface that replaces the upload-and-wait loop.

Run first: npm run preview:local

About, credit & terms

What this is, who made it, and the terms it’s shared under.

What this is

CLAVA is a brand-agnostic Slate branding & content platform: one offline toolset to harvest a brand, apply it accessibly, review it, and keep content on-brand. This page is its front door — the entry point to every tool on your machine.

Yale SOM is the first client it’s configured for — a reference implementation, not the boundary.

Credit

Created by Rémi Moët-Buonaparte — Curator of Light.

CLAVA and this toolkit are her independent work and intellectual property.

© 2026 Rémi Moët-Buonaparte. All rights reserved.

Terms & trademarks

  • CLAVA is independent — not affiliated with, endorsed by, or sponsored by Technolutions or Yale University.
  • “Slate” is a trademark of Technolutions, Inc.; “Yale” / “Yale SOM” are trademarks of Yale University — used only to name the first client/case study, whose content & Slate instance remain Yale’s.
  • Ships no client-confidential data; runs offline.
  • Provided “as is”, without warranty; use at your own risk.
  • License & full terms of use: to be finalized before any public release.