🎨 Visual Identity

This document captures the visual rules for Vulfram’s UI, brand assets, and docs. Use it to keep tools, website, and media consistent.

1. Brand Concept

Modern + technical: sharp contrast, clean shapes, precise spacing.
Dark-first: optimized for developer tools and rendering UIs.
Warm neon accents: purple → magenta → pink.
Frame/glitch hints: subtle cues that reference rendering and motion.
Fox motif: ties back to Vulppi (Vulpes) and the Vulfram name.

2. Color System (OKLCH)

Vulfram uses OKLCH for smooth tonal steps. Use the palette in three roles:

Primary: brand highlights, CTA buttons, active states.
Secondary/Tertiary: accents, gradients, secondary highlights.
Neutral: backgrounds, surfaces, borders, text.

2.1 Palette (Reference)

css

:root {
  --primary-1: oklch(17.8% 0.0203 1.44);
  --primary-9: oklch(54.2% 0.2104 1.44);
  --primary-12: oklch(90.9% 0.0768 1.44);

  --secondary-1: oklch(17.8% 0.03 329.1);
  --secondary-9: oklch(44.3% 0.2029 329.1);
  --secondary-12: oklch(90.5% 0.1001 329.1);

  --tertiary-1: oklch(17.8% 0.0374 283.9);
  --tertiary-9: oklch(54% 0.2646 283.9);
  --tertiary-12: oklch(91.4% 0.0725 283.9);

  --neutral-1: oklch(17.8% 0.014 307.3);
  --neutral-6: oklch(35% 0.0332 307.3);
  --neutral-12: oklch(94.9% 0.0086 307.3);
}

2.2 Neutral Usage

1–3: app background, large surfaces
4–6: borders, dividers, outlines
7–9: muted text and icons
10–12: primary text and emphasis

2.3 Palette Blocks (Reference)

The blocks below use the live CSS variables from the site theme.

Primary

Secondary

Tertiary

Neutral

3. Typography

Nunito: headings, product UI, general text
JetBrains Mono: code, command references, debug output

Use bold weights sparingly; prefer weight + color over heavy outlines.

4. UI Motifs

Glow: soft, controlled (avoid aggressive bloom).
Frame/glitch: subtle horizontal offsets or scanlines, only as accent.
Rounded rectangles: 6–12px radius for cards and buttons.
High contrast: text should read comfortably on dark surfaces.

5. Logo Guidelines

Stylized fox with clean silhouette.
Neon warmth (magenta/purple highlights).
Readable at 32×32px (favicon/app icon).
Works both as icon-only and wordmark + icon.

Avoid overly thin lines and heavy gradients for small sizes.

6. Brand Voice (Docs + UI)

Direct and technical but not sterile.
Prefer short, instructive sentences.
Explain the “why” when introducing a rule or concept.