Brand Guidelines
AI GCC.ai Design System
A comprehensive design system for building consistent, accessible, and beautiful interfaces. Based on the Hexaview Uniview brand system.
Logo
Usage Rules
- Minimum size: 32px height (digital), 0.5 inch (print)
- Maintain clear space equal to the height of the "AI" mark on all sides
- Never stretch, rotate, or alter the logo colors outside of approved variants
- Use the dark variant on dark backgrounds, light variant on light backgrounds
Color Palette
Primary — Emerald
Emerald is our primary brand color. Use for CTAs, success states, links, and AI indicators. In dark mode, prefer emerald-400 (#34d399). In light mode, prefer emerald-500/600.
50
#ecfdf5
100
#d1fae5
200
#a7f3d0
300
#6ee7b7
400
#34d399
500
#10b981
600
#059669
700
#047857
800
#065f46
900
#064e3b
Foundation — Zinc
Zinc is the foundation palette, comprising 70%+ of the interface. Used for backgrounds, text, borders, and surfaces.
50
#fafafa
100
#f4f4f5
200
#e4e4e7
300
#d4d4d8
400
#a1a1aa
500
#71717a
600
#52525b
700
#3f3f46
800
#27272a
900
#18181b
950
#09090b
Accent Colors
Accent colors encode meaning: Sky for information, Purple for logic/AI processing, Pink for human input/validation.
Information (Sky)
#0ea5e9
Logic (Purple)
#8b5cf6
Human Input (Pink)
#ec4899
Semantic Colors
Error
#ef4444
Warning
#f59e0b
Success
#22c55e
Typography
Font Family
Inter
Optimized for readability across all screen sizes. Used for all text throughout the interface. Monospace (Geist Mono) is used for code and technical content.
Components
Buttons
Button Guidelines
- Primary:
bg-emerald-500 text-white rounded-full - Secondary:
border border-zinc-300 dark:border-zinc-700 rounded-full - Dark mode primary:
bg-emerald-400/10 text-emerald-400 ring-1 ring-emerald-400/20 - Always use
rounded-fullfor pill shape
Cards
Default Card
Standard card with subtle border and clean background.
Interactive Card
Hover state transitions to emerald border accent.
Featured Card
Highlighted with emerald border for featured content.
Badges & Tags
Accessibility
WCAG 2.1 AA Compliance
- Normal text: minimum 4.5:1 contrast ratio
- Large text: minimum 3:1 contrast ratio
- Never rely on color alone for critical information
- Pair color indicators with icons or text labels
Color Meaning System
- Emerald — Success, AI, primary actions
- Sky — Information, data, neutral alerts
- Purple — Logic, AI processing, computation
- Pink — Human input, validation, review
- Red — Errors, destructive actions
- Amber — Warnings, caution states
Design Principles
AI-First, Human-Validated
Design for intelligent automation with human oversight. Emerald represents AI; Pink represents human touchpoints.
Clarity & Trust
Every element communicates clearly. Consistent color-coding builds trust. Zinc foundation keeps the interface calm and focused.
Accessible by Default
WCAG 2.1 AA compliance is non-negotiable. All color combinations meet minimum contrast ratios. Pair color with icons.