Color · Fly.io Brand Guidelines

Logo Colors

The four fills in the balloon & wordmark. Use them for illustration & accents, not for long runs of text.

Wordmark & outlineslogo-ink#24175Boklch(27.1% 0.115 284.5)
Balloon gradient, startlogo-indigo#5046E4oklch(51.0% 0.229 277.4)
Balloon gradient, middlelogo-violet#996BECoklch(63.5% 0.188 297.2)
Balloon gradient, endlogo-lilac#BA7BF0oklch(69.5% 0.175 307.3)

Core Colors

Signature dark#281950oklch(26.8% 0.096 291.1)
Deepest background#171434oklch(21.5% 0.061 284.3)
Cool highlight#C9DFFDoklch(89.7% 0.048 256.2)
Field behind the lone balloon#AD80EFoklch(69.0% 0.163 300.9)

Scales

Tints & shades for UI. Tokens match Tailwind’s naming, so navy-900 here is bg-navy-900 in code.

navy

Primary text & dark surfaces.

violet

Accent: links, highlights & calls to action.

purple

Secondary accent, used sparingly.

gray

Cool neutrals for UI chrome, borders & muted text.

Status Colors

One hue per state. Click a swatch to copy its token.

success

emerald · done & healthy

info

blue · worth knowing

warning

amber · needs attention

error

red · something failed

Gradients

For surfaces & the occasional button, never for text. Stay inside one hue family, & check text contrast against both ends.

Balloon
logo-indigo → logo-violet → logo-lilacBrand moments: the logo, avatars, a single hero accent. Never behind text.
Text on Violet CTA
Violet CTA
purple-600 → transparent → indigo-600 over violet-600The marketing call to action. At most one per page.
Text on Violet Dark
Violet Dark
purple-800 → violet-800 → violet-900Dark promo blocks & feature panels with white text.
Text on Violet Pale
Violet Pale
purple-50 → violet-100 → indigo-200 at 50%Light panels & cards with navy text.
Pastel Sky
sky-300 → indigo-300 → pink-300Thin accent lines & dividers. At 10% opacity, a soft section wash. Matches the hero skies.
Text on Scrim
Scrim
navy-900 at 90% → 70% → 25%Under text on images & illustrations. Rises from the edge the text sits on.

Mesh Backgrounds

Pure CSS, layered radial gradients. Copy the CSS, or download the original image.

SectionLarge page sections behind navy textWebP
MachinesProduct sections, light & airyWebP
SupportHelp & support panelsWebP

Buttons

Buttons are flat with a soft inset shadow along the bottom edge, which is what makes them feel pressable. Only the marketing CTA gets a gradient.

Default · white, navy text, navy-200 inset
Primary · flat violet-600, violet-700 inset
Secondary · violet-100, violet-600 text
CTA · Violet CTA gradient, one per page
Translucent · white sheen, for dark & image backgrounds
Never · gradient on destructive or secondary buttons

Pairings

Text & background combinations that pass WCAG 2 AA for body text. Stay inside these & you won’t need a contrast checker.

AaThe quick brown fox deploys.
Body text on whitenavy-900 / white16.6:1 · AAA
AaThe quick brown fox deploys.
Button label on violetwhite / violet-6005.7:1 · AA
AaThe quick brown fox deploys.
Link on whiteviolet-700 / white7.1:1 · AAA
AaThe quick brown fox deploys.
Body text on peacoatnavy-100 / peacoat16.1:1 · AAA
AaThe quick brown fox deploys.
Link on peacoatviolet-400 / peacoat6.5:1 · AA
AaThe quick brown fox deploys.
Muted text on gray-50gray-500 / gray-504.9:1 · AA

In Code

Every color as a CSS custom property. The same names work as Tailwind v4 theme tokens.

brand.css

:root {
  --color-logo-ink: #24175B;
  --color-logo-indigo: #5046E4;
  --color-logo-violet: #996BEC;
  --color-logo-lilac: #BA7BF0;
  --color-navy: #281950;
  --color-peacoat: #171434;
  --color-droplet: #C9DFFD;
  --color-balloon-lilac: #AD80EF;
  --color-navy-50: #F9F9FD;
  --color-navy-100: #F4F3FB;
  --color-navy-200: #E7E6F4;
  --color-navy-300: #D4CEEA;
  --color-navy-400: #A39AC1;
  --color-navy-500: #756B93;
  --color-navy-600: #564C73;
  --color-navy-700: #42385F;
  --color-navy-800: #282045;
  --color-navy-900: #22183C;
  --color-navy-950: #191034;
  --color-violet-50: #F5F3FF;
  --color-violet-100: #EDE9FE;
  --color-violet-200: #DDD6FE;
  --color-violet-300: #C4B5FD;
  --color-violet-400: #A78BFA;
  --color-violet-500: #8B5CF6;
  --color-violet-600: #7C3AED;
  --color-violet-700: #6D28D9;
  --color-violet-800: #5B21B6;
  --color-violet-900: #4C1D95;
  --color-violet-950: #2E1065;
  --color-purple-50: #FAF5FF;
  --color-purple-100: #F6E7FF;
  --color-purple-200: #EDD4FE;
  --color-purple-300: #DFB2FC;
  --color-purple-400: #CA7FF8;
  --color-purple-500: #B54FF3;
  --color-purple-600: #A02BE4;
  --color-purple-700: #8919C9;
  --color-purple-800: #731CA5;
  --color-purple-900: #5D1985;
  --color-gray-50: #F8F9FC;
  --color-gray-100: #F1F2F9;
  --color-gray-200: #E1E4EF;
  --color-gray-300: #CCD0E0;
  --color-gray-400: #9698B6;
  --color-gray-500: #676B89;
  --color-gray-600: #4C4E67;
  --color-gray-700: #373953;
  --color-gray-800: #202237;
  --color-gray-900: #121226;
}

:root {
  --color-logo-ink: oklch(27.1% 0.115 284.5);
  --color-logo-indigo: oklch(51.0% 0.229 277.4);
  --color-logo-violet: oklch(63.5% 0.188 297.2);
  --color-logo-lilac: oklch(69.5% 0.175 307.3);
  --color-navy: oklch(26.8% 0.096 291.1);
  --color-peacoat: oklch(21.5% 0.061 284.3);
  --color-droplet: oklch(89.7% 0.048 256.2);
  --color-balloon-lilac: oklch(69.0% 0.163 300.9);
  --color-navy-50: oklch(98.3% 0.005 286.3);
  --color-navy-100: oklch(96.7% 0.011 292.0);
  --color-navy-200: oklch(93.0% 0.019 289.3);
  --color-navy-300: oklch(86.5% 0.039 295.4);
  --color-navy-400: oklch(70.7% 0.057 295.5);
  --color-navy-500: oklch(55.2% 0.062 295.8);
  --color-navy-600: oklch(44.3% 0.064 295.4);
  --color-navy-700: oklch(36.9% 0.067 294.7);
  --color-navy-800: oklch(27.3% 0.067 291.3);
  --color-navy-900: oklch(24.3% 0.067 293.6);
  --color-navy-950: oklch(20.9% 0.068 290.9);
  --color-violet-50: oklch(96.9% 0.016 293.8);
  --color-violet-100: oklch(94.3% 0.028 294.6);
  --color-violet-200: oklch(89.4% 0.055 293.3);
  --color-violet-300: oklch(81.1% 0.101 293.6);
  --color-violet-400: oklch(70.9% 0.159 293.5);
  --color-violet-500: oklch(60.6% 0.219 292.7);
  --color-violet-600: oklch(54.1% 0.247 293.0);
  --color-violet-700: oklch(49.1% 0.241 292.6);
  --color-violet-800: oklch(43.2% 0.211 292.8);
  --color-violet-900: oklch(38.0% 0.178 293.7);
  --color-violet-950: oklch(28.3% 0.135 291.1);
  --color-purple-50: oklch(97.7% 0.014 308.3);
  --color-purple-100: oklch(94.7% 0.036 313.1);
  --color-purple-200: oklch(90.3% 0.062 311.7);
  --color-purple-300: oklch(82.9% 0.112 311.7);
  --color-purple-400: oklch(72.2% 0.183 311.2);
  --color-purple-500: oklch(63.2% 0.239 309.7);
  --color-purple-600: oklch(56.3% 0.257 308.5);
  --color-purple-700: oklch(50.0% 0.241 307.8);
  --color-purple-800: oklch(44.2% 0.202 308.7);
  --color-purple-900: oklch(38.3% 0.168 308.8);
  --color-gray-50: oklch(98.2% 0.004 271.4);
  --color-gray-100: oklch(96.2% 0.009 279.7);
  --color-gray-200: oklch(92.0% 0.015 273.8);
  --color-gray-300: oklch(85.9% 0.023 274.7);
  --color-gray-400: oklch(68.8% 0.044 282.2);
  --color-gray-500: oklch(53.6% 0.047 278.7);
  --color-gray-600: oklch(43.2% 0.041 280.9);
  --color-gray-700: oklch(35.4% 0.045 280.4);
  --color-gray-800: oklch(26.1% 0.039 279.1);
  --color-gray-900: oklch(19.4% 0.040 282.0);
}

Also as JSON at /brand.json.

Logo Colors#

Core Colors#

Scales#