UniView Brand Guidelines
Color palette, typography, and visual identity guidelines for UniView
Color Palette
Our color system is built on Tailwind CSS v4 with emerald as the primary brand color
Primary Brand Color - Emerald
Emerald represents success, AI processing, validation, and trust. Used for CTAs, brand identity, and success states.
50
#ecfdf5
Success backgrounds, highlights
100
#d1fae5
200
#a7f3d0
300
#6ee7b7
400
#34d399
Dark mode brand, links, AI indicators
500
#10b981
Primary brand, CTAs, success states
600
#059669
700
#047857
800
#065f46
900
#064e3b
Neutral Colors
50
#fafafa
100
#f4f4f5
200
#e4e4e7
300
#d4d4d8
400
#a1a1aa
500
#71717a
600
#52525b
700
#3f3f46
800
#27272a
900
#18181b
950
#09090b
Accent Colors
Colors for information, logic, and human interaction elements.
Information
#0ea5e9
Info badges, data flow, code structure
Logic
#8b5cf6
Business logic, complex algorithms
Human Input
#ec4899
Human validation, feedback widgets
Semantic Colors
Feedback colors for errors, warnings, and success states.
Errors
#ef4444
Error messages, validation failures, destructive actions
Warnings
#f59e0b
Learning opportunities, incomplete sections, needs review
Success
#22c55e
Confirmed validations, completed tasks
Color Philosophy & Usage
Each color has specific meaning and purpose in our design system.
Emerald (Primary Brand)
Success, AI processing, validation, trust
Do:
- ✓Use for primary CTAs
- ✓AI success indicators
- ✓Brand moments (logo, hero)
- ✓Links and interactive elements
- ✓Progress indicators
Don't:
- ✗Overuse (limit to 10-15% of interface)
- ✗Use for errors or warnings
- ✗Mix with other greens
Zinc (Foundation)
Content, documentation, neutral base
70%+ of interface - all text content, borders, and dividers
Sky (Information)
Information, data flow, navigation
Info badges, diagrams, code visualization
Pink (Human Validation)
Human validation, feedback, collaboration
Expert badges, feedback UI, learning indicators
Accessibility (WCAG 2.1 AA)
All color combinations tested for contrast ratios. Normal text requires 4.5:1 minimum, large text 3:1 minimum.
Light Mode
Dark Mode
Important: Never rely on color alone. Always pair color with icons, text, or patterns for critical information.
Typography
We use Inter for all text, optimized for readability across all screen sizes
Headings
text-4xl font-bold (36px)
Heading 1
text-3xl font-bold (30px)
Heading 2
text-2xl font-bold (24px)
Heading 3
text-xl font-semibold (20px)
Heading 4
text-lg font-semibold (18px)
Heading 5
Body Text
text-lg (18px) - Lead text
The quick brown fox jumps over the lazy dog. This is lead text used for introductory paragraphs and important content.
text-base (16px) - Body text
The quick brown fox jumps over the lazy dog. This is standard body text used for most content throughout the application.
text-sm (14px) - Small text
The quick brown fox jumps over the lazy dog. This is small text used for captions, labels, and secondary information.
text-xs (12px) - Fine print
The quick brown fox jumps over the lazy dog. This is fine print used for timestamps, metadata, and tertiary information.
Code & Monospace
Monospace font for code snippets and technical content
SUBROUTINE VALIDATE.AMOUNT(AMT, STATUS)Logo Usage
Clear space, minimum sizes, and color variations
Light Background
Dark Background
Minimum Size: 32px height for digital, 0.5 inch for print
Need More?
For detailed design specifications, component guidelines, and additional resources, check our documentation.