Design system · v1.0

Clear by design.
Built for aviation.

The fly.ae interface is precise, compact and calm. It uses strong hierarchy, technical navy, generous white space and explicit status colours so every action stays easy to scan.

PreciseSecureEfficient

Figma UI Kit · node 160:1088 ↗

01 · Foundation

Brand and colour

Navy carries the brand and primary actions. Supporting colours are functional: green confirms, coral warns, and sky blue identifies structured aircraft content.

fly.ae

Primary lockup

Use the fly/infinity loop mark from the UI Kit. The legacy airplane mark is not part of the product. Keep clear space equal to the height of the “f”.

Flight navy--color-ink#101A3A

Brand, primary actions, navigation

Sky blue--color-sky#258FE0

Category cards and selected states

Signal green--color-success#35C63F

Completed and successful states

Alert coral--color-danger#E34C61

Required, error and destructive states

Cloud--color-canvas#F4F6FA

Page and grouped-content background

Steel--color-muted#6F7A91

Secondary copy and metadata

02 · Typography

Condensed and direct

Use a condensed sans-serif voice with tight display tracking and comfortable body copy. Sentence case keeps technical screens human.

Display · 56/56Aircraft records

Heading 1 · 40/44Share documentation

Heading 2 · 32/36Technical specification

Body · 16/24

Text PDF aviation documents up to 100 MB.

Caption · 12/16

UPDATED 24 JUL 2026 · 4 FILES

03 · Layout

Four-pixel rhythm

Compose screens on a four-pixel base. Use compact radii for controls and larger values only for grouped surfaces and dialogs.

044 px

088 px

1212 px

1616 px

2424 px

3232 px

4848 px

6464 px

6 px

Controls

10 px

Surfaces

14 px

Dialogs

04 · Components

Controls and states

Actions are rectangular and compact. Every state is visible without relying on motion alone.

Buttons

44 px height

Form fields

Label + explicit state

Aircraft *Serial numberMSN *Enter a valid manufacturer serial number.

Information

The share link remains active until the document is deleted.

Verification required

Upload only materials related to aviation components.

Upload complete

The approved PDF is ready to share.

05 · Patterns

Product building blocks

Navigation, identity and content cards share the same scale, colour hierarchy and clear action language.

fly.aeAK

Aircraft⋮

737-800

4 documents

Category card

Use colour to orient, not decorate.

Pair a short category, a clear identifier and one metadata line.