Design System
Colours & Fonts
The CockpitConnect brand identity — primary colours, typography, and usage guidelines for all project documentation and UI.
Brand Identity
Colour Palette
#52ABE3
Primary Blue
#52abe3
Buttons, links, accents, section labels
#312F30
Dark Charcoal
#312f30
Body text and headings on light backgrounds
#FFFFFF
White
#ffffff
Text and content on dark backgrounds
#F5F4F4
Light Background
#f5f4f4
Page background in light mode
Usage Rules
Heading text in charcoal
Section label in primary
Body text in charcoal on a light surface.
Light mode — primary #52abe3 + text #312f30
Heading text in white
Section label in primary
Body text in white on a dark surface.
Dark mode — primary #52abe3 + text #ffffff
Typography
Typefaces
Display / Headings
Barlow Condensed
800 ExtraBold — Page titles, hero headings
700 Bold — Section headings, card titles
600 SemiBold — Nav items, labels, buttons
400 Regular — Subheadings, captions
Google Fonts:
Barlow+Condensed:wght@400;600;700;800Body / Prose
DM Sans
500 Medium — UI labels, metadata
400 Regular — Body copy, descriptions
300 Light — Long-form prose, captions
Google Fonts:
DM+Sans:wght@300;400;500Type Scale
Build Your Dream Cockpit
Featured Projects
Boeing 737 MAX
In-depth documentation for building realistic home flight simulator cockpits.
MobiFlight integration, backlit encoders and switch panels wired to SimConnect.
Cockpit Builds
Started January 2024 · MSFS 2024
Spacing & Shape
Design Tokens
Border Radius
Small (sm)
4px — Buttons, chips, badges
Large (lg)
10px — Cards, dialogs, dropdowns
X-Large
16px — Hero elements, modals
Key Spacing
4px
4px / 1 unit — Icon gaps, tight padding
8px
8px / 2 units — Chip gaps, small items
16px
16px / 4 units — Card padding, list spacing
24px
24px / 6 units — Section inner spacing
48px
48px / 12 units — Section vertical padding
96px
96px / 24 units — Large section gaps