Cloudline™

General Aviation Maintenance Software

  • Brand Identity
  • Design System
  • Web Design
  • UX/UI Design
  • AI-Assisted Build Direction

Brand and design system; marketing site implemented from my specifications via AI-assisted build

Visit the live site ↗

Problem

General aviation maintenance shops lose most of an inspection day before a wrench turns. Someone has to read the aircraft’s logbooks, chase every applicable AD and SB, find the right part numbers, and write the return-to-service entry — roughly five hours of research admin per aircraft.

Cloudline was built by the team that ran and engineered FlightAware to collapse that work to under an hour. The software had to communicate two things at once to a sceptical, safety-critical audience: that it reads the records thoroughly and cites every claim to its source page, and that it never makes the airworthiness call — that stays with the certified A&P. The brand had to feel like instrumentation, not a startup.

Solution & Impact

I developed the brand and design system: a “Sky” blue scale anchored on Sky Deep for authority and dark surfaces, a Storm green as the secondary brand and action colour, DM Sans paired with IBM Plex Mono for the technical register, and Phosphor Icons throughout. The system ships as Tailwind-compatible tokens so it can be applied consistently across the marketing site and the product surfaces — Logbook and Relay.

The design work centred on the trust boundary. Every layout decision reinforces “software reports facts, mechanics make the call”: cited sources shown inline, status framed as a determination rather than a verdict, and a visual hierarchy that puts the mechanic’s judgment above the machine’s output.

The marketing site was then built directly from that system — implemented via an AI-assisted build working from the tokens, type scale, and component specs rather than from hand-authored markup. The design system was the deliverable; the site is what it produced. Working this way is why the guide was written as Tailwind-compatible tokens in the first place: a system precise enough to be executed without me in the loop is a system that holds up when a developer, or a model, builds against it.

The style guide, running live

Colour

  • #1D3A5C
    sky deep1.0:1 on ground · fills and rules only
  • #3878C2
    sky2.6:1 on ground · fills and rules only
  • #5B98D8
    sky light3.8:1 on ground · fills and rules only
  • #B0C8E4
    sky pale6.7:1 on ground
  • #216869
    storm1.8:1 on ground · fills and rules only
  • #1A5254
    storm hover1.3:1 on ground · fills and rules only
  • #7C9E99
    sea nymph4.0:1 on ground · fills and rules only
  • #22C55E
    green5.1:1 on ground

Type

Display
DM SansHeadings, navigation, buttons
Mono
IBM Plex MonoTokens, data, flight identifiers

Build

Icons
Phosphor Icons
Stack
Static HTML + Tailwind-compatible tokens
Mark
C for Cloudline, wrapping a compass: the aircraft sits on the dial with the mark at the top, pointed in the right direction. The gradient runs Sky Deep to Storm — the two brand colours that bracket the whole token ramp.
The Cloudline mark: a letter C wrapping a circular compass, with a light aircraft seen head-on inside it and a tick at the top of the dial, filled with a gradient running from Sky Deep navy to Storm teal
Primary
The same Cloudline mark reversed out in white for use on the brand's dark grounds
Reversed

Rendered from this project's frontmatter, not pasted from a guide — the swatches, contrast ratios and type pairing above are the same values the rest of the page uses.