---
title: "Miti Navi design system"
variant: extended
source: https://miti-navi.com/fr
captured_at: 2026-10-12
theme: light
industry: other
generator: Design DNA (https://four.wiralomi.com/style/miti-navi-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Miti Navi · Design System

> Quiet typography, open sea, bespoke sailing yachts.

**Theme:** light · **Industry:** other · **Source:** https://miti-navi.com/fr · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Miti Navi presents custom sailing yachts through restrained typography, a warm sand-colored canvas, and expansive sea photography. The page balances editorial calm with a clear route into yacht projects and marine services.

## North star

Let warm empty space and one compelling yacht photograph carry the page, with typography as the only strong interface ornament.

## Overview

The visual identity is built around a warm, continuous sand canvas, with deep blue-black text providing crisp contrast and very little decorative chrome. The opening is image-led: a large yacht-at-sea photograph sits inside an organic, curved silhouette, while the centered wordmark and compact navigation keep the frame composed. Voyage, a literary display face, gives the French headline an elegant editorial character; GT Pressura Mono handles navigation, captions, and uppercase action labels with a technical, maritime edge. Content sections remain spacious and centered, allowing headings and yacht imagery to feel deliberately paced rather than crowded. Product and service areas use image-led groupings, not heavy card UI. A dark footer creates the page’s strongest tonal shift. Screenshot blues belong chiefly to the photographed sea and sky, not to the measured brand palette; reproduce them through relevant imagery rather than inventing blue interface colors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Sailcloth Sand | `#e8ded0` | `--color-sailcloth-sand` | brand | Dominant page canvas and subtle border tone across the main content sections. |
| Graphite Type | `#232323` | `--color-graphite-type` | neutral | Muted body and heading text, including yacht links and secondary navigation. |
| Harbor Gray | `#999999` | `--color-harbor-gray` | neutral | Quieter footer, text, and navigation details; reserve for secondary information. |
| Midnight Tide | `#000e13` | `--color-midnight-tide` | brand | Primary text and link ink; also the solid dark footer background. |

### Semantic aliases

`--color-canvas` → `#e8ded0` (Sailcloth Sand) · `--color-text` → `#000e13` (Midnight Tide) · `--color-text-muted` → `#232323` (Graphite Type) · `--color-text-subtle` → `#999999` (Harbor Gray) · `--color-border` → `#e8ded0` (Sailcloth Sand)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000e13` | `#e8ded0` | 14.73:1 | AAA |
| `#232323` | `#e8ded0` | 11.82:1 | AAA |
| `#999999` | `#e8ded0` | 2.14:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT Pressura Mono | `--font-mono` | webfont | 400 | Navigation, body copy, captions, eyebrows, and action links. | Space Mono |
| Voyage | `--font-display` | webfont | 400 | Display headline and editorial section headings. | Cormorant Garamond |
| Times New Roman | `--font-times-new-roman` | system | 400 | System fallback for serif text if the display webfont is unavailable. | Cormorant Garamond |

- **GT Pressura Mono:** Regular weight; compact monospaced voice, often uppercase with generous tracking for labels and links.
- **Voyage:** Regular-weight expressive serif; keep headline line-height tight and avoid adding bold emphasis.
- **Times New Roman:** Use only as a fallback; retain a light, literary serif impression.

### Type scale — Custom (ratio ≈ 2.268, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 0.9 | 0 | — | Voyage | Oversized editorial title over the hero yacht photograph. |
| h1 | 46px | 400 | 0.9 | 0 | — | Voyage | Primary page or section heading in the display serif. |
| body | 14px | 400 | 1.4 | 0.071em | uppercase | GT Pressura Mono | Uppercase monospaced introductory copy and section text. |
| caption | 10px | 400 | 1.4 | 0.1em | uppercase | GT Pressura Mono | Small uppercase image and supporting-detail labels. |
| nav | 16px | 400 | 1.4 | 0 | — | GT Pressura Mono | Compact monospaced header navigation. |
| link | 12px | 400 | 1.4 | 0.083em | uppercase | GT Pressura Mono | Tracked uppercase calls to action and text links. |
| eyebrow | 14px | 400 | 1.4 | 0.071em | uppercase | GT Pressura Mono | Small uppercase section labels above headings. |
| code | 16px | 400 | 1.4 | 0 | — | GT Pressura Mono | Monospaced utility or information text where needed. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 5, 10, 15, 16, 20, 24, 30, 32, 60 px.
- Section rhythm 60px · element gap — · card padding — · max content width 1288px.

Use a centered, wide desktop composition with a measured maximum content width of 1288px. The header distributes navigation to both sides of a centered wordmark. The hero is a large, nearly full-width image with its distinctive curved upper silhouette and text set over the open left side. Subsequent sections retain a single warm background and generous vertical breathing room; center the yacht-range heading, then use two-column yacht features and a three-column service grouping. Keep density comfortable and avoid enclosing every item in a card.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `1s cubic-bezier(0.82, 0, 0.36, 1)` on interactive elements.

The page is mostly flat: measured shadows and gradients are absent, and the main content relies on spacing rather than card borders. Keep image and text planes clean with minimal layering. Use the dark footer as a strong background change, while preserving fine, understated rules beneath select hero labels or links.

## Imagery

Prioritize authentic yacht and sailing photographs, especially wide sea-level views with clear sky and water. Frame the opening image in a large organic shape with text over a quiet area; use supporting yacht imagery in the range and service sections. The screenshot’s blues are photographic sea and sky tones, not additional interface palette colors. Avoid illustration-heavy or synthetic 3D treatment.

## Components

### Split header navigation

Compact GT Pressura Mono navigation, split left and right around a centered Miti Navi wordmark, with language choices near the center.

### Organic hero image

Wide yacht photograph with a sculpted curved top edge, overlaid by a Voyage headline and a tracked uppercase text link.

### Centered range introduction

A centered editorial heading introduces yacht sizes and a simple text-based discovery link on the warm canvas.

### Yacht feature links

Image-led yacht entries arranged in two columns, with concise monospaced labels and understated text links.

### Three-part service group

Three service areas—shipyard, yacht rental, and repair—presented as a spacious image-supported row with centered headings.

### Dark information footer

Midnight Tide background with compact company address, contact, and social links in monospaced text.

### Measured component styles

- **Link** (“VOILIER 34M Déjà à flot”): transparent background · text #232323 · radius 0px · padding 0px · 400 16px GT Pressura Mono
- **Navigation item** (“MITI NAVI MITI NAVI”): transparent background · text #000e13 · radius 0px · padding 0px · 400 16px GT Pressura Mono

## Do

- Use Sailcloth Sand #e8ded0 as the dominant content canvas.
- Keep navigation and utility labels monospaced and visually compact.
- Set major editorial headings in a graceful, regular-weight serif.
- Give yacht photography generous space and a clear focal subject.
- Use whitespace to separate sections instead of adding card chrome.
- Reserve Midnight Tide #000e13 for strong text contrast and the footer.

## Don't

- Do not introduce bright interface colors absent from the measured palette.
- Do not treat photographic sea blues as brand UI colors.
- Do not crowd the hero with dense controls or boxed content.
- Do not use heavy shadows, gradients, or rounded card systems.
- Do not replace the editorial serif with a bold geometric display face.
- Do not turn uppercase labels into widely spaced decorative headlines.

## Agent prompt

Build a new Miti Navi page with a calm maritime editorial identity. Use Sailcloth Sand (#e8ded0) as the broad canvas, Graphite Type (#232323) for secondary copy, Harbor Gray (#999999) for low-priority details, and Midnight Tide (#000e13) for primary ink and a dark footer. Set expressive headlines in a Voyage-like literary serif; use a GT Pressura Mono-like face for navigation, captions, and tracked uppercase links. Favor a spacious centered layout, split navigation around a centered wordmark, and a large yacht photograph with an organic curved frame. Organize content into restrained image-led groups with generous vertical breathing room. Keep surfaces flat and avoid shadows, gradients, decorative color blocks, or heavy cards. Treat ocean blues as photograph content rather than interface palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split compact navigation around a centered logo; a large framed yacht-at-sea image fills the opening view. | language switch, primary discovery link, side brochure tab | organic image frame, serif headline, centered wordmark, mono navigation |
| 2 | other | Single-column text area on the shared canvas, with ample vertical separation from the hero. | brand introduction | editorial body copy, open negative space |
| 3 | product-showcase | Centered heading and yacht-size choices within a single broad section. | choose yacht size, learn more link | centered serif heading, minimal text navigation |
| 4 | product-grid | Two-column image-led yacht showcase with centered section heading and compact links. | browse yacht models, open yacht detail | paired photography, mono labels, text links |
| 5 | feature-grid | Three service columns with centered headings and supporting imagery. | explore services, contact or build enquiry | three-column grouping, image-supported headings, uppercase links |
| 6 | footer | Full-width dark closing band with a single column of company, contact, and social information. | email contact, social navigation | dark background, compact mono text, simple link lists |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/miti-navi-com