Prism design system

Phase 1 styleguide

The visual language of princerehman.com. Use the Prism button at the bottom-left of any page to switch theme modes and watch every section adapt. Phase 2 will extend that button into the full four-axis control surface.

Theme modes

Five modes selectable from the Prism panel. Each redefines the full token set; components consume tokens so they adapt automatically with one exception (see Neomorphic).

Dark Default, deep navy frosted glass
Light Airy off-white frosted glass
Hybrid Mid-tone, dusk palette
System Resolves to light or dark per OS
Neomorphic Solid surfaces, soft shadows (tokens only in Phase 1)

Color tokens

All chromatic values are OKLCH so the Phase 2 palette generator can operate on the L, C, h axes directly. Swatches resolve from the active theme. Switch themes via the Prism panel to compare.

--bg-1 Background gradient stop 1
--bg-2 Background gradient stop 2
--bg-3 Background gradient stop 3
--bg-4 Background gradient stop 4
--accent-royal Primary brand accent
--accent-royal-bright Royal highlight / link
--accent-royal-deep Royal pressed / deep
--accent-emerald Alternate accent (high-stakes)
--accent-emerald-bright Emerald highlight
--accent-emerald-deep Emerald pressed / deep
--color-fg-primary Primary body text
--color-fg-secondary Secondary body text
--color-fg-tertiary Tertiary / supporting
--color-fg-muted Muted / meta
--brand-color Brand wordmark fill
--brand-glow Brand wordmark glow

Typography

Cormorant Garamond for display, Inter for body, Geist for UI chrome, JetBrains Mono for code. Body contrast tuned 2026-05-18.

Display — Cormorant Garamond

Prince Rehman

P. R. Manjee

Body — Inter

Workplace modernization through AI adoption and digital transformation. The body face has to read clearly at long paragraph lengths without competing for attention with the display headings.

UI — Geist

Button labels, controls, and chrome use Geist.

Mono — JetBrains Mono

const palette = generate(mode, model, hue, contrast);

Spacing scale

The spacing scale is theme-agnostic. Use these tokens for all gaps and paddings to keep rhythm consistent across surfaces.

--space-2xs 0.25rem
--space-xs 0.5rem
--space-sm 0.75rem
--space-md 1rem
--space-lg 1.5rem
--space-xl 2rem
--space-2xl 3rem
--space-3xl 4rem
--space-4xl 6rem

Radius scale

Corner radii from subtle (sm) through pill (full).

--radius-sm 8px
--radius-md 16px
--radius-lg 24px
--radius-xl 36px
--radius-2xl 48px
--radius-3xl 56px
--radius-full 9999px

Layout primitives

Container, Stack, and Grid. Reach for these before hand-rolling flex or grid in component styles.

Container — max-width content wrapper

Use <Container size="lg"> for most pages. Sizes: sm, md, lg, xl, 2xl.

Stack — one-axis spacing

item 1 item 2 item 3 item 4

Grid — fixed columns or auto-fit

1
2
3

Glass components

Core surface library. All consume theme tokens so the visual treatment adapts on theme switch.

Buttons

Inputs

Brand guidelines

Rules for how protected elements render across all five theme modes. These are load-bearing because the wordmark is the clearest moment of recognition on every page.

1. Protected elements

"Prince Rehman" and "P. R. Manjee" are protected display elements. They use the Cormorant Garamond display face at 600 weight, fill --brand-color, and carry --brand-glow as ambient halo via the prism-polished SVG filter.

2. Cross-theme contrast

The brand color and glow are redefined per theme so the wordmark never matches surrounding body text. On dark and hybrid the fill is a pale luminous blue-white. On light and neomorphic the fill darkens to deep royal so it reads as the strongest element on the page.

3. Never substitute the typeface

The wordmark is always Cormorant Garamond. Body text near the wordmark may be Inter; UI chrome may be Geist. Other display headings on the page may use Cormorant Garamond too, but they may not visually outweigh the wordmark.

4. SVG filter precedence

The prism-polished filter (defined globally in BaseLayout) is the canonical treatment for the wordmark. The stronger prism-embossed-pronounced filter is reserved for the chevron inside the brand orb. Never apply prism-embossed-pronounced to text.

5. Glow on theme switch

The wordmark glow scales with theme luminance: brighter on dark, softer on light, suppressed on neomorphic. This is controlled by the --brand-glow token alpha per theme, not by component-level overrides.

Phase 1 / Phase 2 scope

The Prism panel today exposes one axis (theme mode). Phase 2 extends the same surface to the full four-axis control.

Shipped — Phase 1
  • OKLCH token system, five theme modes
  • Pre-paint bootstrap (no FOUC)
  • Layout primitives (Container, Stack, Grid)
  • Glass component library
  • Brand guideline rules (this page)
  • Theme mode picker (Prism panel)
Next — Phase 2
  • Dynamic palette generator (mode, model, hue, contrast) → palette
  • Live preview as slider moves
  • Hue slider 0-360
  • Color mixing model selector
  • AA / AAA contrast toggle
  • Quick-select brand swatches