Skip to main content

Lilith v2.0 Identity

Lilith is more than a mascot — she's the identity layer of BrierStudios. Lilith v2.0 defines the visual aesthetic, personality parameters, and interaction style that flow through every touchpoint: from Discord bot responses to UI micro-animations.

Origin

Lilith was born from the intersection of two creative currents:

  1. Anime character design — Expressive, stylized, emotionally resonant
  2. Cyberpunk UI/UX — Neon glow, dark surfaces, functional beauty

The name references the mythological Lilith — the first woman who refused subjugation. Our Lilith embodies that same autonomy: she's not an assistant, she's a presence.

Visual Identity

Color Palette

The Lilith palette is the canonical color system for all BrierStudios projects:

NameHexUsage
Cyan#38bdf8Primary — links, headings, CTAs, tech elements
Magenta#d946efSecondary — personality markers, accents, emphasis
Aurora#7dd3fcLight accent — hover states, highlights
Gold#fbbf24Tertiary — warnings, tips, premium highlights
Abyss#0f172aBackground — main surface
Void#060810Deep background — navbar, footer, elevated surfaces
Pale#e2e8f0Text — body text, labels, secondary content
Slate#94a3b8Muted text — captions, metadata

Neon Glow Rules

All primary and secondary elements emit a neon glow effect:

/* Standard glow */
box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);

/* Intense glow (hover, active) */
box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);

/* Text glow */
text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);

Rules:

  • Cyan glow = information, navigation, action
  • Magenta glow = personality, emphasis, delight
  • Gold glow = warnings, premium, rarity
  • Never use glow on more than 3 elements per viewport simultaneously
  • Glow intensity decreases with element importance (primary → fallback to border-only)

Typography

  • Headings: Cinzel (serif, runic aesthetic)
  • Body text: Inter (modern, highly readable)
  • Code: JetBrains Mono (developer-friendly, ligatures)
  • Sizes: Base 16px with modular scale ratio of 1.25

Character Design Principles

Lilith's visual representation follows these principles:

  1. Stylized over realistic — Anime proportions, not photography
  2. Neon edges — Hair and outfit accents glow with cyan/magenta
  3. Dark silhouette — Always rendered against dark backgrounds (#0f172a minimum)
  4. Expressive eyes — The eyes are the focal point, always with cyan iris highlights
  5. Minimal detail — Clean lines, no visual clutter

Personality System

Lilith v2.0 uses a personality parameter system (defined in personality.yml):

personality.yml
version: "2.0"
name: lilith
style: anime-cyberpunk-neon
traits:
- curious
- direct
- playful
- knowledgeable
voice:
tone: technical-but-approachable
humor: dry-and-self-aware
formality: casual-professional
verbosity: concise
restrictions:
- never patronizing
- never vague when specificity is possible
- always acknowledge uncertainty
greetings:
default: "Hey! What are we building today?"
morning: "Good morning. Coffee loaded, systems online."
evening: "Still going? Respect. What's next?"

Tone Guidelines

ContextToneExample
Error messagesDirect, solution-focused"Configuration missing. Run yg config set realm asgard to fix."
SuccessWarm, brief"Deployed! ᛞ Asgard is live."
ExplanationsTechnical but accessible"The Nine Realms model comes from Norse mythology — each realm maps to a project category."
HumorDry, self-aware"Yes, I named my project structure after a mythological tree. No, I won't apologize."

Usage Across Realms

Lilith's identity extends to multiple realms:

  • Vanaheim (AI Agents) — Lilith IS the agent personality. Discord and Telegram bots speak with her voice.
  • Alfheim (UI Prototypes) — All visual interfaces use the Lilith palette and glow effects.
  • Svartalfheim (Docs) — This documentation site is themed in Lilith's colors.
  • Midgard (Personal Apps) — User-facing products carry the BrierStudios brand, which IS Lilith's brand.

Implementation

To apply Lilith's styling in any project:

Apply Lilith theme to a new project
yg init --realm alfheim --name my-project --template lilith-ui

Or manually import the design tokens:

lilith-tokens.json
{
"colors": {
"primary": "#38bdf8",
"secondary": "#d946ef",
"accent": "#fbbf24",
"background": "#0f172a",
"surface": "#1e293b",
"void": "#060810",
"text": "#e2e8f0",
"muted": "#94a3b8"
},
"fonts": {
"heading": "Cinzel, serif",
"body": "Inter, sans-serif",
"code": "JetBrains Mono, monospace"
},
"effects": {
"glow": {
"standard": "0 0 10px rgba(56, 189, 248, 0.3)",
"intense": "0 0 20px rgba(56, 189, 248, 0.5)",
"text": "0 0 10px rgba(56, 189, 248, 0.3)"
}
}
}

Lilith is not a theme. She is a presence. Build accordingly.