Cloud Mist Labs

Stratum — Cloud Mist Labs

Stratum.

Cloud Mist Labs · brand system, deep dive.

v1 · 2026 · the mark

Why three pills

Three layers stacked, slightly offset, the middle one widest. The mark is the practice: Edge, Services, Data. The eye reads it bottom-up, which is also how we read systems.

Geometric calm, not corporate identity. The proportions sit at a 96-unit grid; the corner radius is exactly half the pill height.

In motion

On hover or first reveal, pills rise from below with a 0.2s stagger. Compositor-friendly properties only — transform and opacity.

Mark variants.

One geometric idea, six legitimate forms.

  • Default · 3 pills

  • Minimal · 2 pills

  • Expanded · 4 pills

  • Solid · single-colour

  • Outline · stroke only

  • Accent · base in signal

Construction.

Grid, proportion, clear space.

Grid · 96 unit

Pills sit on multiples of 2u · radius = half height · 16u stratum height

Clear space · x = pill height

One full pill height of margin on every side · never compromise

Lockups.

Horizontal, stacked, mono-line.

Primary · horizontal
Stacked · centred
Reversed · horizontal
Reversed · stacked
Tight · small UI
Monoline · technical

Palette.

Six tokens. One accent. Everything else is restraint.

  • Paper
    --paper Default canvas. Most pages live here.
  • Paper · soft
    --paper-soft Adjacent surface. Section alternation.
  • Ink
    --ink Display + body. Logo at full weight.
  • Fog
    --fg-fog Mono captions, kicker text.
  • Signal
    --signal Hover, focus, accent. One accent.
  • Mist
    --panel Code blocks, soft panels.

Applications.

The mark earning its keep across surfaces.

Header
Business card
Deck cover · 16:9
Favicon · 32px

Don’t.

Common misuses to avoid.

  • ×Add a tagline inside the lockup.
  • ×Recolour outside the palette.
  • ×Rotate the mark off horizontal.
  • ×Apply gradients or drop shadows.
  • ×Crop below the clear-space boundary.
  • ×Place over busy photography.