Citadel

Overview

Citadel is a technical memory platform designed for engineering teams and AI agents, embodying a philosophy of "Architectural Minimalism"—where clarity emerges from radical reduction. The aesthetic is deliberately austere: a near-white canvas (rgb(250, 250, 250)) paired with deep black text (rgb(10, 10, 10)) and a single, unmissable accent in vivid magenta (rgb(255, 81, 255)). This high-contrast palette evokes precision, technical authority, and the unambiguous nature of code and memory. The UI feels like a blueprint or schematic—no ornament, no gradients, no soft shadows—just pure information architecture. Users experience a sense of control and directness: every pixel serves a function.

The brand voice is terse, technical, and confident. Citadel speaks in the language of engineers: "Your team already wrote it down. Citadel captures it as it happens." Vocabulary favors concrete nouns (commits, sessions, nodes, Central) over abstractions. Tone is never breathless or marketing-speak; instead, it's matter-of-fact and precise. Example sentence in brand voice: "Citadel remembers your dead ends—the decisions that led nowhere are as valuable as the ones that shipped."

Colors

The color system is built on extreme contrast and functional hierarchy. **Primary (rgb(255, 81, 255) / #ff51ff)** is the brand's signature accent, used exclusively on call-to-action buttons, active navigation states, and interactive focus indicators. It appears sparingly but unmistakably, commanding attention without noise. **Surface (rgb(250, 250, 250) / #fafafa)** is the dominant background, providing a clean, neutral canvas that lets content breathe. **On-surface (rgb(10, 10, 10) / #0a0a0a)** is the primary text color—nearly pure black, ensuring maximum legibility and technical authority. **Outline (rgb(177, 177, 183) / #b1b1b7)** and **Outline-variant (rgb(208, 208, 208) / #d0d0d0)** define borders and dividers with subtle but deliberate separation. **Secondary (rgb(108, 117, 125) / #6

Typography

The type system uses a single typeface—Inter—across all scales, reinforcing the minimalist aesthetic. Display (62px, 300 weight, -0.038em tracking) is reserved for hero headlines and sets the tone with its light, airy presence; it communicates confidence through restraint. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) establish section hierarchy with moderate weight and tight tracking. Body-lg (17.5px, 400 weight) and body-md (16.5px, 400 weight) are the workhorses of content, set at generous line-heights (28px and 24px respectively) to ensure readability on screen. Label-md (14px, 500 weight) and label-sm (13px, 600 weight, 0.16em tracking) handle UI labels, button text, and navigation; the uppercase tracking on label-sm creates visual distinction for status badges and

Layout

The layout operates on a 12-column grid with a fixed max-width of 1200px, centered with symmetric padding (24px on desktop, 16px on mobile). The spacing scale is semantic and hierarchical: unit (4px) for micro-adjustments, sm (12px) for tight component spacing, md (24px) for standard padding and section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The hero section uses clamp(30px, 5.4vw, 62px) for responsive headline sizing, ensuring the display text scales fluidly between mobile and desktop without jarring jumps. Cards and containers use md (24px) padding consistently. Section rhythm is established through lg spacing (40px) between major content blocks, creating visual breathing room without excessive whitespace. The grid is fluid on mobi

Elevation & Depth

Depth in Citadel is achieved through subtle, restrained shadows and borders rather than layered glassmorphism or dramatic drop-shadows. **Level 1 (Base)**: Flat surface with no shadow; used for the page background and most card backgrounds. **Level 2 (Elevated Card)**: 1px solid border in outline-variant (rgb(208, 208, 208)) plus box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). This creates a gentle lift without visual heaviness, appropriate for interactive cards and input fields. **Level 3 (Modal/Overlay)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with a 1px border, used for modals, dropdowns, a

Shapes

The shape philosophy is **Architectural Sharpness**—corners are either 0px (sharp, 90-degree angles) or 4px (md, subtle rounding for input fields and small components). This reflects the technical, blueprint-like aesthetic: sharp edges convey precision and authority. Buttons use 0px border-radius (sharp corners), reinforcing their role as direct, unambiguous actions. Input fields use 4px (md) for a touch of approachability while maintaining the technical feel. Cards use 0px by default, but can use 4px (md) when they need visual softness (e.g., hover states). Full (9999px) is reserved for badge

Components

Action Elements Buttons are the primary interactive element and come in three variants. **Button-primary** uses background rgb(255, 81, 255) with black text, 0px border-radius, and padding 11px 20px. On hover, apply filter: brightness(1.06) over 150ms to create a subtle brightening effect—no color shift, just intensity. **Button-secondary** uses a transparent background with a 1px border in outline-variant (rgb(208, 208, 208)), black text, and the same padding. On hover, the border shifts to on-surface-variant (rgb(85, 85, 85)) and text color follows, creating a tightening effect. **Button-ghost** is transparent with no border and primary-colored text; on hover, it gains a background-color of surface-container-high (rgb(233, 236, 239)) over 150ms. All buttons use label-md typography (1

Do's and Don'ts

**Do**

• Do use primary (rgb(255, 81, 255)) exclusively for CTAs, active states, and focus indicators—never for backgrounds or large surfaces.
• Do maintain sharp 0px corners on buttons and cards to reinforce the technical, architectural aesthetic.
• Do use the full surface container stack (surface-container-low through surface-container-highest) to create subtle depth without relying on shadows.
• Do apply transitions over 150ms using cubic-bezier(0.4, 0, 0.2, 1) for all interactive state changes (hover, focus, active).
• Do use label-sm (13px, 600 weight, 0.16em tracking) for uppercase metadata, version badges, and section labels.
• Do ensure all interactive elements have a visible focus state with 2px solid primary outline and 2px offset for keyboard navigation.

**Don't**

• Don't use rounded corners (border-radius > 0) on buttons or primary cards—sharp edges are core to the brand.
• Don't apply multiple shadows or layer effects; use the three defined elevation levels (sm, md, lg) consistently.
• Don't mix typefaces; Inter is the only font for UI text. JetBrains Mono is reserved for code and technical references only.
• Don't use primary (magenta) for backgrounds, text bodies, or decorative elements—reserve it for interactive affordances only.
• Don't apply color shifts on hover; use filter: brightness() or opacity changes instead to maintain the minimalist aesthetic.
• Don't exceed 1200px container max-width; content should never stretch beyond this boundary.