Mood & theme · Perennial
Nautical
Navy, rope, and weathered brass: the visual vocabulary of the sea — precise navigation instruments, hand-knotted rigging, and the order of a well-run ship.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(97% 0.01 88) - --fg
oklch(18% 0.05 248) - --muted
oklch(50% 0.04 245) - --surface
oklch(99% 0.005 88) - --surface-2
oklch(93% 0.012 84) - --border
oklch(78% 0.04 244) - --accent
oklch(30% 0.12 248) - --accent-fg
oklch(97% 0.01 88) - --focus
oklch(45% 0.1 248)
| Token | Value |
|---|---|
| --font-body | 'Source Serif 4', Georgia, serif |
| --font-display | 'Bebas Neue', Impact, 'Arial Narrow', sans-serif |
| --font-mono | ui-monospace, 'SFMono-Regular', monospace |
| --radius | 2px |
| --radius-sm | 1px |
| --shadow | 0 2px 8px oklch(18% 0.05 248 / 0.1) |
| --shadow-lg | 0 12px 36px -4px oklch(18% 0.05 248 / 0.22) |
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');
:root {
--bg: oklch(97% 0.01 88);
--fg: oklch(18% 0.05 248);
--muted: oklch(50% 0.04 245);
--surface: oklch(99% 0.005 88);
--surface-2: oklch(93% 0.012 84);
--border: oklch(78% 0.04 244);
--accent: oklch(30% 0.12 248);
--accent-fg: oklch(97% 0.01 88);
--focus: oklch(45% 0.1 248);
--font-body: 'Source Serif 4', Georgia, serif;
--font-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
--font-mono: ui-monospace, 'SFMono-Regular', monospace;
--radius: 2px;
--radius-sm: 1px;
--shadow: 0 2px 8px oklch(18% 0.05 248 / 0.1);
--shadow-lg: 0 12px 36px -4px oklch(18% 0.05 248 / 0.22);
}Where it came from
Origin: Maritime tradition; naval signal flags; chart and compass design
Nautical visual culture evolved from practical necessity: signal flags needed maximum contrast at distance, navigation charts needed precise typography, and maritime tools needed materials that survived salt and weather. The aesthetic carries strong associations with craft, tradition, and reliability. In graphic design it moves between literal (sailing brands, fish restaurants) and abstract (any brand wanting heritage and dependability).
How to spot it
- Navy blue and cream as primary palette, brass or rope-orange as accent
- Rope and knot motifs in borders and dividers
- Serif or classic sans-serif typography suggesting chart lettering
- Strong horizontal rule lines referencing the horizon
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Timeless — rooted in visual tradition that predates digital design | Very literal — inappropriate outside maritime or heritage contexts |
| Navy-and-cream palette is inherently high-contrast and legible | Rope and anchor motifs become clichéd quickly |
| Signals reliability, craft, and institutional heritage | Dark navy at high density reads heavy on small screens |
In the wild
- Sailing brand and yacht club identity design
- Heritage seafood and coastal restaurant branding
- Classic menswear and outdoor equipment visual identity
Use it when
The product is maritime, coastal, or heritage-oriented — or the brand is built on tradition, reliability, and craft.