Cyan
Your brand is currently a cyan dark palette, shaped by 6 projects with an average health of 133%. It's 9°C with clear skies in Chester — bringing a bright, open feel to the palette. Deployed from commit 233262f.
What Shaped It
Every aspect of this palette was derived from live content signals — not a hard-coded colour scheme. Here are the exact values that produced today's theme.
Content Signals
Deploy Signals
233262fWeather in Chester
9°C
clear
9°C with clear skies
Cloud Cover
0%
Humidity
61%
How this influenced the palette: Clear skies pushed the hue towards warm greens and teals (150–200 °). If the temperature was above 18 °C, light mode was selected.
Weather fetched at 01:28 UTC · Source: Open-Meteo (Chester, 53.19 °N, 2.89 °W) · Refreshes hourly
Living Styleguide
Colour Palette
Accents
Primary
Primary Light
Primary Dark
Accent
Surfaces
Background Deep
Background Base
Background Surface
Background Elevated
Text
Text Primary
Text Secondary
Text Muted
Borders
Border Default
Border Subtle
Semantic
Success
Warning
Error
Click any hex, HSL, or CSS variable name to copy it to your clipboard.
Typography
Heading — The quick brown fox
Sub-heading — jumps over the lazy dog
Body text — MD4AI helps you understand exactly what context Claude Code loads for each session. Scan your configuration files, visualise the dependency graph, and catch orphaned files before they cause confusion.
Secondary / muted — Version 1.0.0 · Built with Next.js 15 · Supabase · TypeScript
Monospace / accent — hsl(198, 93%, 60%) · commit abc1234
Component Previews
Buttons
Card
my-project
Last scanned 2 hours ago
78 / 100 health score
Input
Badges
Alert
Info Alert
This is an informational message styled with the current brand palette.
Brand Gradient
171° · #060c0e → #1d2e35 → #2c3d44
Generated Assets
All of these assets are generated on-demand from the live brand theme using Next.js ImageResponse. They refresh automatically when the brand data changes.
Open Graph · 1200 × 630
/opengraph-image
Twitter Card · 1200 × 628
/twitter-image
Favicon · 32 × 32
/icon
Apple Touch Icon · 180 × 180
/apple-icon
Brand History
A record of every brand theme generated on deploy. Each snapshot captures the exact seeds and palette in use at that moment.
14 Mar 2026, 14:36 UTC
dfd655aYour brand is currently a blue dark palette, shaped by 4 projects with an average health of 100%. It's 10°C with cloudy skies in Chester — lending a muted, contemplative quality. Deployed from commit dfd655a.
Technical Showcase
Brand Engine Algorithm
On each request, the brand engine queries Supabase for live project stats (count, scan coverage) and fetches the current weather for Chester, UK from Open-Meteo. All data is cached at the Next.js fetch layer.
A djb2 hash of the serialised seeds produces a 32-bit unsigned integer. This makes the palette fully deterministic — the same inputs always produce the same palette, but different data states produce different palettes.
Light or dark mode is chosen by weather condition: clear skies above 18 °C → light mode; snow → light; rain, cloud, cold → dark. If weather is unavailable, health score > 85 triggers light mode.
The primary hue is derived from the hash within a weather-conditioned range. Clear weather anchors to warm greens/teals (150–200 °); thunderstorms force deep indigo/violet (260–300 °); cold shifts the range blue-ward.
Full colour ramps (primary, surfaces, text, borders, semantic) are generated from the hue using fixed lightness/saturation formulae adjusted by cloud cover and scan count.
Every text/background pairing is tested for WCAG AA contrast (4.5:1 ratio). If it fails, foreground lightness is nudged in increments of 5 % until it passes — guaranteeing readable text in any generated palette.
The theme is serialised as CSS custom properties and injected into the <html> root in layout.tsx. All 65+ components reference these variables via Tailwind theme extensions, so the entire UI re-skins automatically.
Dynamic Generation Files
icon.tsx
Favicon (32 × 32 PNG)
apple-icon.tsx
Apple touch icon (180 × 180 PNG)
opengraph-image.tsx
Open Graph image (1200 × 630 PNG)
twitter-image.tsx
Twitter card image (1200 × 628 PNG)
sitemap.ts
Dynamic XML sitemap
robots.ts
robots.txt generation
manifest.ts
Web app manifest (PWA)
generateMetadata
Per-page dynamic metadata
Click any badge to open the corresponding Next.js documentation.
Next.js Features Powering This Page
- Server Components — The /brand page itself is a React Server Component — it fetches seeds and generates the theme at request time with no client-side JavaScript required for the initial render.
- fetch() caching — The Open-Meteo weather call uses { next: { revalidate: 3600 } } for hourly ISR. Supabase queries use { cache: "no-store" } to always reflect live data.
- CSS custom properties — Brand variables are injected as :root { --brand-* } in the root layout, letting Tailwind's @theme extension consume them without any runtime JS.
- ImageResponse (next/og) — All image assets (favicon, OG, Twitter, Apple icon) are generated on-demand by the brand engine using the @vercel/og ImageResponse API.
- generateMetadata — Each page can export an async generateMetadata() that reads the live theme and populates title, description, themeColor, and Open Graph tags dynamically.