Logo
The Dipnot mark comes in solo marks (transparent background, for in-layout use) and composed variants (mark on a solid background, for app icons, OG cards, and social avatars). Pick the variant that reads cleanly against its background.
Full internal brand specification (extended): Dipnot Brand Book by Gingersauce
Solo marks
Default · Teal #338596
Reader-facing surfaces and the admin panel.
Gold · #C49B3A
Admin / operator contexts.
White · #FFFFFF
Dark or photographic backgrounds.
Black · #000000
Light backgrounds, print, low-ink.
Winter Bloom · #2E162C
Deep-plum monochrome; pairs with warm or pale backgrounds.
Sky Captain · #131B26
Near-black navy monochrome; pairs with bright backgrounds.
Composed variants
Solid background + mark, with a baked-in 1/6-tile clear-space border. Use for app icons, OG cards, and social avatars — don't add extra padding around them.
White on Teal
White on Sky Captain
Teal on Sky Captain
Colors
Dipnot Teal is the single primary accent across every surface — buttons, active states, focus rings, links. The two darker tones below are composed-asset backgrounds only (app icons, OG cards) — never use them as UI backgrounds.
Dipnot Teal
Hex #338596
RGB 51 133 150
oklch(0.547 0.076 210)
Primary accent — all surfaces
Sky Captain
Hex #131B26
RGB 19 27 38
CMYK 50 29 0 85 · Pantone 5605C
Composed-asset background only
Winter Bloom
Hex #2E162C
RGB 46 22 44
CMYK 0 52 4 82 · Pantone 643C
Composed-asset background only
Typography
One sans family across every surface for titles and web body: Inter (SIL OFL 1.1, free). The brand wordmark uses a separate display font, Gabarito Semibold — baked into the logo SVGs and never loaded at runtime.
Primary UI font
Aa
Inter
Titles & body · weights 400 / 500 / 600 / 700
Wordmark only (not runtime)
Aa
Gabarito
Semibold 600 · outlined in logo artwork
Rules
Clear space
Leave at least 1/6 of the mark height empty on all sides of any solo mark. No text, button, or container edge may enter this zone. If the mark renders at 60 px, keep 10 px clear on each side. Clear space is a minimum, not a target — more is fine, less is not. Composed variants already bake in the equivalent padding; don't add more around them.
Minimum size
The mark holds up small, but inner detail muddies below 16 px. Floors per context:
| Context | Minimum |
|---|---|
| Favicon / browser tab | 16 × 16 px |
| Inline UI (button icon, nav item, chip) | 20 × 20 px |
| Standalone UI (avatar, card corner, list row) | 40 × 40 px |
| Display (hero, splash, marketing) | 80 × 80 px |
| 8 mm |
Misuse
Don't:
- Stretch or skew the mark.
- Recolor outside the approved palette.
- Add shadows, glows, or outlines.
- Place the mark on low-contrast backgrounds.
- Rotate or flip the mark.
- Use the Winter Bloom or Sky Captain colors as UI backgrounds — they exist only for composed brand assets.
Vision
To become the most trusted and enduring source of knowledge for the underwater world.
Mission
To deliver clear, reliable, and well-crafted content about diving and the underwater world, accessible to all levels.