GestaltView Brand Sheet
Relevant source files
The following files were used as context for generating this wiki page:
GestaltView Brand Sheet defines the visual identity, design tokens, and interface standards for the GestaltView platform and its associated services. This system organizes design decisions into a buildable framework to ensure consistency across websites, decks, and products. The sheet functions as a "productized floor" for design engagements, prioritizing legibility and evidence-based claims over decorative elements.
Sources: brand-sheet.html:128-135, showcase/registry.json:111-118
Design Token Architecture
The brand system uses a two-tier token architecture to manage styles. Primitive tokens define raw values like hex codes and spacing units. Semantic tokens map these primitives to specific roles, such as background colors or action buttons. This structure allows global theme updates by changing the mapping between the two layers.
Token Hierarchy Flow
This diagram shows how raw values flow through semantic definitions to final UI components.
Color Palette and Semantic Mapping
The palette features a dark-first aesthetic using high-contrast accents. Obsidian and Void Navy provide depth, while Electric Cyan and Signal Blue serve as primary interactive signals. The system utilizes WCAG-conscious contrast ratios to ensure accessibility for all users.
Core Color Primitives
| Token Name | Hex Code | Primary Use |
|---|---|---|
| Obsidian | #05070B | Dark background base |
| Electric Cyan | #12D6FF | Primary action and highlights |
| Ultraviolet | #8A5CFF | Secondary accents |
| Neon Magenta | #FF3CAC | Critical highlights and rules |
| Ember Gold | #F7B267 | Warning and attention signals |
| Success Mint | #6EE7B7 | Positive status indicators |
Sources: brand-sheet.html:164-182, showcase/brand-board.html:51-60
Semantic Mapping Examples
Components reference meaning through semantic tokens rather than raw hex values.
--color-background: Maps to Charcoal 700 (#1F2121) for main page areas.--color-surface: Maps to Charcoal 800 (#262828) for card and panel backgrounds.--color-primary: Maps to Teal 300 (#32B8C6) for primary interactive elements.--color-error: Maps to Red 400 (#FF5459) for system failure alerts.
Sources: brand-sheet.html:187-200
Typography and Scale
The system uses a unified scale for font sizes and weights. It employs tight letter-spacing for large display text and generous line-height for body content to improve readability.
| Category | Size Token | Weight | Description |
|---|---|---|---|
| Display | --font-size-4xl | 600 | Main hero headlines |
| Section | --font-size-3xl | 600 | Major module headers |
| Card | --font-size-2xl | 600 | Panel titles |
| Body | --font-size-base | 400 | Standard UI and paragraph text |
| Small | --font-size-sm | 500 | Metadata and captions |
Sources: brand-sheet.html:206-220, showcase/brand-board.html:69-80
UI Component Library
Components hold specific contexts and follow a restrained visual vocabulary. They use rounded corners, subtle glass effects, and one clear accent per element.
Button Variants
- Primary Action: Solid teal background for the main objective.
- Secondary: Subdued gray background for alternative choices.
- Outline: Transparent background with a bordered frame.
- Neural Glow: Gradient background with an outer shadow for special AI interactions.
- Glass: Frosted surface with backdrop blur for floating UI elements.
Sources: brand-sheet.html:226-238, showcase/ui-component-sheet.html:26-34
Surfaces and Status
The system distinguishes between standard cards and glass surfaces. Standard cards use hairline borders and soft shadows to separate content. Glass surfaces utilize backdrop-filter: blur() for high-contrast hero panels and overlays. Status pills provide semantic feedback through color-coded borders and backgrounds for "Live", "Beta", and "Critical" states.
Sources: brand-sheet.html:244-263, showcase/ui-component-sheet.html:36-44
Design Principles
Visual decisions follow six constitutional principles to maintain system integrity.
- Cheerful Infrastructure: Simplifies complex systems through calm and legible design.
- Evidence Before Hype: Replaces inflated promises with clear labels and observable states.
- Warm Witnessing: Provides human presence without performance pressure.
- Dark Field, Bright Signal: Uses depth to make luminous accents meaningful.
- Useful Motion: Glow and gradients support hierarchy rather than creating noise.
- Room to Breathe: Follows an 8px-based rhythm for spacing and radii.
Sources: showcase/brand-board.html:84-93, showcase/ui-component-sheet.html:55-60
Implementation Details
The brand sheet is implemented as a standalone HTML file containing all CSS primitives within a :root block. This allows the file to be served directly as a reference or imported into design tools like Canva as an editable layout.
:root {
--color-primary: #32b8c6;
--radius-base: 8px;
--shadow-md: 0 4px 6px -1px rgba(0,0,0,.35);
--ease: cubic-bezier(.16,1,.3,1);
}
Sources: brand-sheet.html:15-45, showcase/story-template.html:5-15
The GestaltView Brand Sheet serves as the visual authority for the project. It transforms abstract brand values into a technical specification that developers and designers use to build consistent interfaces. By anchoring every element to a token system, the project ensures that visual growth remains governed and accessible.