Pacific North North

Brand Design System — Alaska-First Adventures

Logo Variations

Header Logo (Horizontal)

Use for: Website header, email signatures, wide layouts

File: PacificNorthNorthHeader.svg

Full Logo (Stacked)

Use for: Print materials, social media, square formats

File: PacificNorthNorthFullLogo.svg

Icon Mark Only

Use for: Favicons, app icons, social media avatars, small spaces

File: PacificNorthNorthInitialLogo.svg

Logo Usage Guidelines

Maintain clear space around logo (equal to height of mountain icon)
Use on white, cream, or dark green backgrounds
Scale proportionally (maintain aspect ratio)
Use SVG format when possible for crisp rendering

Don't

Change logo colors or add effects
Stretch, skew, or distort the logo
Place on busy or low-contrast backgrounds
Add outlines or shadows to the logo

Brand Philosophy

Pacific North North bridges authentic local adventure with premium outdoor brand aesthetics. We draw inspiration from REI, Patagonia, and Alaska Airlines — clean, trustworthy, and aspirational.

Our design language emphasizes: minimalism, natural warmth, Alaska heritage, and collaborative authenticity.

Color Palette

Primary Colors

Forest Green

#0A3740

var(--pnn-green)

Metallic Gold

#B48C2D

var(--pnn-gold)

Warm Cream

#F8F5E9

var(--pnn-cream)

Accent & Utility Colors

Green Dark

#06242A

Footer, overlays

Gold Light

#CBA84A

Hover states

Body Text

#2F3E3C

Desaturated green-gray

Typography

Outfit 800 (Extrabold)

Hero Headlines

Used for: Homepage hero, major page titles

Montserrat 600 (Semibold)

Section Headers

Used for: Section titles, CTA headers

Outfit 500 (Medium)

Navigation Links

Used for: Header nav, menu items

Inter / System Sans

Body text uses a clean system font stack for readability and performance. This paragraph demonstrates the default text style with proper line height and letter spacing for comfortable reading.

Used for: Body copy, descriptions, forms

Buttons

Primary Button

Gold background, white text, shadow-md → shadow-lg on hover

Secondary Button

Transparent with gold border, fills on hover

Component Patterns

Feature Cards

Card Title

Description text with proper line height and color contrast.

Gold Outline Icon

Alternative icon style with gold border for variety.

Consistent Style

Maintain shadow-sm base with shadow-md hover state.

Badges

Juneau, AlaskaApprovedPending

Design Principles

Use subtle shadows and borders for depth
Maintain consistent spacing (16px, 24px, 32px)
Use gold for accents, buttons, and highlights
Keep hero images at 35% opacity with 75% green overlay
Use Lucide React icons with 1.6-1.8 stroke weight
Apply tracking-wide to buttons and nav links

Don't

Use heavy animations or carousels
Mix too many font weights or families
Use pure black (#000) for text
Add emoji or decorative elements
Create harsh gradients or bright colors
Overcomplicate with dark mode toggle (yet)

Layout Guidelines

Max Width

Content containers: max-w-6xl mx-auto

Padding

Standard: px-4 sm:px-6 lg:px-8

Section Spacing

Vertical: py-16 or py-16 md:py-24

Grid Gaps

Cards: gap-6 or gap-8

Border Radius

Cards & buttons: rounded-xl or rounded-lg

Quick Copy Code

CSS Variables

--pnn-green: #0A3740;
--pnn-green-dark: #06242A;
--pnn-green-light: #0D4B57;
--pnn-gold: #B48C2D;
--pnn-gold-light: #CBA84A;
--pnn-gold-hover-dark: #9A7625;
--pnn-cream: #F8F5E9;

Hero with Background Image

<div className="relative border-b overflow-hidden">
  <div className="absolute inset-0 bg-cover bg-center bg-fixed"
       style={{ backgroundImage: "url('/hero.jpg')", opacity: 0.35 }} />
  <div className="absolute inset-0" 
       style={{ backgroundColor: 'rgba(10, 55, 64, 0.75)' }} />
  <div className="relative z-10">
    {/* Content here */}
  </div>
</div>

This brand system ensures every page maintains the Alaska-first, premium outdoor aesthetic of Pacific North North.