Jhankar Aviation Design System
Figma-ready design tokens · Component library · Brand guidelines · v1.0 · 2025
Colour System
Brand — Core palette
Aa
Sky Blue
#2970AC
Primary brand, CTAs, links
color.brand.primary
Cruise Blue
#1A5A99
Hover state
color.brand.primaryHover
Deep Navy
#003B6D
Headings, dark bg, bridge
color.brand.dark
Cloud White
#EBF4FF
Page bg, section alt
color.surface.cloud
Cloud Border
#C3DCF5
Card borders, dividers
color.surface.cloudBorder
Logo Silver
#8A9BB0
Muted text, metadata
color.text.muted
Medevac — Functional / status
Medevac Red
#C0392B
Emergency CTAs, critical
color.medevac.emergency
Emergency Bg
#fadbd8
Alert backgrounds
color.medevac.emergencyBg
Amber Alert
#E67E22
Standby / warning
color.medevac.amber
Amber Bg
#fdebd0
Warning backgrounds
color.medevac.amberBg
Cleared Green
#1A7A4A
Airborne, confirmed
color.medevac.cleared
Cleared Bg
#d4f0e3
Available backgrounds
color.medevac.clearedBg
Charter — Luxury palette
Champagne Gold
#C9A84C
Charter primary accent
color.charter.gold
Warm Gold
#D4B96A
Hover highlight
color.charter.goldLight
Midnight
#0A0F1E
Charter hero bg
color.charter.midnight
Slate
#141E2D
Dark card bg
color.charter.slate
Linen
#F5F0E8
Warm text on dark
color.charter.linen
Cashmere
#C8BCA8
Secondary on dark
color.charter.cashmere
Walnut
#7A7060
Muted on dark
color.charter.walnut
Typography
Plus Jakarta Sans
Display · Geometric Modern
--fdGoogle Fonts 300 · 400 · 500 · 600 · 700 · 800
Outfit
Body · UI · Interface text
--fu300 · 400 · 500 · 600 · 700
Space Mono
Numbers · Codes · Registrations · Stats
--fm400 · 700
Type scale — Plus Jakarta Sans display
heroAero52–68px · 800
4xlJhankar Aviation40–44px · 700
3xlAir Ambulance Services30–32px · 700
2xlICU-equipped aircraft, 24/722–24px · 600
xlBed-to-bed mission ownership18–20px · 600
lg leadEmergency air transport with zero handoff gaps across India and internationally.16px · 300
baseBody copy — readable, clinical, efficient. Our ops team, flight medics, and crew operate as one.13.5px · 400
smCaption / metadata / labels11.5px · 400
eyebrowJhankar Medevac · Air Ambulance10.5px · 700 · +0.16em
Spacing Scale
sp-1
4px
sp-2
8px
sp-3
12px
sp-4
16px
sp-6
24px
sp-8
32px
sp-10
40px
sp-12
48px
sp-16
64px
sp-20
80px
sec-Y
88px — section vertical padding
nav-H
62px — nav height
bar-H
36px — contact bar
maxW
1120px — max-width
Border Radius
none
0px
sm
4px
md
8px · buttons
lg
12px
xl
16px · cards
2xl
24px · panels
pill
999px · badges
Shadows
card
0 2px 24px rgba(0,40,90,0.07)
lift
0 12px 48px rgba(0,40,90,0.14) — hover
red · emergency
0 4px 22px rgba(192,57,43,0.45)
gold · charter
0 4px 16px rgba(201,168,76,0.35)
Motion & Animation
fadeUp
0 → translateY(20px) · .45s ease · page transitions
pulse
opacity 1 → 0.45 · 3s ease-in-out · SOS nav button
pulseRing
scale + opacity · 2.2s ease-out · float SOS FAB
gradShift
bg-position 0%→100%→0% · 14s ease infinite · hero mesh
Transition defaults
Micro-interaction
all .18s ease
Component state
all .22s ease
Page transition
.45s cubic-bezier
Sub-brand Architecture
Medevac
Clinical · Urgent · Trusted
Jhankar
Aviation
Elite Charter
Luxury · Private · Exclusive
Medevac rules

Sky blue + cloud white. Red for emergency status only. No gold. Clean, clinical, high-information density. Typography un-tracked, max legibility.

Charter rules

Midnight dark + gold accents. Linen/cashmere for warm text. Generous whitespace. Eyebrows tracked uppercase gold. Never use medevac red here.

Icon System — Functional Emoji Set
Jhankar uses a curated emoji-based icon set for maximum cross-platform compatibility. Each icon has a fixed semantic meaning.
🚨
Emergency SOS
🏥
Hospital / Medical
✈
Aircraft / Flight
🛩
Small Aircraft
🛡
DGCA / Certified
⚡
90-Min Dispatch
🕐
24/7 Available
👥
Integrated Team
🗺
Coverage / Network
🌍
International
📡
Ops Coordinator
🫀
ICU / Cardiac
👶
Neonatal
💼
Executive Charter
🏖
Leisure Charter
📞
Call / Phone
✉
Email
📍
Location / City
Buttons
Light surface
Dark surface
Pill variant (nav / contact bar)
Button tokens
Padding
11px 22px
Radius
8px
Font size
12.5px
Weight
700
Letter-spacing
.05em
Transform
uppercase
Transition
all .2s ease
Hover Y
translateY(-1px)
Badges & Status Indicators
Light surface
Airborne Standby Emergency Scheduled Confirmed — Charter DGCA Certified
Dark surface
Available Now On Mission Confirmed Maintenance
Live availability dots
Available Now
On Mission
Unavailable
Form Inputs
Medevac form — light surface
Charter form — dark surface
Cards
Air Ambulance · VT-JHK
Flight AX-0421Airborne
RouteDelhi → Mumbai
AircraftBeechcraft B200
ConfigICU · Ventilator
Private Charter
Mumbai → GoaConfirmed
AircraftKing Air 350
Passengers6 pax
Departure14 Apr, 09:00
Live Fleet Availability Component
VT-JHK
Beechcraft B200 · Delhi Hub · ICU
Available · ~80 min
VT-JHL
Beechcraft B200 · Mumbai Hub · ICU + Neonatal
Available · ~90 min
VT-JHM
King Air C90A · Bengaluru · On mission
Delhi → Chennai · ETA 15:40
VT-JHN
King Air C90A · Hyderabad Hub · ICU
Available · ~95 min
How to Import into Figma
The design tokens JSON file uses the Tokens Studio for Figma format — the industry-standard plugin for token-driven design in Figma.
1
Install Tokens Studio plugin
In Figma, go to Plugins → Browse plugins in community → search "Tokens Studio for Figma" → Install. This is free and widely used.
figma.com/community/plugin/843461159747178978
2
Load the tokens file
Open Tokens Studio → click the "Load from file" option (or paste JSON) → select jhankar_design_tokens.json. All tokens will appear in three groups: global, component, and semantic.
3
Apply tokens to your frames
Select any layer in Figma → in Tokens Studio sidebar, click any colour/typography/spacing token to apply it. Use "Apply all" to push tokens to matching Figma variables automatically.
4
Add Google Fonts
In Figma, use the font picker to search for and install the three typefaces. Figma supports Google Fonts natively — no plugin needed.
Plus Jakarta Sans · Outfit · Space Mono
5
Set up colour styles from tokens
In Tokens Studio, use "Create Styles" to auto-generate Figma colour styles from all token values. This gives you a full shared styles palette matching the design system exactly.
6
Token naming convention
Tokens follow a three-level semantic naming structure for easy Figma variable mapping:
global.color.brand.primary → #2970AC component.button.emergency.bg → #C0392B semantic.color.pageBg → #f0f6ff
Files in this package
📄
jhankar_design_tokens.json
Tokens Studio import · 180+ tokens
🎨
jhankar_design_system.html
This visual reference guide