Marine Sea-Glass Builder Register

/marineSeaglassBuilderRegister
A composed design system evoking professional, owner-editable registries with crisp geometry, a coastal palette, and quietly elegant UI elements for trustworthy, light editorial interfaces.
Sep 6, 2026
Design System Content
# Marine Sea-Glass Builder Register

A design language for close-family, light editorial interfaces.

---

## Philosophy

> "Trust comes from readable structure, calm proof, and an honest perspective."

This system creates interfaces that feel like a beautifully bound registry or a curated architectural editorial. The aesthetic relies on crisp, compact geometry and a soothing coastal palette to deliver an environment that feels simultaneously highly professional and intimately owner-editable. 

### Core Beliefs

1. **Readable Structure** — Trust is built through highly organized, compact, and rectangular layouts. Everything has its specific place.
2. **Honest Photography** — Imagery must feel authentic and atmospheric—capturing real environments rather than staged studio perfection.
3. **Calm Proof** — Validation (like reviews and claims) is presented quietly and elegantly, without shouting or excessive decoration.
4. **Owner-Editable Feel** — The interface should feel like a neatly kept ledger or journal, maintaining a structured but personal touch.

### Strict Rules

* **Sans-Serif Only** — Typography must remain clean and contemporary. No serif typefaces are permitted.
* **The Single-Heading Hero** — Hero sections must be simple, featuring only one primary heading over a large, image-led opening.
* **Proof Beneath the Claim** — Golden review stars must always be anchored directly beneath the primary claim or heading.
* **No Artificial Artifacts** — Refuse the use of beige tones, floating badges, user avatars, or chalkboard textures.
* **Rectangular Spacing** — Elements must remain compact and consistent. Avoid highly rounded pills or organic blob shapes.

---

## Color Palette

### The Coastal & Structural Scale

The palette uses airy fields, soft seafoam panels, deep marine navbars, and sea-glass accents to evoke a clean, coastal ledger.

```css
/* Core Backgrounds */
bg-[#f7fafa]          /* Main canvas fields (Light Editorial Background) */
bg-[#e8f2f2]          /* Ruled panels, alternating seafoam feature bands */
bg-[#092b3a]          /* Primary plain dark navbar, deep footer regions */
bg-white              /* Interior card or table backgrounds */

/* Text & Typography */
text-[#003d65]        /* Elegant primary headings, prominent titles */
text-[#092b3a]        /* Standard body copy, dense list items */
text-[#092b3a]/70     /* Secondary text, metadata, table column headers */
text-white            /* Inverse text for dark navbars and parallax overlays */

/* Accents & Trust Indicators */
bg-[#5fa6a3]          /* Sea-glass CTAs (Primary Buttons) */
text-[#5fa6a3]        /* Underline hover effects, textual accents */
text-[#eab308]        /* Golden review stars (Trust markers) */

/* Borders & Structural Rules */
border-[#e8f2f2]      /* Light ruled lines for menu/list tables */
border-[#003d65]/10   /* Deeper structural dividers */
```

---

## Typography

Typography pairs classic, humanist sans-serifs to maintain an elegant, editorial tone that completely avoids feeling "techy" or overly digitized. 

### Allowed Font Combinations
1. **Gill Sans Nova** (Headings) + **Source Sans 3** (Body)
2. **Frutiger** (Headings) + **Scala Sans** (Body)
3. **Avenir Next** (Headings) + **Humanist 521** (Body)

### Font Weights

```css
font-normal      /* Standard body text, list items, tidy contact columns */
font-medium      /* Sea-glass CTAs, table headers, secondary titles */
font-semibold    /* Golden star claims, dark navbar links */
/* Ultra-light and ultra-black weights are avoided to maintain calm consistency */
```

### Font Size Scale

```css
text-xs          /* Fine print, parallax notice metadata (12px) */
text-sm          /* Ruled menu items, tidy contact details (14px) */
text-base        /* Core editorial body copy (16px) */
text-lg          /* Introductory paragraph leading (18px) */
text-xl          /* Sub-section feature band titles (20px) */
text-3xl         /* Standard page headers (30px) */
text-5xl         /* Simple hero heading (48px) */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Notes |
| --- | --- | --- | --- | --- |
| Hero Heading | 5xl | medium | #003d65 | Single heading only. |
| Feature Band | xl | normal | #003d65 | Elegant, non-techy. |
| Body Text | base | normal | #092b3a | High readability. |
| CTAs | base | medium | white | Contained in sea-glass. |
| Menu Tables | sm | normal | #092b3a | Ruled underneath. |

---

## Animation System

### Core Philosophy: Quiet & Deliberate

Motion is restricted to gentle environmental shifts and subtle interactive cues. No bouncing, snapping, or heavy springing.

### Hover Interactions (The Underline)

Interactive text relies on classic, clean underline reveals rather than background color shifts.

```css
/* Standard Link Hover */
"transition-all duration-300 ease-in-out decoration-transparent hover:decoration-[#5fa6a3] underline underline-offset-4"
```

### Image Parallax & Fades

Full-height parallax sections use slow, continuous scrolling effects, while page elements fade in calmly.

```tsx
// Simple Fade Transition
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.6, ease: "easeInOut" }}

// Slow Parallax Background (CSS representation)
"bg-fixed bg-center bg-no-repeat bg-cover transition-transform duration-1000"
```

---

## Imagery & Environment

Photography is central to the design system's authenticity. 
* **Allowed Subjects:** China/ceramics, natural counter light, rainlit windows, unstyled structural spaces.
* **Treatment:** Full bleed or strictly rectangular. No rounded corners or circles.
* **Overlays:** Full-height parallax images require a dark, high-contrast overlay (`bg-[#092b3a]/60`) to ensure notices and typography remain perfectly legible.

---

## UI Components

### Navigations & Footers

The navbar is an unyielding, plain dark anchor at the top of the interface.

```tsx
// Plain Dark Navbar
<nav className="w-full bg-[#092b3a] text-white px-6 py-4 flex justify-between items-center rectangular-spacing">
  <div className="font-medium text-lg tracking-wide">Brand</div>
  <div className="flex gap-6 text-sm">
    <a href="#" className="hover:text-[#5fa6a3] transition-colors">Directory</a>
    <a href="#" className="hover:text-[#5fa6a3] transition-colors">Register</a>
  </div>
</nav>
```

### Feature Bands (Alternating)

Sections alternate cleanly between the primary field color and the seafoam panel color to create rhythm.

```tsx
// Marine Field Band
<section className="bg-[#f7fafa] py-16 px-8 text-[#092b3a]">...</section>

// Seafoam Panel Band
<section className="bg-[#e8f2f2] py-16 px-8 text-[#092b3a]">...</section>
```

### The Ruled Menu/List Table

Lists and menus are strictly tabular, separated by crisp, light rules.

```tsx
<ul className="w-full border-t border-[#003d65]/10">
  <li className="py-4 border-b border-[#003d65]/10 flex justify-between text-sm hover:bg-white transition-colors">
    <span>Architectural Review</span>
    <span className="text-[#092b3a]/70">Oct 12</span>
  </li>
</ul>
```

### Golden Review Claim

```tsx
<div className="flex flex-col items-center text-center space-y-2">
  <h2 className="text-3xl text-[#003d65]">Unmatched Structural Integrity</h2>
  <div className="flex text-[#eab308] gap-1 text-lg">
    ★★★★★
  </div>
</div>
```

---

## Component Catalog

### Buttons & CTAs

```tsx
// Primary Sea-Glass CTA
"bg-[#5fa6a3] text-white font-medium px-6 py-3 rounded-none hover:bg-[#4d8b88] transition-colors duration-300"

// Secondary Outline Action
"border border-[#092b3a] text-[#092b3a] px-6 py-3 rounded-none hover:bg-[#092b3a] hover:text-white transition-all duration-300"
```

### Tidy Contact Columns

```tsx
<div className="grid grid-cols-2 gap-8 text-sm text-[#092b3a]">
  <div className="flex flex-col space-y-1">
    <span className="text-[#092b3a]/70 uppercase tracking-wider text-xs mb-2">Inquiries</span>
    <span>contact@register.com</span>
    <span>+1 (555) 123-4567</span>
  </div>
  <div className="flex flex-col space-y-1">
    <span className="text-[#092b3a]/70 uppercase tracking-wider text-xs mb-2">Office</span>
    <span>144 Window Lit Ave.</span>
    <span>Portland, OR 97209</span>
  </div>
</div>
```

### Parallax Overlay Notice

```tsx
<div className="relative h-screen bg-fixed bg-cover bg-[url('/rainlit-windows.jpg')]">
  <div className="absolute inset-0 bg-[#092b3a]/70 flex items-center justify-center">
    <div className="max-w-md text-center p-8 bg-[#f7fafa] text-[#092b3a]">
      <h3 className="text-xl text-[#003d65] mb-4">Important Notice</h3>
      <p className="text-sm">Registration closes at dusk.</p>
    </div>
  </div>
</div>
```

---

## Quality Checklist

* [ ] Is the hero section limited to exactly *one* elegant `#003d65` heading?
* [ ] Are the golden review stars positioned immediately beneath the primary claim?
* [ ] Do the background sections correctly alternate between `#f7fafa` and `#e8f2f2`?
* [ ] Are all CTAs appropriately sized (not oversized) and using the `#5fa6a3` sea-glass color?
* [ ] Is the dark navbar completely plain `#092b3a` without gradients or borders?
* [ ] Is all typography strictly sans-serif?
* [ ] Does the parallax overlay have enough contrast against the image (no weak overlays)?
* [ ] Are the contact columns perfectly aligned and tidy?

---

## Allowed vs Not Allowed

### ✓ Allowed
* Clean `#f7fafa` and `#e8f2f2` alternating backgrounds.
* Plain, flat `#092b3a` navigational elements.
* Simple, rectangular geometry with compact spacing.
* Honest, atmospheric photography (china, counter light, rainlit windows).
* Standard fade animations and classic underline hovers.
* Tabular, ruled list structures.

### ✗ Not Allowed
* Any beige or warm earth-tone backgrounds.
* Floating badges, tags, or status pills.
* User avatars or rounded profile images.
* Chalkboard textures or contrived "handwritten" elements.
* Generic "navy corporate brochure" styling (e.g., techy graphics, isometric illustrations).
* Oversized, shouting CTA buttons.
* Bouncy, spring-based animations.
* Weak, illegible image overlays.
Preview