J&J Design

Overview

J&J Design embodies a philosophy of **Technical Minimalism with Maritime Heritage**—a design language that honors 40+ years of naval engineering excellence while maintaining contemporary clarity. The brand serves premium yacht owners, naval architects, and design studios across 28 countries, delivering concept-to-production solutions for vessels ranging from 30m to 150m+ superyachts. The aesthetic is deliberately restrained: a warm cream canvas (#f5f1ed) paired with deep navy (#01203c) and a bold maritime red accent (#b00000) that signals precision, authority, and the brand's unwavering commitment to structural integrity. The UI evokes the precision of technical drawings and the elegance of yacht hulls—clean lines, generous whitespace, and purposeful color deployment. Voice: authoritative yet approachable, technical without jargon. Example: "Our 47-meter ketch design reduces drag by 12% through advanced hull geometry—delivered on schedule, under budget."

Colors

The color system reflects the maritime and technical nature of yacht design. **Primary (#b00000)** is the brand's signature accent—a deep maritime red deployed on CTAs ("CONTACT"), navigation highlights, and interactive states. It commands attention without aggression, evoking the red hulls of classic sailing vessels and the precision of engineering blueprints. **Secondary (#01203c)** is a deep navy that anchors the palette, used in headers, dense text blocks, and the cookie consent banner—it conveys stability and professional authority. **Tertiary (#bedad9)** is a warm taupe-beige that softens the palette and appears in secondary UI elements and subtle backgrounds. The **surface stack** ranges from warm cream (#f5f1ed) as the primary background to cool grays (#e9ecef, #d0d0d0) for contain

Typography

The type system pairs **PPNeueMachina** (display, 79px, 300 weight) for hero headlines with **Titillium Web** (headlines and titles, 700 weight) for section headers and **Roboto** (body, 400 weight) for dense content. **Amiko** (label, 400–700 weight) is reserved for buttons and UI labels, where its geometric precision reinforces technical credibility. The hierarchy is strict: display text uses -0.02em letter-spacing to compress the visual weight; body text uses 16px with 24px line-height (1.5x) for comfortable reading on screens. Labels use 0.05–0.08em letter-spacing to add formality and distinction. On small labels over busy backgrounds (e.g., badge components), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) to ensure legibility. Heading pairs (display + headline-lg) create visual rhyth

Layout

The page uses a **24-column fluid grid** (Squarespace-native) with a max-width of 1500px, ensuring responsive scaling from mobile (6vw gutter) to desktop (4vw gutter). The grid-gap is 11px on desktop, 0px on mobile for edge-to-edge content. **Container max-width is 1500px**; all content respects this boundary to prevent line-length bloat. Whitespace is semantic: **lg spacing (40px)** separates major sections (hero from portfolio, portfolio from footer); **md spacing (24px)** divides subsections and card groups; **sm spacing (12px)** is used within cards and between list items. The hero section occupies 6 rows (desktop) with a 15px blur backdrop-filter, creating atmospheric depth. Body copy uses 16px font with 24px line-height, yielding ~65–75 characters per line—optimal for reading. Gutter

Elevation & Depth

Depth is achieved through a **three-tier shadow system** that mimics the layering of technical drawings and architectural models. **Level 1 (Base)**: No shadow; flat surfaces like the main background (#f5f1ed) and body text. **Level 2 (Cards & Inputs)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—used on standard cards, input fields, and dropdown panels. This 3px vertical offset with 8px blur creates subtle separation without visual heaviness. **Level 3 (Modals & Elevated UI)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)—applied to cookie banners, expanded modals, and hover states of cards. The

Shapes

The design system employs **Architectural Precision**—a philosophy that favors sharp, defined corners for technical credibility while allowing subtle rounding for usability. **Buttons use 1rem (16px) border-radius** (rounded.lg), creating a modern, approachable form that softens the maritime red without sacrificing authority. **Input fields and cards use 0.5rem (8px)** (rounded.DEFAULT), maintaining a technical aesthetic while improving touch targets. **Dropdowns and panels use 4px** (rounded.sm), echoing the precision of engineering drawings. **Full-radius (9999px)** is reserved for badges an

Components

Action Elements **Button-Primary** (#b00000, 48px height, 16px Amiko, 0.05em letter-spacing, 16px 48px padding, 1rem border-radius) is the primary CTA. On hover, it transitions to primary-fixed-dim (#a00000) over 150ms. Focus state adds a 3px outline at rgba(176, 0, 0, 0.3). **Button-Secondary** (transparent bg, 1px border in primary, 32px height, 10px Amiko bold, 0.08em letter-spacing) is used for secondary actions ("Decline all"). On hover, it inverts to primary background with white text. **Button-Ghost** (transparent, body-md Roboto) is for tertiary links; on hover, it gains surface-container-high background and primary text color. All buttons use cursor: pointer and transition: background-color 150ms ease-out.

Containers & Surfaces **Card** (surface-bright bg, 0.5rem radius,

Do's and Don'ts

**Do**

• Do use primary (#b00000) exclusively for CTAs and interactive focus states—never for body text or backgrounds.
• Do maintain 24px gutters on desktop and 6vw on mobile; never collapse whitespace to save space.
• Do apply 0.05em letter-spacing to all button labels (Amiko font) for technical precision and distinction.
• Do use the three-tier shadow system (Level 1/2/3) consistently; never mix shadow values or create custom shadows.
• Do pair display headlines (PPNeueMachina, 79px, 300 weight) with body-md (Roboto, 16px, 400 weight) for maximum contrast.
• Do transition all interactive states over 150–200ms using ease-out timing; never use instant color changes.

**Don't**

• Don't use secondary (#01203c) or tertiary (#bedad9) as primary accent colors—they are supporting roles only.
• Don't apply border-radius > 1rem to buttons or cards; the brand favors architectural sharpness, not soft roundness.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) or blur values > 24px; the aesthetic is refined, not dramatic.
• Don't mix font families within a single component (e.g., don't use Titillium Web for button labels; use Amiko).
• Don't set line-height < 1.5x for body text; readability is non-negotiable at 16px+ sizes.
• Don't deploy primary red (#b00000) on backgrounds; it is reserved for interactive elements and accents only.