Brand Board & UI Component Kit
Relevant source files
The following files were used as context for generating this wiki page:
The Brand Board & UI Component Kit provides a standardized visual language for the GestaltView project. It consists of standalone HTML designs translated from canonical brand tokens. These artifacts allow users to inspect design principles in a browser or import them into design tools like Canva.
Sources: showcase.html:248-251, showcase/registry.json:109-123
Design Token Architecture
The brand system uses a tiered architecture that moves from raw primitives to meaningful semantic assignments. This structure ensures that updates to a single color primitive propagate across all related UI components.
Sources: brand-sheet.html:10-45
Primitive Color Tokens
Primitive tokens represent the raw palette of the project. The system prioritizes a "dark-first" aesthetic using deep navies and vibrant accents.
| Token Name | Hex Code | Purpose |
|---|---|---|
| Obsidian | #05070B | Deepest background |
| Void Navy | #0A1020 | Surface backgrounds |
| Electric Cyan | #12D6FF | Primary action / highlight |
| Signal Blue | #4AA8FF | Secondary accents |
| Ultraviolet | #8A5CFF | Primary button / brand accent |
| Neon Magenta | #FF3CAC | Warm highlight |
| Success Mint | #6EE7B7 | Positive state signal |
Sources: showcase/brand-board.html:32-35, brand-sheet.html:11-25
Semantic Token Mapping
Semantic tokens assign meaning to the primitive colors. Components reference these functional names instead of hex codes.
This diagram shows the relationship between raw hex values, their functional labels, and their final implementation in the UI.
Sources: brand-sheet.html:28-40, showcase/ui-component-sheet.html:5-15
UI Component Library
The UI Component Sheet serves as a field guide for building context-aware interfaces. It includes static specimens of navigation, inputs, and interactive states.
Sources: showcase/ui-component-sheet.html:1-5
Buttons and Actions
The kit defines five button variants to handle different levels of visual hierarchy. Each variant shares a common radius and motion curve.
- Primary Action: High-contrast Ultraviolet background for main tasks.
- Secondary: Subtle Navy background with a visible border.
- Outline: Transparent background with a Cyan border.
- Neural Glow: A gradient-based variant for AI-related actions.
- Glass: A frosted surface variant that uses backdrop filters.
Sources: brand-sheet.html:120-138, showcase/ui-component-sheet.html:36-42
Surface and Feedback Elements
Components utilize "glass" surfaces and specific badges to signal system status.
| Component | Class | Visual Characteristics |
|---|---|---|
| Status Badge | .badge | Rounded pill with low-opacity Cyan background |
| Glass Surface | .glass | Frosted background with backdrop-filter blur |
| Alert | .alert | Gold-bordered notice for system synchronization |
| Progress Bar | .progress | Thin Cyan indicator showing completion percentage |
Sources: showcase/ui-component-sheet.html:43-63, brand-sheet.html:150-165
Typography and Hierarchy
The typography system relies on a unified scale to maintain legibility across different viewports. It emphasizes display sizes for headlines and mono fonts for technical metadata.
- Wordmark: Uses Cabin Sketch to represent the brand identity.
- Display: Uses Manrope or Aptos for large, balanced headlines.
- System/Mono: Uses Geist Mono for indices and technical labels.
- Body: Optimized for reading with 1.65 line-height.
Sources: showcase/brand-board.html:37-43, brand-sheet.html:103-118
Design Principles
Six core principles govern the visual application of the Brand Board. These ensure the system remains recognizable regardless of the medium.
- Dark field, bright signal: Uses Obsidian and Navy for depth, with Cyan and Magenta as accents.
- Evidence before hype: Prioritizes clear labels and documented claims over decoration.
- Cheerful infrastructure: Aims to make complex systems feel calm and legible.
- Useful motion: Gradients and glows support the information hierarchy without creating noise.
- Room to breathe: Employs a specific rhythm (8/16/24/32/48 px) and rounded radii.
- Warm witnessing: Facilitates human presence without performance pressure.
Sources: showcase/brand-board.html:45-51
Technical Implementation
The brand kit is implemented using CSS variables (Design Tokens) to allow for rapid re-theming. The brand-sheet.html defines these variables within the :root pseudo-class.
:root {
--color-primary: #32b8c6;
--color-surface: #262828;
--font-size-base: 14px;
--radius-lg: 12px;
--shadow-md: 0 4px 6px -1px rgba(0,0,0,.35);
--ease: cubic-bezier(.16,1,.3,1);
}
Sources: brand-sheet.html:10-45
This wiki page summarizes the visual identity and UI patterns used throughout the GestaltView portfolio project. The system facilitates consistency across web, social templates, and professional decks.