# Design Language for freedom.compare ## Aesthetics and Tone freedom.compare takes its visual cues from the great editorial tradition of long-form investigative journalism -- the kind of magazine feature that unfolds across ten pages with full-bleed photography, pull quotes set in enormous serif type, and a quiet confidence that the reader will stay because the material demands attention, not because a flashing button begged for a click. The aesthetic is **editorial at its most deliberate**: the visual authority of a late-1990s issue of *Emigre* crossed with the photographic gravitas of *National Geographic's* essay pages, all grounded in a color palette of old Burgundy wine and heavy cream paper stock. The mood is that of a well-appointed study in a European townhouse: leather-bound spines on the shelves, a decanter of something dark and slow on the sideboard, afternoon light falling through tall windows onto cream-colored walls. There is no urgency here. freedom.compare communicates through restraint and precision -- every element earns its place on the page the way every sentence earns its place in a well-edited essay. The tone is **elegant-sophisticated** without tipping into pretension: this is the sophistication of someone who knows the material deeply enough to present it simply. The site exists to compare, to weigh, to evaluate -- and it does so with the seriousness of a parliamentary report and the beauty of a printed broadsheet. Information is not dumped; it is revealed. Arguments are not shouted; they are composed. The visual language says: we respect what we are comparing, and we respect you enough to present it properly. ## Layout Motifs and Structure The layout follows a **magazine-spread** architecture -- a deliberate departure from the single-column vertical scroll that dominates the web. Content is organized into spreads: two-panel compositions that occupy the full viewport height and present information in bilateral arrangements, the way a physical magazine presents a left page and a right page as a unified visual field. **The Spread System:** Each "spread" is a full-viewport section divided into two zones. The division is never a clean 50/50 split. Instead, spreads use a **golden-section division** (approximately 61.8% / 38.2%), alternating which side takes the dominant share. On one spread, the left panel holds a large photographic image while the narrower right panel carries typeset analysis. On the next spread, the proportions reverse. This alternation creates a rhythmic lateral movement that pulls the eye back and forth across the viewport as the reader scrolls, mimicking the physical gesture of reading across a magazine page. **The Grid-Line Scaffold:** Underlying every spread is a visible grid-line system -- thin hairlines (#7A2038 at 8% opacity) that form a 12-column structure across the viewport. These lines are not hidden infrastructure; they are a deliberate visual motif. They appear as faint vertical rules running the full height of each spread, and content is aligned to these rules with obsessive precision. Occasionally, a photographic element or a pull quote will deliberately break the grid by one or two columns, creating controlled tension against the underlying order. The grid lines fade in as each spread enters the viewport and fade out as it exits, making the structure itself a component of the animation system. **The Gutter:** Between the two zones of each spread is a central gutter -- a vertical strip 40px wide on desktop, 24px on tablet. This gutter contains a thin rule (#4A0E1E at 30% opacity) that runs the full height of the spread, and at the midpoint of this rule sits a small decorative element: a diamond glyph (set in Playfair Display, character: ◆) at 12px, colored #7A2038. This diamond functions as a visual rivet, holding the two pages of the spread together the way a binding stitch holds pages in a codex. **Vertical Rhythm:** Spreads are separated by **transition zones** -- 120px tall strips of solid #F7F0E6 (the cream base) that contain nothing except a thin horizontal rule centered vertically and a spread number set in Cormorant Garamond Small Caps at 0.7rem, positioned flush right. These transition zones function as chapter breaks, giving the reader a moment of visual silence before the next spread arrives. **No Traditional Navigation:** There is no sticky header, no hamburger menu, no top navigation bar. Instead, navigation is handled through a **spine indicator**: a thin vertical track positioned 20px from the right edge of the viewport, running from 10% to 90% of the viewport height. Along this track, small notches (3px wide, 1px tall, colored #7A2038) mark the position of each spread, and a slightly larger indicator (a 6px circle) shows the current scroll position. Clicking a notch scrolls to that spread. This spine evokes the edge-marks on a physical book, the colored tabs that let you flip to a section. ## Typography and Palette **Typography:** - **Display / Headlines:** "Playfair Display" (Google Fonts) -- the SC (Small Caps) variant at weight 700 for primary spread titles. Playfair's high-contrast strokes (thick verticals, fine hairlines) carry the authority of engraved letterpress printing and the elegance of 18th-century transitional typefaces. Used at 3.2rem-5.5rem for spread headlines, always in small caps. Letter-spacing: 0.08em -- wide enough to breathe, tight enough to hold cohesion. Line-height: 1.1. Color: #4A0E1E (the deepest burgundy, nearly black). - **Subheadings / Pull Quotes:** "Cormorant Garamond" (Google Fonts) -- italic variant at weight 500. Cormorant is a display Garamond with exaggerated contrast and tall ascenders that give it a vertical elegance. Used at 1.6rem-2.4rem for subheadings and at 2.8rem for pull quotes. Pull quotes are set in italic, indented 2 columns from the left grid line, with a 2px vertical rule in #7A2038 running along their left edge. Color: #5C1A2A (medium burgundy). - **Body Text:** "Source Serif 4" (Google Fonts) -- regular weight (400) for body text, 500 for emphasis. Source Serif 4 is an Adobe-originated text typeface designed for extended reading on screen, with generous x-height and open counters that maintain legibility at small sizes. Set at 1.05rem, line-height 1.72, max-width 38em per text block. Color: #3B1520 (dark burgundy-brown) on light backgrounds, #F2E8DA (warm cream) on dark backgrounds. - **Captions / Metadata:** "Inter" (Google Fonts) -- weight 400 for captions, weight 600 for labels. The only sans-serif in the system, Inter provides a clean counterpoint to the three serif faces. Used at 0.75rem for image captions, 0.65rem for metadata (dates, categories, source attributions). Letter-spacing: 0.04em. Color: #8C6B5A (muted warm brown). All caps for metadata labels only. **Palette:** The palette is **burgundy-cream** -- a two-tone color system with tightly controlled accents: | Role | Color | Hex | |------|-------|-----| | Cream Base (backgrounds) | Warm antique paper | #F7F0E6 | | Deep Burgundy (headlines, primary) | Wine-dark ink | #4A0E1E | | Medium Burgundy (subheads, accents) | Crushed berry | #7A2038 | | Light Burgundy (hover states, links) | Faded rose | #A3425A | | Dark Cream (secondary backgrounds) | Aged parchment | #EDE0CC | | Warm Brown (body text alternate) | Tobacco leaf | #5C3D2E | | Muted Blush (highlights, selections) | Pressed petal | #E8C8B8 | | Near-Black Burgundy (darkest text) | Midnight claret | #2D0A14 | The palette has zero blues, greens, or cool tones. Every color sits on the warm side of the spectrum, between red-brown and yellow-cream. This constraint gives the entire site a cohesive material quality -- it feels like a single object made from a single material (old paper, old wine, old leather) rather than a collection of disparate screen elements. **Gradient usage is minimal:** one subtle gradient from #F7F0E6 to #EDE0CC for transition zones, and one deeper gradient from #4A0E1E to #2D0A14 for the occasional dark-background spread. No neon, no electric accents, no opacity games beyond the grid-line overlay. ## Imagery and Motifs **Photography as Primary Medium:** freedom.compare uses photography -- but not the hollow stock photography of corporate sites. The photographic approach is **documentary editorial**: black-and-white images with a warm sepia-burgundy duotone applied via CSS `mix-blend-mode: multiply` over a #7A2038 background, or full-color photography that has been desaturated to 30% and then overlaid with a subtle #4A0E1E color wash at 12% opacity. This treatment unifies all photography into the burgundy-cream palette regardless of the original image content, and gives every photograph the quality of a fine art print in a monograph. Photographs are used at two scales: 1. **Full-spread bleeds:** Images that occupy 61.8% of a spread's width and 100% of its height, extending to the very edge of the viewport with no margin. These images serve as the "left page" or "right page" of the magazine spread, and their content is allowed to be immersive and atmospheric -- landscapes, architectural details, close-up textures. 2. **Inset frames:** Smaller photographs (roughly 8 columns of the 12-column grid) set within a 4px border of #EDE0CC, with a 2px inner rule of #7A2038. These insets always have a visible caption below them, set in Inter at 0.75rem. **The Grid-Line Motif:** The 12-column grid lines are the signature decorative motif. Beyond their structural role, they become a visual identity element: - On dark-background spreads, the grid lines shift to #F7F0E6 at 6% opacity, creating a ghostly scaffold over the dark surface. - In transition zones, the grid lines compress: all 12 lines converge toward the center over a 200px vertical span, meeting at a single point (the diamond glyph), then expanding back out. This creates a gentle hourglass shape that marks the boundary between spreads. - The grid lines subtly respond to scroll velocity: when the user scrolls quickly, the lines tilt 0.5-1.5 degrees from vertical, as if the page itself is experiencing inertia. They settle back to true vertical when scrolling stops, with a 400ms ease-out transition. **Decorative Elements:** - **Diamond glyphs (◆):** Used as section dividers, list markers, and gutter rivets. Always in #7A2038, always at a size proportional to their context (12px in gutters, 8px as list markers, 16px as standalone dividers). - **Thin rules:** Horizontal and vertical hairlines (1px, #7A2038 at 20-40% opacity) used to delineate content areas, underline headings, and separate columns. Rules never have rounded ends -- they are precise, angular, authoritative. - **Folio marks:** Each spread carries a small folio number (like a page number in a printed book) positioned at the bottom-outside corner of the dominant panel. Set in Cormorant Garamond at 0.65rem, colored #8C6B5A. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport title spread. The background is #F7F0E6 (cream). Over 1.2 seconds, the 12-column grid lines fade in from 0% to 8% opacity, each line appearing 60ms after the previous one, left to right, creating a curtain-drawing effect. Then the site title -- "freedom.compare" -- materializes letter by letter in Playfair Display SC at 5vw, positioned at the golden section point (38.2% from top), centered on the grid. Below the title, a subtitle in Cormorant Garamond italic at 1.4rem fades in: a single declarative sentence that establishes the site's purpose. At the bottom of the viewport, a thin downward-pointing chevron (constructed from two 1px rules at 45-degree angles, #7A2038) pulses gently with a 3-second ease-in-out opacity cycle (0.3 to 0.7), suggesting that the reader should scroll. **Progressive Disclosure Animation:** Content within each spread is not visible on arrival. As a spread scrolls into the viewport (detected via IntersectionObserver at a 0.15 threshold), its elements reveal in a choreographed sequence: 1. First, the grid lines for that spread fade in (300ms). 2. Then the dominant-panel content (image or text block) slides in from the dominant side -- a horizontal translateX of 60px to 0, with opacity 0 to 1, over 500ms with a cubic-bezier(0.25, 0.1, 0.25, 1.0) easing. 3. Then the subordinate-panel content mirrors from the other side (400ms delay after dominant). 4. Finally, the gutter diamond and folio mark fade in (200ms, 600ms total delay). This progressive disclosure ensures that the reader encounters each spread as a composed moment, not as a wall of pre-loaded content. The delays are calibrated so that at a normal scroll speed, everything has finished animating by the time the spread is fully in view. **Spread Transition Parallax:** As the reader scrolls between spreads, the photographic element in the departing spread moves at 0.85x scroll speed (slight parallax lag), while the text element in the arriving spread moves at 1.1x scroll speed (slight parallax lead). This creates a subtle depth separation between images and text, reinforcing the magazine metaphor: images feel like they are printed on the page, while text floats slightly above. **Dark-Spread Inversion:** Every fourth spread uses an inverted color scheme: background #2D0A14 (near-black burgundy), text in #F2E8DA (warm cream), grid lines in #F7F0E6 at 5% opacity. These dark spreads serve as visual punctuation -- they change the rhythm, force the eye to readjust, and create a sense of turning to a different section of the magazine. The transition into a dark spread uses a 600ms background-color crossfade (not an instant swap) that begins when the transition zone above it reaches 50% viewport visibility. **Scroll-Velocity Grid Tilt:** Implement a lightweight JavaScript listener on the scroll event (throttled to 60fps via requestAnimationFrame) that calculates scroll velocity (delta scroll position / delta time). When velocity exceeds a threshold (e.g., 2px/ms), the grid-line container receives a CSS transform: `skewX()` proportional to velocity, capped at 1.5 degrees. When velocity drops below threshold, the skew eases back to 0 over 400ms. This subtle effect is almost subliminal -- most users will not consciously notice it, but it contributes to the feeling that the page is a physical object with inertia. **Hover and Interaction:** - Links and interactive elements use a **rule-underline reveal**: on hover, a 1px rule in #A3425A extends from left to right beneath the text over 300ms (CSS `transform: scaleX(0)` to `scaleX(1)` with `transform-origin: left`). - Photographic insets respond to hover with a subtle desaturation shift: the 30% desaturation drops to 15%, allowing more original color to show through, over 400ms. This rewards curiosity without demanding interaction. - The spine indicator notches expand from 3px to 8px width on hover, with the current-spread notch always at 8px. **AVOID:** CTA-heavy layouts, pricing comparison tables, star-rating grids, feature-checklist matrices, stat counters with animated numbers, testimonial carousels, sticky floating action buttons. The site compares through narrative and visual composition, not through grid-based feature matrices. **Responsive Considerations:** On viewports below 768px, the magazine-spread collapses from bilateral to stacked: the dominant panel occupies 100% width, followed by the subordinate panel at 100% width. The gutter diamond repositions to a horizontal rule between the two panels. The grid lines reduce from 12 to 6 columns. The spine indicator moves to the bottom of the viewport as a horizontal track. Typography scales: headlines to 2.4rem, body to 1rem, pull quotes to 2rem. ## Uniqueness Notes **Differentiators from other designs:** 1. **Burgundy-Cream Palette at 0% Frequency:** The burgundy-cream palette has never been used in any other design in the portfolio. While warm palettes dominate (100% frequency), this specific two-tone system -- built entirely from reds, browns, and creams with zero cool tones -- creates a unique material identity that feels like holding a physical object (a leather-bound volume, a wine label, an old parliamentary document) rather than viewing a screen. 2. **Magazine-Spread Bilateral Layout:** At only 6% frequency, the magazine-spread layout is dramatically underrepresented. freedom.compare takes it further by implementing a true bilateral-spread system with golden-section divisions, alternating dominant sides, and visible gutter bindings. This is not merely "two columns" -- it is a deliberate recreation of the physical magazine reading experience, complete with folio marks and transition zones that function as page-turn moments. 3. **Grid-Lines as Visible, Animated Motif:** While grid-lines appear at 6% frequency as a motif, no other design makes the structural grid itself a primary decorative and interactive element. Here, the 12-column grid lines are visible, they fade in and out with spreads, they compress into hourglass shapes at transitions, and they tilt with scroll velocity. The infrastructure becomes the ornament -- a principle borrowed from High-Tech architecture (Piano, Rogers) but applied to editorial design. 4. **Progressive Disclosure Without Gamification:** The progressive-disclosure pattern (4% frequency) is used here in its purest editorial form -- content reveals itself in a choreographed sequence tied to scroll position, but there are no progress bars, unlock animations, or reward mechanics. Disclosure serves readability and composition, not engagement hacking. 5. **Zero Sans-Serif Headlines:** In a portfolio where mono typography dominates at 99%, freedom.compare uses three serif typefaces (Playfair Display, Cormorant Garamond, Source Serif 4) and reserves the only sans-serif (Inter) exclusively for captions and metadata. This all-serif headline approach is a deliberate throwback to pre-digital editorial design, where sans-serif was the exception, not the rule. **Chosen seed/style:** aesthetic: editorial, layout: magazine-spread, typography: playfair-elegant, palette: burgundy-cream, patterns: progressive-disclosure, imagery: photography, motifs: grid-lines, tone: elegant-sophisticated **Avoided overused patterns:** playful aesthetic (98%), centered layout (99%), warm-only palette without specificity (100%), scroll-triggered as primary pattern (98%), friendly tone (97%), mono typography (99%), minimal imagery (95%), vintage motifs (75%), parallax as primary animation (79%), gradient palette (91%). Instead, the design leans into underused territory: burgundy-cream (0%), magazine-spread (6%), progressive-disclosure (4%), grid-lines (6%), elegant-sophisticated (6%), playfair-elegant (6%).