Brand Identity
Logo
PRIMARY LOGO
WITH TAGLINE
MINIMUM SIZE
Design Principles
Tactical Precision
Sharp, angular design language
High Contrast
Dark backgrounds with vibrant accents
Technical Aesthetic
Monospace typography, grid layouts
Performance First
Lightweight, optimized components
Color System
Primary Colors
Primary
Hover
Active
Light
Dark
Neutral Colors
Black
Neutral 950
Neutral 900
Neutral 800
Neutral 700
Neutral 600
Neutral 500
Neutral 400
Neutral 300
White
Status Colors
Success
Warning
Error
Info
Typography
Font Families
SANS SERIF
Geist Sans - The quick brown fox jumps over the lazy dog
MONOSPACE
Geist Mono - The quick brown fox jumps over the lazy dog
Type Scale
text-6xl / 60px
Display Heading
text-5xl / 48px
Page Heading
text-4xl / 36px
Section Heading
text-3xl / 30px
Subsection Heading
text-2xl / 24px
Card Heading
text-xl / 20px
Label Heading
text-lg / 18px
Large body text for emphasis
text-base / 16px
Default body text size for regular content
text-sm / 14px
Small text for secondary information
text-xs / 12px
Caption text and labels
Font Weights
font-normal (400) - Regular body text
font-medium (500) - Emphasis text
font-semibold (600) - Subheadings
font-bold (700) - Headings
font-extrabold (800) - Display text
Spacing System
Base Unit: 8px
Common Patterns
Padding
p-section: py-16 px-6p-card: p-6 md:p-8p-button: px-6 py-3Stacks
stack-sm: space-y-2stack-md: space-y-4stack-lg: space-y-8Layout Grid
Container
max-width: 1280px
mx-auto px-6 md:px-8
Breakpoints
Grid Examples
12 Column Grid
Sidebar Layout
Form Elements
Input Fields
This field contains an error
Select Dropdown
Textarea
Cards
Card Variants
Default Card
Standard card with neutral background and border.
Tactical Card
Highlighted card with orange border accent.
Elevated Card
Card with shadow for depth effect.
Outlined Card
Card with prominent border styling.
Interactive Cards
Glow on Hover
Adds orange glow effect.
Lift on Hover
Elevates with shadow.
Border on Hover
Highlights border color.
Modals
Modal Example
Modal Title
This is a modal dialog example. Modals are used for important interactions that require user attention.
Modal Sizes
Status Indicators
Status Types
Alert Messages
Success
Operation completed successfully.
Warning
Please review before proceeding.
Error
An error occurred during the operation.
Information
Additional information about this process.
Icons
Icon Library
Using Lucide React icons with 2px stroke width
Icon Sizes
16px
20px
24px
32px
48px
Animations
Animation Examples
Pulse
Spin
Bounce