Design System Inspired by Elevar
1. Visual Theme & Atmosphere
Elevar's design system embodies modern professional consulting through a sophisticated blend of deep navy and vibrant blue accents, creating an atmosphere of trust, innovation, and strategic excellence. The visual language combines minimalist restraint with bold, purposeful color—navy backgrounds provide a calming, authoritative foundation while electric blue punctuates key interactions and achievements. Generous whitespace and refined typography communicate clarity and expertise, while carefully rounded corners (14px–28px) soften the technical precision. The overall mood is confident yet approachable, corporate yet creative—ideal for business consultants, agencies, and strategic advisors who need to demonstrate both professionalism and forward-thinking vision.
Key Characteristics
- Deep navy (
#03151A, #0B1421) as primary background foundation
- Electric blue (
#0000EE, #0099FF) as the signature interactive accent
- Light, airy neutrals (
#FFFFFF, #F5F5F5) for content surfaces and contrast
- Generous spacing (16px–100px) creating premium breathing room
- Rounded imagery and containers (14px–28px radius) softening geometric precision
- Plus Jakarta Sans for display hierarchy; Satoshi for body content
- Subtle, purposeful elevation through container backgrounds rather than shadows
- Accessibility-first: high contrast between navy, white, and electric blue
2. Color Palette & Roles
Primary
- Navy Primary (
#03151A): Primary background for headers, hero sections, and authority-driven containers
- Deep Navy (
#0B1421): Secondary dark background for alternating sections, slightly lighter than Navy Primary
- Navy Accent (
#284783): Tertiary dark tone for borders, subtle overlays, and depth differentiation
Accent Colors
- Electric Blue (
#0000EE): Signature interaction color; used for links, primary CTAs, and focal points (62 uses—dominant accent)
- Bright Cyan (
#0099FF): Secondary accent for highlights, active states, and supplementary interactive elements
- Soft Blue (
#628DE3): Tertiary blue for softer backgrounds, icon tints, and lower-emphasis secondary elements
Interactive
- Link Blue (
#0000EE): Default link color; underline blue for navigation and text links
- Success Green (
#59D444): Positive feedback, success states, and validation messaging
- Error Red (
#ED4046): Primary error state, warnings, and destructive actions
- Danger Red (
#FF2244): Secondary error indicator for high-priority alerts
Neutral Scale
- Black (
#000000): Primary text on light backgrounds, dominant text color (804 uses)
- Near-Black (
#0D0D0D): Secondary text, reduced-emphasis typography (165 uses)
- Almost Black (
#0A0A0A): Tertiary text and subtle UI elements
- White (
#FFFFFF): Primary text on dark backgrounds, highest contrast (97 uses)
- Off-White (
#F5F5F5): Light surface backgrounds, soft containers
- Light Gray (
#F2F2F2): Subtle background alternation for rhythm
- Light Blue-Gray (
#E9EFFB): Soft blue tint for feature cards and highlights
- Warm Gray (
#E8E8E8): Borders, dividers, and subtle separators
Surface & Borders
- Card Background Light (
#F5F5F5): Default card and container fill
- Card Background Warm (
#E9EFFB): Blue-tinted card backgrounds for statistics and features
- Border Neutral (
#E8E8E8): Default border color for cards, inputs, and separators
- Overlay Slight (
#FFFC / 0.1 opacity): Subtle overlay for depth without obscuring
- Overlay Medium (
#FFF3 / 0.2 opacity): Moderate overlay for modal backgrounds and scrim
3. Typography Rules
Font Family
- Primary Display Font: Plus Jakarta Sans (sans-serif stack:
"Plus Jakarta Sans", system-ui, -apple-system, sans-serif)
- Secondary Body Font: Satoshi (sans-serif stack:
"Satoshi", system-ui, -apple-system, sans-serif)
- Fallback Link Font: sans-serif system stack
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|
| Display / Hero | Plus Jakarta Sans | 60px | 500 | 66px | 0px | Page-level headlines, major hero text |
| Heading 1 | Plus Jakarta Sans | 48px | 600 | 57.6px | 0px | Section headlines, feature titles |
| Heading 2 | Plus Jakarta Sans | 32px | 600 | 41.6px | 0px | Subsection headings, card titles |
| Heading 3 | Plus Jakarta Sans | 24px | 600 | 33.6px | 0px | Feature highlights, stat labels |
| Heading 4 (Satoshi) | Satoshi | 24px | 700 | 33.6px | 0px | Bold emphasis, icon labels |
| Subheading | Satoshi | 20px | 400 | 28px | 0px | Section subheadings, bylines |
| Body | Satoshi | 17px | 400 | 23.8px | 0px | Primary body text, descriptions |
| Link / Navigation | sans-serif | 12px | 400 | normal | 0px | Navigation menu items, small links |
Principles
- Use Plus Jakarta Sans for all display and heading hierarchy to establish authority and scale
- Apply Satoshi for body content to improve readability and warmth
- Maintain 1.4–1.6 line height ratio for optimal reading on screens
- Reserve weight 700 for emphasis within body text only; use 600 for headings
- Links default to Electric Blue (
#0000EE) at 12px, sans-serif weight 400
- Increase font size by 8–16px per heading level to create clear visual distinction
- Avoid custom letter spacing; use system defaults for consistency
4. Component Stylings
Buttons
Primary Button
- Background:
#0000EE
- Text Color:
#FFFFFF
- Font: Satoshi, 17px, weight 600
- Padding:
16px 32px
- Border Radius:
28px
- Border: none
- Hover State: Background
#0099FF, cursor pointer
- Active State: Background
#284783
- Box Shadow: none
Secondary Button
- Background: transparent
- Text Color:
#0000EE
- Font: Satoshi, 17px, weight 600
- Padding:
16px 32px
- Border Radius:
28px
- Border:
2px solid #0000EE
- Hover State: Background
#E9EFFB, border #0099FF
- Active State: Border
#284783
- Box Shadow: none
Ghost Button
- Background: transparent
- Text Color:
#000000
- Font: Satoshi, 17px, weight 400
- Padding:
16px 24px
- Border Radius:
14px
- Border: none
- Hover State: Background
#F5F5F5
- Active State: Background
#E8E8E8
- Box Shadow: none
Cards & Containers
Standard Card
- Background:
#F5F5F5
- Border: none
- Border Radius:
14px
- Padding:
32px
- Text Color:
#000000
- Box Shadow: none
Feature Card (Blue Tint)
- Background:
#E9EFFB
- Border: none
- Border Radius:
14px
- Padding:
32px
- Text Color:
#000000
- Icon Background:
#628DE3 (soft blue), size 48px × 48px, radius 12px
- Box Shadow: none
Hero Container
- Background:
#03151A
- Padding:
60px 100px
- Border Radius: 0px
- Text Color:
#FFFFFF
- Box Shadow: none
Image Container (Large)
- Border Radius:
28px
- Overflow: hidden
- Box Shadow: none
Image Container (Small)
- Border Radius:
14px
- Overflow: hidden
- Box Shadow: none
Inputs & Forms
Text Input
- Background:
#FFFFFF
- Border:
1px solid #E8E8E8
- Border Radius:
12px
- Padding:
12px 16px
- Font: Satoshi, 17px, weight 400
- Text Color:
#000000
- Placeholder Color:
#0D0D0D (60% opacity)
- Focus State: Border
2px solid #0000EE, background #FFFFFF
- Error State: Border
2px solid #ED4046
Label
- Font: Satoshi, 20px, weight 400
- Color:
#000000
- Margin Bottom:
8px
Helper Text
- Font: Satoshi, 12px, weight 400
- Color:
#0D0D0D
- Margin Top:
4px
Navigation
Main Navigation Bar
- Background: rgba(0, 0, 0, 0) (transparent)
- Height:
78px
- Padding:
16px 60px
- Width: 100% (or max
1440px)
- Border: none
- Box Shadow: none
Nav Link
- Font: sans-serif, 12px, weight 400
- Color:
#000000
- Padding:
0px
- Text Decoration: none
- Hover State: Color
#0000EE
Nav Link (Active)
- Color:
#0000EE
- Border Bottom:
2px solid #0000EE
Logo
- Height: auto
- Color:
#000000
- Font Weight: 600
- Hover State: Opacity 0.8
Badges
Success Badge
- Background:
#59D444 (20% opacity)
- Text Color:
#59D444
- Font: Satoshi, 12px, weight 600
- Padding:
6px 12px
- Border Radius:
6px
- Border: none
Error Badge
- Background:
#ED4046 (20% opacity)
- Text Color:
#ED4046
- Font: Satoshi, 12px, weight 600
- Padding:
6px 12px
- Border Radius:
6px
- Border: none
Info Badge
- Background:
#628DE3 (20% opacity)
- Text Color:
#628DE3
- Font: Satoshi, 12px, weight 600
- Padding:
6px 12px
- Border Radius:
6px
- Border: none
5. Layout Principles
Spacing System
Elevar uses an 8px base unit system, scaling in increments of 4px, 8px, 12px, 16px, 20px, 24px, 32px, 44px, 52px, 60px, 72px, and 100px. Small gaps (8px–16px) separate inline elements; medium gaps (24px–32px) create breathing room between cards and sections; large gaps (52px–100px) establish major section divisions. Container padding defaults to 60px–100px horizontally on desktop, with sections spaced 52px–72px apart vertically.
Grid & Container
- Max Width: 1440px for full-width layouts
- Sidebar Width: N/A (single column primary)
- Column Strategy: Full-width hero sections; centered content containers with max-width 1200px for text-heavy sections
- Gutter / Gap: 24px–32px between card grids
- Container Padding: 60px–100px horizontal on desktop; 16px–24px on mobile
- Section Pattern: Hero section full-bleed → Content section centered max-width 1200px → Feature grid 3 columns (or 2 / 1 responsive) → Call-to-action section full-bleed
Whitespace Philosophy
Abundant whitespace is a core principle. Sections breathe with 52px–72px vertical gaps; cards are not crammed. Padding inside containers is generous (32px minimum for cards). This reinforces premium positioning and reduces cognitive load, aligning with Elevar's consultancy-focused brand.
Border Radius Scale
- Minimal Radius: 0px (navigation bar, full-width hero sections)
- Small Radius: 6px (badges, small form elements)
- Medium Radius: 12px (form inputs, icon backgrounds, small containers)
- Large Radius: 14px (standard cards, standard image containers)
- Extra-Large Radius: 28px (feature image containers, large media blocks)
6. Depth & Elevation
| Level | Treatment | Use |
|---|
| Flat (Level 0) | Background: solid color; border: none; box-shadow: none | Navigation, hero backgrounds, body text areas |
| Raised (Level 1) | Background: light neutral (#F5F5F5); border: none; box-shadow: none | Standard cards, soft feature cards |
| Elevated (Level 2) | Background: light blue (#E9EFFB); border: none; box-shadow: none | Premium feature cards, highlighted statistics |
| Overlay (Level 3) | Background: rgba(0, 0, 0, 0.2) or rgba(255, 255, 255, 0.15); border: none; box-shadow: none | Modals, image overlays, scrim layers |
Shadow Philosophy
Elevar eschews traditional drop shadows in favor of subtle background color shifts and border treatments. Depth is conveyed through layered backgrounds (navy → light gray → white) and accent colors, not shadow blur. This maintains a clean, modern aesthetic while ensuring all text remains highly legible. When elevation is needed, shift the background color to a warmer or more saturated tone rather than adding blur.
7. Do's and Don'ts
Do
- Use Electric Blue (
#0000EE) for all primary CTAs—it's the signature brand color and commands attention
- Maintain Navy (
#03151A) as the dominant background for hero and authority-driven sections
- Apply Plus Jakarta Sans exclusively for headings (24px and above) to establish visual hierarchy and brand recognition
- Pair navy backgrounds with white text for maximum contrast; use black text on light backgrounds
- Space sections with 52px–72px vertical gaps; never crowd content vertically
- Round images and containers consistently at 14px or 28px; avoid arbitrary radius values
- Use
#F5F5F5 for standard card backgrounds and #E9EFFB for premium / highlighted cards
- Default link color to Electric Blue (
#0000EE) and add underline on hover for accessibility
- Ensure all interactive elements (buttons, links) are at least 44px × 44px for touch targets on mobile
- Use Satoshi for all body copy and inputs—its warmth and readability enhance professional messaging
Don't
- Avoid applying shadows; use background color shifts or borders instead for depth
- Don't mix navy backgrounds with navy text; maintain minimum contrast ratios (4.5:1 for text)
- Never use the secondary red (
#FF2244) for general errors; reserve it for critical destructive actions only
- Don't decrease border radius below 14px for cards or containers; preserve the premium rounded aesthetic
- Avoid overcrowding horizontal layouts; maintain minimum 24px gap between card elements
- Don't apply custom letter spacing—rely on font weights and sizing for emphasis
- Never use gray text (
#0D0D0D) as a primary heading color; reserve it for secondary or helper text only
- Don't nest more than three levels of hierarchy without a visual break (whitespace, color shift, border)
- Avoid vibrant colors outside the Electric Blue / Navy palette unless used for error states or success states
- Never use stretched images; always maintain aspect ratio with 14px–28px container border radius
8. Responsive Behavior
Breakpoints
| Breakpoint Name | Width | Key Changes |
|---|
| Mobile | 320px–479px | Single column layout; padding 16px; font size reduced 10% for body; spacing reduced 25%; hero padding 24px 16px; button full-width; navigation stacked |
| Tablet | 480px–767px | 2-column grid; padding 24px; hero padding 40px 24px; navigation horizontal with compact menu; cards stack or 2 per row |
| Desktop | 768px–1440px | 3-column grid; padding 60px; full navigation with spacing 16px between links; cards full 3-column layout |
| Large Desktop | 1440px+ | Max-width container 1440px; padding 100px horizontal; unchanged typography |
Touch Targets
- Minimum interactive element size: 44px × 44px on touch devices (mobile / tablet)
- Button padding:
12px 24px minimum for mobile; 16px 32px on desktop
- Link underline thickness: 2px for visibility on touch
- Navigation link spacing: 16px horizontal gap on mobile; 24px on desktop
- Form input height: 44px minimum on mobile
- Icon size: 24px minimum for standalone icons; 32px–48px for large feature icons
Collapsing Strategy
- Hero Section: Full-bleed on all breakpoints; text size reduces at mobile (h1 from 60px → 40px; h2 from 48px → 32px)
- Navigation: Horizontal menu at tablet+; hamburger collapse below 480px (not specified; infer from standard patterns)
- Cards: 1 column on mobile, 2 on tablet, 3 on desktop; grid gap reduces to 16px on mobile, 24px on tablet
- Padding: Outer container padding 16px mobile → 24px tablet → 60px desktop
- Image Containers: Full-width at mobile; max-width 100% with aspect ratio lock; radius preserved at all sizes
- Feature Grid: Stack vertically on mobile; 2 columns on tablet; 3 columns on desktop
- Whitespace: Vertical gaps reduce 25% on mobile (e.g., 72px → 52px); section padding halved on mobile
- Button Width: Full-width on mobile (
width: 100%); inline (width: auto) on tablet+
- Typography: Font sizes remain consistent per hierarchy level; only base sizes scale (body 17px desktop → 15px tablet → 14px mobile)
9. Agent Prompt Guide
Quick Color Reference
- Primary CTA: Electric Blue (
#0000EE)
- Secondary CTA: Bright Cyan (
#0099FF)
- Hero Background: Navy Primary (
#03151A)
- Alternate Background: Deep Navy (
#0B1421)
- Card Background (Light): Off-White (
#F5F5F5)
- Card Background (Highlighted): Light Blue-Gray (
#E9EFFB)
- Body Text: Black (
#000000) on light; White (#FFFFFF) on dark
- Secondary Text: Near-Black (
#0D0D0D)
- Borders: Warm Gray (
#E8E8E8)
- Success: Green (
#59D444)
- Error: Primary Red (
#ED4046)
- Heading Text: Black (
#000000) or White (#FFFFFF) depending on background
Iteration Guide
- All headings (24px+): Use Plus Jakarta Sans, weight 600–700, increase size +8–16px per level
- All body copy: Use Satoshi, weight 400, 17px base with 23.8px line height
- All links: Color
#0000EE, font-size 12px, weight 400, underline on hover
- All buttons: Radius 28px, padding 16px 32px min, Electric Blue primary (
#0000EE), white text
- All cards: Radius 14px, padding 32px, background
#F5F5F5 or #E9EFFB for premium
- All images: Radius 14px (small) or 28px (large), no shadow, full-width max at mobile
- All containers: Max-width 1440px, padding 60px–100px horizontal on desktop, 16px–24px mobile
- All sections: Vertical gap 52px–72px desktop, 40px–52px mobile
- All interactive: Minimum 44px × 44px touch target, Electric Blue hover state
- All navs: Transparent background, 12px sans-serif, 78px height desktop, full-width or max 1440px
