HLW Brand Kit — Harbor Lights West

Color Palette

Click any hex to copy to clipboard

Primary Palette

Forest

HEX #144036 RGB 20, 64, 54 --forest

Teal

HEX #1c5e4f RGB 28, 94, 79 --teal

Orange

HEX #e3612e RGB 227, 97, 46 --orange

Amber

HEX #e0a83e RGB 224, 168, 62 --amber

Seafoam

HEX #b3d1b5 RGB 179, 209, 181 --seafoam

Neutral Palette

Cream

HEX #f7f2e3 --cream · Page background

Cream Card

HEX #fffdf7 --cream-card · Card backgrounds

Ink

HEX #22322c --ink · Body text

Muted

HEX #5d6f66 --muted · Secondary text

Gradients

Forest Gradient (Primary)

linear-gradient(135deg, #144036 0%, #1c5e4f 60%, #206b58 100%)

Sunset Gradient (Accent)

linear-gradient(135deg, #e3612e 0%, #e0a83e 100%)

Seafoam Gradient (Subtle)

linear-gradient(135deg, #b3d1b5 0%, #f7f2e3 100%)

Typography

Two typefaces — Fraunces for display, Source Sans 3 for body copy

Fraunces ↗ Source Sans 3 ↗

Fraunces

Headings · Titles · Display · Numbers

Optical size: 9–144 · Serif

Display

3rem / 700
Letter: -.02em

Harbor Lights

H1

2rem / 600
Letter: -.015em

Board Member Portal

H2

1.5rem / 600

Reserve Fund Analysis

H3

1.15rem / 600

Elevator Modernization Project

Stat

2.4rem / 700
Numbers

$284,500 reserve balance

Card

1rem / 500

Meeting Minutes Archive · 4421 Greenwood

Source Sans 3

Body · UI · Labels · Captions · Navigation

Weights: 300–700 · Sans-serif

Lead

1.1rem / 400

Access all board tools, property information, and meeting resources from one secure location.

Body

0.97rem / 400

The reserve study indicates that current funding levels are adequate for planned capital improvements through fiscal year 2028, including the elevator modernization and parking garage resurfacing.

UI

0.85rem / 500

29 Units · 2 Buildings · ~1988 · RCW 64.34 · Seattle, WA 98103

Caption

0.78rem / 400

Last updated August 2026 · Source: Reserve Study 2024 · Prepared for board review

Label

0.72rem / 700
Uppercase

Reserve Balance · Annual Assessment · Fiscal Year 2026

Google Fonts import:

https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Source+Sans+3:wght@400;500;600;700&display=swap

Logo & Mark

Official brand mark — drawbridge, loon & mountain emblem. Click to download each variant.

Brand Mark Variants

Full Logo — On Dark

On forest/gradient backgrounds

Full Logo — Color

On cream/white backgrounds

Circle Badge

App icon, favicon, badges

Wordmark

Letters, emails, documents

Clear Space & Minimum Size

Always maintain a clear space equal to approx. 25% of total mark height on all sides. Minimum display size: 32px (circle badge) · 120px wide (full logo) · 160px wide (wordmark). Do not stretch, skew, recolor, or place on backgrounds with insufficient contrast.

UI Components

Reusable elements for board documents, notices, and digital communications

Buttons

Status Badges

Active In Progress Pending Overdue Complete Board Meeting

Status Indicators

Fully funded Review needed Action required Inactive

Cards

Reserve Fund

Current balance adequate for planned capital improvements through FY2028.

Board Meeting Tonight

Agenda includes elevator bids, reserve study update, and rule enforcement.

Form Inputs

Alerts & Notices

ℹ️ Reserve study has been updated for 2026.

⚠️ 3 units have outstanding assessments due.

🚫 Delinquency threshold exceeded — action required.

Background Pairings

Forest bg

White or Amber text

Cream bg

Forest or Ink text

Amber bg

Forest text only

Seafoam bg

Forest or Teal text

CSS Variables

Paste into any stylesheet — all portal pages already include these

        
      
/* Harbor Lights West — Brand CSS Variables *//* 4421 & 4425 Greenwood Ave N, Seattle, WA 98103 *//* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  /* ── Core Colors ── */--forest:    #144036;   /* primary dark green */--teal:      #1c5e4f;   /* secondary teal */--teal-mid:  #206b58;   /* gradient midpoint */--orange:    #e3612e;   /* warm accent */--seafoam:   #b3d1b5;   /* soft green accent */--amber:     #e0a83e;   /* gold / highlight *//* ── Neutrals ── */--cream:     #f7f2e3;   /* page background */--cream-card:#fffdf7;   /* card backgrounds */--ink:       #22322c;   /* body text */--muted:     #5d6f66;   /* secondary text */--line:      rgba(20,64,54,.16); /* borders/dividers *//* ── Primary Gradient ── */--grad:      linear-gradient(135deg,#144036 0%,#1c5e4f 60%,#206b58 100%);

  /* ── Typography ── */--font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Source Sans 3', ui-sans-serif, system-ui, sans-serif;

  /* ── Spacing / Radius ── */--radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  /* ── Shadows ── */--shadow-card:       0 4px 24px rgba(20,64,54,.10);
  --shadow-card-hover: 0 12px 40px rgba(20,64,54,.16);
}
    

Usage Guidelines

For board communications, notices, and community-facing materials

✅ Do

Use Forest (#144036) as the primary brand color
Use Fraunces for all headings and display text
Use Source Sans 3 for body copy and UI labels
Use the official brand mark as provided
Maintain clear space around the mark
Use Amber to highlight key actions or stats
Use Cream (#f7f2e3) for page backgrounds

🚫 Don't

Recolor or alter the brand mark
Stretch or skew the mark or wordmark
Use Orange as a background color
Place the mark on a busy photograph
Use any other fonts in official communications
Use bright white as a page background (use Cream)
Create unauthorized color combinations

📌 Use Cases

Notices: Forest header + Cream body
Emails: Wordmark lockup at top
Meeting minutes: Standard wordmark
Portal pages: Forest gradient header
Print: Use mark-on-light variant
Letterhead: Full wordmark + address