Theming & branding

GlassKit uses Tailwind v4 with @theme tokens. Two surfaces, two stylesheets, one shared design language. Rebranding for your product takes ~10 minutes:

The companion gets its own palette because it's a normal web surface: full color, gradients, all the usual. The glasses app inherits the additive-display palette from glasses-ui because the optics constrain it (pure black emits no light, so the design system has to be glowing marks on black).

The companion's tokens

Edit companion/app/globals.css:

@import "tailwindcss";

@theme {
  --color-bg: #08090b;
  --color-surface: #131418;
  --color-surface-2: #1c1e23;
  --color-ink: #f2f3f5;
  --color-ink-dim: #9aa0a8;
  --color-rule: #232629;
  --color-rule-hover: #34383d;
  --color-accent: #36e27f;          /* the green CTA color */
  --color-accent-ink: #04210f;      /* dark text on the accent bg */

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

Every --color-X token automatically becomes a Tailwind utility: bg-bg, text-ink-dim, border-rule, bg-accent text-accent-ink, etc. To rebrand:

That's the entire rebrand for the companion. No component edits required. Every component reads from the tokens.

The library's tokens (the glasses app)

@import "tailwindcss";
@import "@glasskit/glasses-ui/styles.css";

/* Your override — wins because it's loaded later */
@theme {
  --color-accent: #ff7e6b;      /* your brand color */
  --color-room: #050507;        /* the dev-only "around-the-viewport" color */
}

The library's defaults:

@theme {
  --color-bg: #000;             /* pure black — transparent on the device */
  --color-ink: #f2f3f5;
  --color-ink-dim: #9aa0a8;
  --color-accent: #36e27f;      /* phosphor green */
  --color-surface: #14171c;
  --color-rule: #2a2f37;
  --color-room: #07080a;        /* dark room around the viewport — local dev only */

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

Constraints from the optics

The Meta Ray-Ban Display is additive: it adds light to what the wearer sees through the lens. That has hard implications:

The semantic classes

glasses-ui/styles.css ships a set of @apply-based classes that every demo uses:

• .glass-viewport / .glass-viewport--frame: the 600×600 container styling
• .screen: flex column layout for a full screen
• .focusable: base interactive styling + the focus ring
• .launcher, .launcher-grid, .launcher-card, .launcher-card__label, .launcher-card__tagline: the demo launcher
• .app-head, .row, .readout, .label, .dim, .cue-script, .cue-line, .cue-bar: the typography + layout classes the demos compose

These are semantic by intent: .screen doesn't mean "a flex column with gap: 12px"; it means "the page-level layout of a screen on the glasses." If you want a slightly different gap, you edit glasses-ui/styles.css once and every demo updates.

Adding your own classes

In app/src/index.css, after the library import:

@import "tailwindcss";
@import "@glasskit/glasses-ui/styles.css";

.my-special-card {
  @apply rounded-md border border-rule bg-surface p-4;
}

.ai-response {
  /* Existing class — extend it */
  @apply m-0 min-h-[2.6em] w-full text-center leading-[1.5] text-ink;
  font-size: 13px;
}

Use Tailwind utilities (@apply) over custom CSS where possible. The utilities already reference your --color-* tokens, so a theme swap doesn't require touching individual classes.

Fonts

import { Bricolage_Grotesque, Hanken_Grotesk } from "next/font/google";

const display = Bricolage_Grotesque({ variable: "--font-display", subsets: ["latin"], weight: ["400","600","700","800"] });
const body = Hanken_Grotesk({ variable: "--font-body", subsets: ["latin"], weight: ["400","500","600","700"] });

@theme {
  --font-display: var(--font-display), ui-sans-serif, system-ui;
  --font-sans: var(--font-body), ui-sans-serif, system-ui;
}

Dark / light theme

Both apps ship dark-only by default. It's the right default for a glasses-adjacent product and matches the additive display constraint. If you want a light mode for the companion:

Tokens you probably won't touch

• --color-rule / --color-rule-hover: hairline dividers and card borders. Stay subtle.
• --color-surface / --color-surface-2: card backgrounds. Each half-step lighter than --color-bg adds visual hierarchy.
• --color-ink-dim: secondary text. Adjusting this changes the contrast between headlines and metadata.

Most rebrands change --color-accent + --font-* and call it done. The architecture lets you go deeper, but the design system is already calibrated, so fight it only if your brand actually demands it.