# Design Language for freedom.compare ## Aesthetics and Tone `freedom.compare` is a **coastal comparison atlas** — the visual language of a tide-worn nautical chart updated for the age of sovereign finance. Imagine a mid-century admiralty map folded and pressed between glass, its compass roses faded to dusty teal, its depth soundings replaced with rate tables, its margin annotations written in a confident, unhurried hand. This is not a fintech product page. It is a **manifested passage log**: the site knows where it has been, where the current flows, and which shoals to avoid. The mood is opulent-grand but air-purified — the opulence lives in spatial restraint, not decoration. Every element breathes. The grand quality emerges from weight: weight of silence between columns, weight of a single well-kerned serif numeral, weight of salt air. Color is coastal-blend — oyster white against deep harbor teal, a wash of driftwood gold, the faint blush of abalone shell catching light. The tone is authoritative without being cold. The copy voice is a veteran broker who owns a sailboat: she has compared every rate on the Atlantic seaboard and she is not in a hurry. ## Layout Motifs and Structure The page follows a strict **f-pattern reading grammar** — a counter-choice against the 92% centered / 78% full-bleed corpus norm. The f-pattern is implemented with precision, not as a guessing game: - **First horizontal sweep** (F-top): a wide, full-viewport header band carrying the wordmark flush-left in a 14-column grid and a sparse 2-item navigation flush-right. No hero image. The header band's background is `#EEE8DD` (oyster white), divided from the page by a 1px rule in `#9BBFB5` (weathered teal). - **Second horizontal sweep** (F-mid): a 7-column content zone beginning at column 1, ending at column 7, occupying 54vw. This holds the lead paragraph — the editorial lede — in 18px type. At column 8 there is negative space held by a single large floating SVG compass-rose fragment. The eye sweeps left, pauses, is invited to rest by the emptiness on the right. - **Vertical stroke** (F-spine): from the lede down, content stacks in a left-anchored single column, 42ch wide, with generous vertical margins (2.4rem between sections). Section headers break left into the gutter by 2ch, disrupting the baseline grid intentionally — a draftsman's annotation mark. - **Float zones**: at two points along the F-spine, hand-drawn SVG vignettes (compass fragments, depth-sounding markers, a stylized anchor-glyph) float into the right half of the viewport at `position: sticky` with slow parallax offsets. They do not wrap text — they exist in the negative space as atmospheric commentary. The grid is 12-column at 1280px+, collapsing to a single editorial column on mobile with the float elements hidden (not removed — they scale to 0 opacity at <768px). ## Typography and Palette **Type system (Google Fonts only):** - **Display / Wordmark — `Cormorant Garamond`** (weight 600, italic). The wordmark `freedom.compare` is set at 72px desktop, tracked at -0.02em. The period in the middle is set in weight 300, creating a breath pause. `Cormorant Garamond` carries the opulent-grand tone without pastiche — it reads as a premium serif that has earned its italics. - **Section headers — `DM Sans`** (weight 500, 20px, uppercase, letter-spacing 0.12em). DM Sans is a geometric-sans — clean, low-x-height-variation, the calibration instrument to Cormorant's compass. This pairing is the core tension of the design: an antique serif that has sailed, and a modern geometric that measures. - **Body — `DM Sans`** (weight 400, 16px, line-height 1.8). The same geometric-sans as headers, differentiated only by weight and size. Keeps the text block quiet and scannable — the f-pattern depends on type that doesn't fight the eye movement. - **Data / Rates / Numerals — `DM Mono`** (weight 400, 15px). Rate comparisons and numerical data use a monospaced geometric to honor column alignment. Each numeral sits in a cell 1ch wide. `DM Mono` was chosen over generic monospace because it shares DM's proportional DNA — the transition from prose to data feels continuous, not jarring. - **Accent / Pull-quotes — `Cormorant Garamond`** (weight 300, 22px, italic, color `#6B8C82`). Sparse use only. **Palette — coastal-blend:** | Role | Hex | Name | |---|---|---| | Background — deep | `#EEE8DD` | Oyster White | | Background — paper | `#F7F3EC` | Sea-bleached Linen | | Primary text | `#1C2C2A` | Tide-dark | | Primary accent | `#3D7A6E` | Harbor Teal | | Secondary accent | `#9BBFB5` | Weathered Teal | | Warm highlight | `#C9A96E` | Driftwood Gold | | Subtle blush | `#D8C4B6` | Abalone Shell | | Data-row alt | `#E4EDE9` | Low-tide Wash | Background uses `#F7F3EC` as the page base. Sections alternate between `#F7F3EC` and `#EEE8DD` without hard borders — the transitions are `background-gradient` washes over 80px. The palette contains zero saturated colors; all tones are desaturated to 20–40% saturation, grounding the opulent tone in restraint rather than baroque richness. ## Imagery and Motifs **No photography.** The corpus sits at 92% photography — `freedom.compare` opts out entirely. All visual matter is **hand-drawn SVG** in the tradition of admiralty chart annotation: 1. **Compass Rose Fragments.** Two instances: one large (380px diameter) in the upper-right float zone, one small (120px) as a footer vignette. Each rose is an original SVG with 16 points, drawn at 0.8px stroke in `#9BBFB5`, with alternating long/short points. The four cardinal points carry hairline serifs. The center disc is empty — no icon. These are decorative, not navigational. 2. **Depth Sounding Markers.** Along the F-spine, at every 3rd section break, a small hand-drawn depth indicator appears in the left gutter: a vertical line with a crosshatch base and a numeral (the section index, 01–06). These replace bullets and numbered lists. Stroke: 0.6px, color: `#C9A96E` (Driftwood Gold). 3. **Anchor Glyph.** The footer carries a single oversized stylized anchor: 64px, drawn in `#3D7A6E`, weight 1.2px stroke, with an intentionally imprecise hand-drawn quality (slight wobble in the shank curve). This is the only illustrative element below the fold. 4. **Wave-form rule.** Section dividers are not horizontal rules but hand-drawn SVG wave-forms — a single 2px sine curve of one full period, 280px wide, stroke `#9BBFB5`, centered under each section header. These replace the HR element. 5. **Floating elements** (the assigned motif): three ghost elements float in the viewport at `position: fixed` behind the content (`z-index: -1`): (a) a 400px compass rose fragment at 4% opacity in the upper-right, (b) a scatter of 12 hand-drawn dot-marks (sounding dots) at 3% opacity distributed across the viewport, (c) a single diagonal wind-line at 2% opacity. All three shift imperceptibly on scroll via transform: translateY() at 0.04× scroll-velocity — a whisper of depth, not a parallax show. ## Prompts for Implementation Build `freedom.compare` as **a single editorial page** — a long-form product comparison document written with the authority of a longstanding reference publication. Not a sales page. Not a dashboard. A measured, typographically excellent essay-with-data, the kind you would find printed in a specialized maritime or finance journal. **F-Pattern Implementation:** The HTML structure must enforce the f-pattern at the DOM level, not via CSS tricks: ``` header (full-width, flush-left wordmark) article.f-body section.f-sweep-1 (editorial lede, 54vw, left-anchored) aside.float-compass (position: absolute, right: 0) section.f-spine (stacked sections, 42ch column) ...section headers with gutter-breakout (margin-left: -2ch) ``` The aside does not receive focus or interaction — it is purely decorative. **Floating Elements (pulse-attention pattern):** The three fixed ghost elements implement the `pulse-attention` pattern as a CSS keyframe that runs on a 12-second loop with staggered delays: ```css @keyframes pulse-attention { 0%, 100% { opacity: 0.03; transform: scale(1); } 50% { opacity: 0.07; transform: scale(1.02); } } .ghost-compass { animation: pulse-attention 12s ease-in-out infinite; } .ghost-dots { animation: pulse-attention 12s ease-in-out infinite 4s; } .ghost-windline { animation: pulse-attention 12s ease-in-out infinite 8s; } ``` This creates a breathing, tidal quality — the background never holds still but never distracts. Implement a `prefers-reduced-motion` off-switch. **Rate Comparison Table:** The primary data component is not a card-grid or pricing block — it is a classic editorial comparison table. Rows use `DM Mono` for numerical cells, `DM Sans` for label cells. Odd rows background: `#E4EDE9`. No box-shadow, no border-radius, no hover-lift. The table has the gravity of a published ledger. Column headers are ALL-CAPS `DM Sans` weight 500 with letter-spacing 0.12em, separated from data by a 1px `#9BBFB5` rule. **Storytelling arc (single scroll, no tabs):** 1. **Header band** — Wordmark + 2-item nav (Compare / About). Full viewport width. 2. **F-sweep lede** — Editorial paragraph establishing the comparison thesis. 3–4 sentences. Compass rose floats right. 3. **F-spine section 01** — "The Landscape" — narrative context for the freedom-finance comparison space. 4. **F-spine section 02** — "What We Measure" — criteria overview. Wave-form divider. 5. **F-spine section 03** — Editorial comparison table. The data centrepiece. 6. **F-spine section 04** — "Reading the Chart" — how to interpret the results. Depth sounding markers in gutter. 7. **F-spine section 05** — "The Current" — brief forward-looking note. Pull-quote in Cormorant weight 300. 8. **Footer** — Anchor glyph, minimal copyright, compass rose fragment. **Avoid:** - Do not add a CTA button in the hero - Do not add a testimonial section - Do not use card components with drop shadows - Do not use any background gradient that crosses palette boundaries (no teal-to-white, only same-family washes) - Do not add sticky navigation — the header is not sticky ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **evolved-minimal**, layout = **f-pattern**, typography = **geometric-sans**, palette = **coastal-blend**, patterns = **pulse-attention**, imagery = **hand-drawn**, motifs = **floating-elements**, tone = **opulent-grand**. **Differentiators from the 114-design corpus:** 1. **F-pattern is the rarest layout at 4%.** The corpus is dominated by centered (92%) and full-bleed (78%). The f-pattern is enforced at the DOM level — the html structure encodes the scan grammar, not just the CSS. This is an editorial newspaper gesture in a sea of SaaS splash pages. 2. **Pulse-attention is absent from the corpus.** The pattern does not appear in the frequency data. The ghost fixed-layer elements (compass, dots, windline) breathe on a 12-second CSS animation loop at 3–7% opacity — atmospheric animation that is sub-perceptual until noticed. The corpus is heavy with parallax (91%) and stagger (67%); pulse-attention at ultra-low opacity is a distinct register. 3. **Coastal-blend palette at 2% corpus use.** While warm (93%) and gradient (87%) dominate, coastal-blend's desaturated teal-oyster-gold system is used by only 2 of 114 designs, and neither of them pairs it with the opulent-grand tone. This combination (coastal restraint + grand editorial authority) has no prior instance in the corpus. 4. **Geometric-sans typography at 1%.** The corpus is 90% mono. The DM Sans / DM Mono / Cormorant Garamond triple — geometric-sans as the workbench, old-style serif as the display voice — is not present in any reviewed design. The DM family was chosen specifically because its geometric origin gives it the precision of Swiss type without the coldness of Futura. 5. **Admiralty chart as the visual metaphor.** No other design in the corpus uses nautical cartography as its animating visual system. The hand-drawn SVGs (compass roses, depth soundings, wave-form rules, anchor glyph) reference a specific historical artifact tradition while remaining completely appropriate to financial comparison — rates are, after all, mapped terrains.