Brand colors
Cirruscope is built on one colour: a sleek cobalt blue. Everything else in the palette exists to hold it up. These are the canonical values for the app, the website, the icon, and anything else carrying the name.
The brand base
One hex code is the source of truth. Use it wherever a single brand colour is called for and derive the rest from it.
Cobalt
- Hex
- #3D7BFF
- sRGB
- 61, 123, 255
- Float
- 0.239 0.482 1.000
Always author in sRGB. In an Xcode asset catalog, set the colour space explicitly rather than leaving it on the deployment-target default — otherwise the app and the website drift apart on wide-gamut displays.
Accent color for the asset catalog
The base is a touch light for text on white, so the accent shifts per appearance. Define a single AccentColor asset with two appearances and paste these in.
Cobalt Deep
- Hex
- #2E6AF0
- sRGB
- 46, 106, 240
- Float
- 0.180 0.416 0.941
Cobalt Lift
- Hex
- #5A8DFF
- sRGB
- 90, 141, 255
- Float
- 0.353 0.553 1.000
Both clear WCAG AA for normal text against the background they run on, which the unmodified base does not:
Cobalt Lift is the same value the website uses for link and control hover states, so in-app accents and web hovers stay in step.
The app icon
The icon face is a vertical gradient rather than a flat fill — flat cobalt goes muddy at small sizes, while the gradient keeps an edge at 32 pt.
Gradient stops — top #4A86FF · bottom #2A5BD0, 180°. The same pair drives the primary buttons on the website, so the icon and the download button read as one family.
Don't hand-author icon variants. On macOS 26 you supply one layered artwork to Icon Composer and it derives the light, dark, clear, and tinted appearances for you. Drawing your own dark-mode icon fights the system and dates quickly.
Supporting neutrals
The cobalt only reads as cobalt because everything around it is a cool, desaturated navy. Keep to these; don't reach for neutral greys.
Two status colours round it out — used sparingly, never decoratively:
Using them well
- One accent, one job. Cobalt marks the thing you want someone to act on. If two things on a screen are cobalt, one of them is wrong.
- Never as a large background. Cobalt at full strength across a panel overwhelms the interface; use the 16 % tint (
rgba(61, 123, 255, 0.16)) for filled chips and selected rows instead. - Respect the system accent. If someone has set their own accent colour in System Settings, let standard controls follow it. Reserve Cirruscope cobalt for brand surfaces — the icon, the sidebar mark, marketing.
- No new blues. Need another step? Move along the existing ramp — Cobalt Deep, base, Cobalt Lift, Cobalt tint — rather than mixing a fresh hue.