Navy Assurance
Calm enterprise confidence: deep navy, a measured serif and nothing left to chance.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A white page anchored by deep navy, with a measured serif for headlines and clear sans for everything else. Architecture photography in cool daylight, hairline rules and a plain, structured layout. It reads like a company that answers security questionnaires before you send them.
Navy Assurance is the visual language of calm enterprise trust. A near-white canvas, a deep navy that anchors every action, a measured transitional serif for headlines and a clear humanist sans for reading. Cool daylight architecture photography suggests structure and permanence. It borrows from annual reports, institutional banking print and well-run public-sector design systems. Nothing is flashy; the page wins by being clear, complete and steady.
Principles
- Clarity over cleverness: say exactly what the product does.
- Navy anchors every action; nothing else competes.
- Show proof early: badges, auditors, numbers.
- Structure with hairline rules and generous, even spacing.
- Motion should be nearly invisible.
Motion
Restrained: sections fade up 8px over 500ms and nothing else moves on its own. Links draw a 1px navy underline on hover; the compliance badges row gently fades in one by one.
Do & don't
Do
- ✓ Show compliance framework badges directly under the hero CTA.
- ✓ Use control IDs in Source Code Pro as credible detail.
- ✓ Keep the palette to navy, white, grey and one green.
Don't
- ✕ Don't use padlock, shield or hacker imagery.
- ✕ Don't animate anything beyond simple fades.
- ✕ Don't use gradients or dark hero sections.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 365 lines of DESIGN.md in total.
More like this
All SaaS & Bento →
FreeBento Daylight
No. 039A sunlit bento box of product tiles: soft grey canvas, white cells, one confident blue.
Bento Midnight
No. 040Charcoal tiles on a blueprint grid, lit from inside by a single violet glow.
Hairline Noir
No. 041Near-black, one ice-blue accent and hairlines drawn with a 0.5mm technical pen.
Indigo Clarity
No. 042White space, deep indigo and crisp product screenshots that explain themselves.
Signal Grid
No. 043A dense analytics cockpit: tight grids, tabular numbers and charts that do the talking.
Soft Intelligence
No. 044Calm AI product pages: pearly gradients, a literary serif and a chat window as the hero.