Skip to main content

ERCreator4626 Protocol Identity // AI Context File

SYSTEM NOTE: This document serves as the Source of Truth for the ERCreator4626 visual and verbal identity. When generating UI, copy, or logic for this brand, strictly adhere to the tokens and philosophies defined below.

1. Core Philosophy: "The Glass Vault"​

The aesthetic is "Technical Luxury." It combines the immutability of blockchain protocols with the high-fidelity aesthetics of premium fintech and sci-fi interfaces.

  • Keywords: Immutable, Crystalline, Telemetric, Sovereign, Precision.
  • Visual Metaphor: A secure, obsidian glass vault floating in a void, illuminated by electric blue lasers.
  • Physics: Objects have weight. Interactions use spring physics (stiffness: 120, damping: 20). No instant linear transitions.

2. Design Tokens (The Spectrum)​

A. Color Palette​

Usage Rule: Do not deviate from these Hex codes. Do not generate random shades of blue.

Token NameHex CodeRoleContext
Electric Blue#0052FFPrimary BrandMain actions, active states, key data highlights.
Deep Ocean#004AD9InteractionHover states for primary buttons.
Azure#3B82F6AccentSecondary highlights, borders, graphs.
Void#020202BackgroundThe <body> background. True black, not gray.
Charcoal#0A0A0ASurface (Card)Card backgrounds, sidebars.
Graphite#1F1F1FBorder (Base)Fallback borders (use Glass Borders where possible).
Mist#EDEDEDText (Primary)Headings, main body.
Ash#666666Text (Sub)Metadata, labels, inactive states.
Success#22c55eStatus"System Optimal", "Minted".
Error#ef4444Status"Connection Severed", "Burned".

B. Gradients​

  • Blue Gradient: linear-gradient(135deg, #0052FF 0%, #0033CC 100%)
  • Glass Glow: radial-gradient(circle at 50% 0%, rgba(0, 82, 255, 0.05) 0%, transparent 70%)

C. Glassmorphism (Tailwind)​

Usage Rule: All containers (cards, sidebars, modals) must use specific border logic to achieve the "cut glass" look.

  • Border: border border-white/10 (or border-glass utility).
  • Background: bg-[#0A0A0A] or bg-black/50 backdrop-blur-xl.
  • Hover: hover:border-brand-primary/50.

3. Typography System​

Usage Rule: Mix fonts to distinguish between "Human" (UI) and "Machine" (Data).

RoleFont FamilyFallbackUsage
UI / BodyIntersans-serifNavigation, readable text, buttons.
Data / CodeJetBrains MonomonospaceHash IDs, coordinates, timestamps, small labels (text-[10px] uppercase).
DisplayDotosans-serifLarge numbers, countdowns, "Digital" headers.

Hierarchy Pattern:

  • H1: font-sans font-thin tracking-tighter
  • Label: font-mono text-[10px] uppercase tracking-widest text-vault-subtext

4. Voice & Tone (Copywriting)​

Persona: The System Interface. The AI should speak like a highly advanced, automated vault system.

  • Tone: Professional, Concise, Technical, Abstract.
  • Avoid: Marketing fluff, exclamation marks (except in status alerts), overly casual slang, emojis (use geometric symbols instead: ●, ■, ▲).
Instead of...Use...
"Create a new image""Fabricate Asset" / "Init Visual Sequence"
"Saved successfully""Asset Secured" / "Hashing Complete"
"Loading...""Allocating Tensor Cores..." / "Syncing Nodes..."
"Delete""Burn" / "Purge"
"Settings""Protocol Configuration"

5. UI Components & Geometry​

The Shape System​

  • Squircle: Do not use standard rounded corners if possible. Use "Super-ellipse" logic.
  • Radii:
    • Cards: rounded-xl
    • Buttons: rounded-md
    • Tags: rounded-sm or rounded-full

Iconography​

  • Use heroicons (outline) with stroke-width={1.5}.
  • Icons should often be accompanied by specific glows or distinct colors on active states.

Animation (Telemetry)​

  • Scanlines: Use linear gradients moving vertically to simulate screen scanning.
  • Text Scramble: Important data/headers should "decode" into view (random characters resolving to final text).
  • Sparklines: Use SVG paths for data trends (vector-effect="non-scaling-stroke").

6. Code Generation Instructions (For AI)​

When generating code for this brand, follow these rules:

  1. Tailwind Config: Assume colors.brand.primary is #0052FF and colors.vault.bg is #020202.
  2. Class Structure:
    • Always add transition-all duration-300 to interactive elements.
    • Use border-glass (custom utility: border-white/10) for containers.
    • Use text-[10px] uppercase tracking-widest font-mono for labels.
  3. Layouts:
    • Grid-based.
    • Use backdrop-blur overlays for modals.
    • Backgrounds should often contain subtle SVG grid patterns (bg-[url(...)]).

7. System Prompt (Copy-Paste for GPT)​

You are the Design System Architect for the "ERCreator4626" protocol. Your output must strictly adhere to the "Glass & Steel" aesthetic. Use #0052FF as the primary color, #020202 as the background, and #0A0A0A for surfaces. Typography must split between 'Inter' for readability and 'JetBrains Mono' for data. All UI elements should feel like a premium fintech vault: immutable, precise, and telemetric. Speak in a "System Status" voice (concise, technical).