Logo & Branding
Official PilotLight logo usage guidelines for light and dark themes
Primary Logo (Landscape)
Light Background
PRIMARY USE
Use this version on white or light-colored backgrounds. Maintains full brand color integrity.
Dark Background
DARK MODE
Use this reverse version on dark or Shadow Grey backgrounds for optimal contrast.
Stacked Logo (Vertical)
Stacked - Light
Ideal for social media profiles, app icons, and square/vertical layouts on light backgrounds.
Stacked - Dark
Reverse stacked version for dark themed interfaces and vertical layouts.
Usage Guidelines
✓
Do's
Use adequate clear space around logo
•
Maintain original proportions
•
Use approved color versions
•
Choose appropriate version for background
•
✗
Don'ts
Don't stretch or distort the logo
•
Don't change brand colors
•
Don't add effects or shadows
•
Don't rotate or flip the logo
•
◎
Clear Space
Minimum 24px padding on all sides
•
Keep logo legible at all sizes
•
Minimum width: 120px for web
•
Ensure proper contrast ratio
•
Typography Scale
Golden Ratio scale (1.309) with 16px base size
H1
Space Mono Bold
Uppercase
61.50px
Heading 1
H2
Space Mono Bold
Uppercase
46.99px
Heading 2
H3
Space Mono Bold
Uppercase
35.89px
Heading 3
H4
Space Mono Bold
Uppercase
27.42px
Heading 4
H5
Space Mono Bold
20.94px
Heading 5
Body
Inter Regular
16.00px
Paragraph
Small
Inter Regular
12.22px
Paragraph Small
Color Palette
5 core brand colors with exact HEX specifications
Racing Red
#FA2424
Primary
Primary CTA, Brand Identity
Yellow
#CBE010
Secondary
Highlights, Secondary Actions
Shadow Grey
#242834
Neutral
Main Text, Dark Backgrounds
Medium Slate Blue
#7D53FF
Accent
Accents, Interactive Elements
Neon Ice
#00FFE5
Accent
Accents, Status Indicators
Surface & Background
White Surface
#FFFFFF
Primary background for content areas
Light Surface
#F0F1F3
2% opacity tint of Shadow Grey - for subtle backgrounds
Racing Red Shades
#FD8A8A
Light
#FC5757
Medium Light
#FA2424
Base
#C71D1D
Medium Dark
#941616
Dark
Gray Shades
#E8E9EB
Light
#9A9DA5
Medium Light
#565A66
Medium
#242834
Base (Shadow Grey)
#16181F
Dark
Color Combinations
High Energy
Racing Red + White Text
Tech Modern
Shadow Grey + Neon Ice
Vibrant Accent
Slate Blue + White Text
UI Component Kit
Button states, sizes, and gradient styles with 8px radius standard
Button Sizes
Small Button
Medium Button
Large Button
Gradient Button Styles
Racing Red Gradient
Small
Medium
Large
Slate Blue to Neon Ice
Small
Medium
Large
Neon Ice Gradient
Small
Medium
Large
Yellow to Racing Red
Small
Medium
Large
Shadow Grey to Slate Blue
Small
Medium
Large
Radial Gradient (Red + Ice)
Small
Medium
Large
Button States
Primary (Racing Red)
Default State
Hover State
Active State
Disabled State
Alternate (Neon Ice)
Hover State
Default State
Outline Variant
Default State
Hover State
Form Components
Comprehensive form UI kit with interaction states and accessibility
Text Inputs
Full Name
Enter your full name
Hover: Slate Blue • Focus: Slate Blue • Active: Slate Blue
Email Address
you@example.com
Password
Click icon to toggle visibility
Enter your password
Search
Search for components...
Select Dropdown
Select Category
Multi-Select Tags
Select Skills
Design
Development
Design
Development
Marketing
Sales
Support
Product
Click tags to add/remove • Medium Slate Blue (#7D53FF) for selected
Checkboxes
I agree to the terms and conditions
Send me promotional emails
Subscribe to newsletter
Radio Buttons
Choose Plan
Basic
$9/month
Pro
$29/month
Enterprise
$99/month
Toggle Switch
Enable notifications
Active (Slate Blue variant)
Complete Form Example
Create Account
Full Name *
John Doe
Email *
john@example.com
I agree to the Terms of Service and Privacy Policy
Create Account
Spacing System
8pt grid system for consistent spacing and layout rhythm
--spacing-1
8px
--spacing-2
16px
--spacing-3
24px
--spacing-4
32px
--spacing-5
40px
--spacing-6
48px
--spacing-7
56px
--spacing-8
64px
Spacing in Practice
Card Padding
24px padding on all sides
Use spacing-3 (24px) for standard card padding
Section Spacing
Use spacing-6 (48px) or spacing-8 (64px) between sections
8pt Grid Foundation
All spacing values are multiples of 8px
This creates a consistent, harmonious layout system across all components
Design Tokens
CSS custom properties for consistent theming
:root {
/* Typography Scale - Golden Ratio (1.309) */
--text-h1: 61.50px;
--text-h2: 46.99px;
--text-h3: 35.89px;
--text-h4: 27.42px;
--text-h5: 20.94px;
--text-base: 16px;
/* Colors */
--racing-red: #FA2424;
--yellow: #CBE010;
--shadow-grey: #242834;
--medium-slate-blue: #7D53FF;
--neon-ice: #00FFE5;
/* Spacing (8pt Grid) */
--spacing-1: 8px;
--spacing-2: 16px;
--spacing-3: 24px;
--spacing-4: 32px;
/* Component Tokens */
--button-radius: 8px;
}