Harbor Dusk — Style Guide

01 — Color Palette

The Color Story

Void

#0E0B15

Dusk

#1C1428

Twilight

#2E1A40

Plum

#7B3F6E

Rose

#C45E78

Coral

#E07858

Ember

#F0A848

Blush

#EDCCC5

Mist

#A08898

Pearl

#F5EEF0

02 — Gradients

Color Ramps

Hero

Sky

Plum → Rose

Rose → Ember

03 — Typography

Type System

Display Heading

Section Heading

Body text uses DM Sans at light weight — legible and unobtrusive against deep backgrounds. The mist tone keeps long-form content comfortable without competing with the warm accent palette.

const palette = "Harbor Dusk";

04 — Spacing & Radius

Space & Shape

--space-xs

0.5rem

--space-sm

1rem

--space-md

1.5rem

--space-lg

2.5rem

--space-xl

4rem

sm · 8px

md · 14px

lg · 22px

full

05 — Buttons

Interactive Controls

06 — Form Elements

Form Controls

07 — Cards

Content Cards

◆

Architecture

Towers of glass and steel that catch the last light — from the Art Deco spires of Midtown to One WTC at the harbor's edge.

○

Photography

Golden hour lasts minutes. The warm rose and amber tones of harbor dusk reward the patient eye and the steady hand.

▲

Urban Light

Street lamps flicker on across the waterfront as the sky transitions from coral to deep plum — the city's daily ritual.

08 — Badges & Tags

Status Indicators

Golden Hour Twilight Amber Alert Overcast Waterfront Manhattan Long Exposure RAW f/8 · ISO 400 1/60s

09 — CSS Variables

Quick Reference

/* Copy this :root block into your project */
:root {
  --void:     #0E0B15;
  --dusk:     #1C1428;
  --twilight: #2E1A40;
  --plum:     #7B3F6E;
  --rose:     #C45E78;
  --coral:    #E07858;
  --ember:    #F0A848;
  --blush:    #EDCCC5;
  --mist:     #A08898;
  --pearl:    #F5EEF0;

  --grad-hero: linear-gradient(135deg, #2E1A40, #7B3F6E, #C45E78, #E07858, #F0A848);
  --grad-sky:  linear-gradient(180deg, #2E1A40, #7B3F6E, #C45E78, #E07858, #F0A848);
}
    

10 — Avatars

User Avatars

HD

MK

SA

JT

RL

SA

MK

SA

JT

RL

+3

11 — Alerts & Toasts

Feedback Components

☀

Golden Hour Active

Optimal shooting conditions for the next 18 minutes. Rose and amber light at 4° above the horizon.

◆

Long Exposure Mode

Shutter speed set to 8s. Ensure tripod is locked and mirror lock-up is enabled to minimize vibration.

△

Memory Card Almost Full

48 RAW exposures remaining. Consider switching to JPEG or swapping to your backup card before the light peaks.

✕

GPS Signal Lost

Location metadata will not be embedded in captures until signal is restored. Last known: Hudson River Waterfront.

✓ Image saved to gallery ✕

◆ Export complete — 24 files ✕

△ Battery at 12% — charge soon ✕

12 — Navigation

Nav Bar

13 — Data Tables

Data Display

Landmark	Height	Status	Completed
One World Trade Center	541 m	Landmark	2014
Empire State Building	443 m	Landmark	1931
Chrysler Building	319 m	Historic	1930
30 Hudson Yards	395 m	Modern	2019