01 — Install

Wire it up in three lines.

The kit ships as Less. Pull in the framework, override the YC option file, and import the components you need. Or just link the compiled yellowstone.css and skip Less entirely.

Less

Recommended for production. Gives you tree-shaking, mixin access, and the ability to override any variable.

// app.less
@import "orca/options";          // Orca defaults
@import "orca/yellowstone";      // YC overrides — colors, type, radii
@import "orca/colors";
@import "orca/modifiers";
@import "orca/plugins/buttons";
@import "orca/plugins/cards";
@import "orca/plugins/forms";
@import "orca/plugins/alerts";
@import "orca/plugins/navigation";

Compiled CSS

For prototypes, marketing pages, or anywhere you don't have a Less pipeline.

<link rel="stylesheet"
  href="https://cdn.windfall.com/yellowstone/yellowstone.css">

<!-- Brand fonts (Adobe). Falls back to Lora / Barlow / Inter. -->
<link rel="stylesheet"
  href="https://use.typekit.net/yourkit.css">

Color Type Spacing Radii & shadow Iconography Buttons Forms Cards Alerts Navigation Feedback Patterns

02 — Foundations / Color

Brand colors and full shade scales.

Hex values and steps match less/colors.less and utility classes in less/shades.less (.-{name}-{step} / .-{name}-{step}-bg). Families: gray, orange, red, yellow (legacy .-gold-* aliases yellow), navy, blue, tan, green, moss, brown, teal. .-primary-* mirrors navy. Page background uses @tan-100 (= @cream). Pure white is for cards and inputs; brand “black” is @granite.

Brand tokens

Each chromatic row uses its 500 step as @{name} (e.g. @yellow → @yellow-500). :root exposes --gray … --teal plus --granite, --cream, --tan-100. Granite has no numbered scale.

Gray

#E6E6E6 · @gray · --gray

Orange

#B36A35 · @orange · --orange

Red

#A8593E · @red · --red

Yellow

#B79340 · @yellow · --yellow

Navy

#33404F · @navy · --navy

Blue

#4F5D74 · @blue · --blue

Tan (mid)

#C6B877 · @tan · --tan

Green

#2D5B3B · @green · --green

Moss

#4D543D · @moss · --moss

Brown

#5B5148 · @brown · --brown

Teal

#599E92 · @teal · --teal

Granite

#252932 · @granite · --granite

Cream / tan-100

#F9F8F1 · @cream · @tan-100 · --cream

Gray scale

Neutrals — borders, dividers, muted text.

000

#fefefe

100

#fdfdfd

200

#f9f9f9

300

#f5f5f5

400

#eeeeee

500

#e6e6e6

600

#cfcfcf

700

#adadad

800

#8a8a8a

900

#717171

Orange scale

000

#fbf8f5

100

#f7f0eb

200

#ecdacd

300

#e1c3ae

400

#ca9772

500

#b36a35

600

#a15f30

700

#865028

800

#6b4020

900

#58341a

Red scale

000

#fbf7f5

100

#f6eeec

200

#e9d6cf

300

#dcbdb2

400

#c28b78

500

#a8593e

600

#975038

700

#7e432f

800

#653525

900

#522c1e

Yellow scale

000

#f8f5ec

100

#f1ead9

200

#e3d4b3

300

#d4bf8d

400

#c6a967

500

#b79340

600

#937634

700

#81672d

800

#655124

900

#4a3b1a

Navy scale

.-primary-000 … .-primary-900 (and -bg) mirror these steps.

000

#ebecee

100

#d7d9dc

200

#aeb3b9

300

#858d96

400

#5c6773

500

#33404f

600

#293440

700

#242d38

800

#1d242c

900

#151a20

Blue scale

Cool slate blue — distinct from navy.

000

#f6f7f8

100

#edeff1

200

#d3d7dc

300

#b9bec7

400

#848e9e

500

#4f5d74

600

#475468

700

#3b4657

800

#2f3846

900

#272e39

Tan scale

Warm field tones; @tan-100 / @cream for large surfaces.

000

#fcfbf8

100

#f9f8f1

200

#f1eddd

300

#e8e3c9

400

#d7cda0

500

#c6b877

600

#b2a66b

700

#958a59

800

#776e47

900

#615a3a

Green scale

000

#f5f7f5

100

#eaefeb

200

#cbd6ce

300

#abbdb1

400

#6c8c76

500

#2d5b3b

600

#295235

700

#22442c

800

#1b3723

900

#162d1d

Moss scale

000

#f6f6f5

100

#edeeec

200

#d3d4cf

300

#b8bbb1

400

#828777

500

#4d543d

600

#454c37

700

#3a3f2e

800

#2e3225

900

#26291e

Brown scale

000

#f7f6f6

100

#efeeed

200

#d6d4d1

300

#bdb9b6

400

#8c857f

500

#5b5148

600

#524941

700

#443d36

800

#37312b

900

#2d2823

Teal scale

000

#f7fafa

100

#eef5f4

200

#d6e7e4

300

#bdd8d3

400

#8bbbb3

500

#599e92

600

#508e83

700

#43776e

800

#355f58

900

#2c4d48

// less/colors.less — @gray-000 … @teal-900, @granite, @cream
// less/shades.less — .-gray-500, .-navy-700-bg, .-yellow-300, …

@import "colors";
@import "shades";

@primary: @navy;
@accent:  @yellow;
@light:   @tan-100;
@black:   @granite;

03 — Foundations / Type

Two families. Italic does the heavy lifting.

Editorial serif (Bookmania) for display, Trade Gothic for body, DIN Condensed for ALL CAPS eyebrows and small UI labels. Italic Bookmania is the brand's signature interior emphasis.

.display-xl
Bookmania 600 / 88px / -2%

It's an entire country.

.display-l
Bookmania 600 / 64px / -1.5%

From quiet springs to golden autumns.

h1
Bookmania 600 / 48px

Plan your trip to Yellowstone Country.

h2
Bookmania 500 / 36px

Three of Montana's biggest ski areas.

h3
DIN Condensed 700 / 13px / 0.2em / UPPER

Year-Round Exploration

.eyebrow
DIN Condensed 700 / 11px / 0.2em

Cultural Heritage · Public Art · Oral History

.pillar-tag
DIN Condensed 700 / 13px / yellow

+ Captivating Landscapes

.lead
Trade Gothic 400 / 20px / 1.6

We help visitors plan their trip to one of the most special places in the country — and remind ourselves how lucky we are to live here.

body
Trade Gothic 400 / 16px / 1.65

Simply being perched on the edge of Yellowstone National Park would be enough to make that claim — but there's more. A lot more. From the quiet springs to the golden autumns, the quintessential summer adventures to the world-class winter recreation, there is always something to do.

.caption
Trade Gothic Condensed 500 / 12px / 0.1em

PHOTO · STILLWATER COUNTY, MT

// orca/yellowstone.less — type stack
@font-serif: 'Bookmania', 'Lora', Georgia, serif;
@font-sans:  'trade-gothic-next', 'Inter', system-ui, sans-serif;
@font-cond:  'urw-din-condensed', 'Barlow Condensed', sans-serif;

// Modular scale, ratio 1.25
@text-xs: 12px; @text-sm: 14px; @text-md: 16px;
@text-lg: 20px; @text-xl: 24px; @text-2xl: 32px;
@text-3xl: 48px; @text-4xl: 64px; @text-5xl: 88px;

04 — Foundations / Spacing

A 90-pixel page edge is part of the brand.

The recurring 90px gutter where tan meets photography is a brand signature — preserve it. Inside content blocks, use the standard 4-based scale.

Scale

Base-4 with brand-specific 90 / 120 for layout-level gutters.

--space-1 4px

--space-2 8px

--space-3 12px

--space-4 16px

--space-5 24px

--space-6 32px

--space-7 48px

--space-8 64px

--space-9 90px

--space-10 120px

Layout primitives

Token	Use	Value
`page-gutter`	Side margin on full-bleed pages	90 / 120px
`header-h`	Fixed header / footer band	90px
`content-max`	Editorial column max-width	1280px
`section-y`	Vertical rhythm between sections	100px
`card-pad`	Inside card padding	24px
`field-pad`	Form-field padding	12px 16px

05 — Foundations / Radius & Shadow

Three radii. Shadows on hover, not at rest.

The 25px page-edge radius is the recognizable one. Cards stay 16px. Pills are reserved for primary CTAs. Shadows are restrained — a hairline border does most of the work.

Radii

small

8px · --r-sm

card

16px · --r-md

hero edge

25px · --r-lg

pill

9999px · --r-pill

Shadow

A hairline border is the default elevation cue. Add a soft shadow on hover, or a stronger one to anchor the primary CTA.

--shadow-0 (rest)

--shadow-1 (hover)

--shadow-2 (cta)

06 — Foundations / Iconography

Ionicons (v2 · iOS). No emoji, ever.

UI chrome uses Ionicons v2 with the ion-ios-* set — loaded via the same CDN already pulled in by the compiled CSS. Pair .ico with a glyph class and set size with font-size (the icon inherits currentColor).

arrow-right

arrow-left

chevron-right

chevron-down

plus

check

close

search

world

compass

star

heart

menu

play

info

alert

sun

snow

flower

calendar

user

<!-- Ionicons v2: add @import or link to ionicons.min.css, then: -->
<i class="ico ion-ios-arrow-forward" style="font-size:16px" aria-hidden="true"></i>

Glyphs you'll see in copy: • for separators, + for pillar tags, → for nav. Always at body weight, never colored.

07 — Components / Buttons

Pill primary, ghost everywhere else.

The primary CTA is a tan-on-navy pill with a soft drop shadow. Secondary actions are ghost outlines or quiet text links. ALL CAPS condensed sans is reserved for compact CTAs in dense interfaces.

<button class="btn btn-primary">Plan Your Trip <i class="ico ion-ios-arrow-forward" style="font-size:16px"></i></button>
<button class="btn btn-secondary">View Itinerary</button>
<button class="btn btn-ghost">Learn More</button>
<button class="btn btn-link">Read the story</button>

<button class="btn btn-primary -lg">Book Now</button>
<button class="btn btn-primary">Book Now</button>
<button class="btn btn-primary -sm">Book Now</button>

<button class="btn btn-cta">Love Montana Back</button>
<button class="btn btn-secondary -yellow">Get the Guide</button>
<button class="btn btn-icon" aria-label="Search"><i class="ico ion-ios-search" style="font-size:16px"></i></button>

States

Class	Use
`.btn-primary`	Tan-on-navy pill with shadow. The page's primary action.
`.btn-secondary`	Outlined navy. Pair with primary, or use alone for medium-weight calls.
`.btn-ghost`	No fill. Tertiary actions, or primary on photography.
`.btn-link`	Inline link styling, navy → yellow on hover.
`.btn-cta`	ALL CAPS condensed yellow pill. Reserved for "Love Montana Back"-style brand moments.
`.-lg` / `.-sm`	Size modifiers.
`.-yellow`	Recolor any button to the yellow accent.

08 — Components / Forms

Forms

Open inputs, ALL CAPS labels, yellow focus rings. Validation messages are plain prose, not red exclamation points.

Your trip is in the works

We'll send a personalized itinerary in the next few days. In the meantime, take a look at our seasonal guide.

09 — Components / Cards

A YC card is a real card.

White on tan, hairline border, 16–25px radius, photograph at top, yellow eyebrow, navy title, muted body, chevron CTA. No colored top stripes, no left accent borders, no gradient glows.

Park County, MT

Pillar 1

Captivating Landscapes

From the quiet springs to the golden autumns, the wonders never stop arriving.

Read the story

Bozeman, MT

Pillar 2

Western Hospitality

Five counties, dozens of towns, one shared way of welcoming people in.

Read the story

Big Sky, MT

Pillar 3

Year-Round Exploration

Three of Montana's biggest ski areas, plus everything in between.

Read the story

3-day itinerary

A Long Weekend in Paradise Valley

Hot springs, fly-fishing on the Yellowstone, dinner at the Murray. Built for first-time visitors.

View itinerary

+ Responsible Recreation

Love Montana Back

Eight small things every visitor can do to leave Yellowstone Country better than they found it.

Take the pledge

<article class="card">
  <div class="card-media">
    <img src="..." alt="">
    <span class="card-credit">Park County, MT</span>
  </div>
  <div class="card-body">
    <span class="eyebrow">Pillar 1</span>
    <h3 class="card-title">Captivating Landscapes</h3>
    <p class="card-text">…</p>
    <a class="card-link" href="#">Read the story →</a>
  </div>
</article>

10 — Components / Alerts

Quiet messages, mostly plainspoken.

Alerts use a thin left accent (::before) in the relevant brand color and ALL CAPS condensed labels. Avoid red panic-states; the brand prefers calm prose with a clear next step.

Trail Conditions

Beartooth Pass is open seasonally. Check conditions before you go.

Booked

Your itinerary has been saved. Check your email for the full guide.

Bear Country

Carry bear spray on every hike. Store food in approved containers.

Park Closed

The road from Mammoth to Norris is closed for the winter.

<div class="alert alert-info">
  <i class="ico ion-ios-information" style="font-size:18px" aria-hidden="true"></i>
  <div>
    <strong>Trail Conditions</strong>
    <p>Beartooth Pass is open seasonally.</p>
  </div>
</div>

11 — Components / Navigation

Header, breadcrumb, tabs, pagination.

The top nav is fixed at 90px on tan, yellow underline on the active item. Tabs are ALL CAPS condensed with a 2px yellow rule. Breadcrumbs use • as separator.

Header

Breadcrumb

Pagination

Tabs

Fewer crowds, baby wildlife, waterfalls, wildflowers, biking in the park.

The quintessential summer adventures — Yellowstone, the Beartooths, fishing on the Yellowstone, farmers markets in every town.

Golden cottonwoods along the rivers. Fewer visitors. The elk rut at dusk. The best season for locals.

Three of Montana's biggest ski areas, snowcoach tours into Yellowstone, geysers steaming against snow.

Footer

12 — Components / Data

Tables and tags.

Tables use ALL CAPS condensed headers, tan zebra striping, and hairline rules — same vocabulary as cards. Tags come in three sizes and four tones.

Trail	Town	Distance	Elevation	Season
Lava Lake	Big Sky	5.8 mi	1,640 ft	Jun – Oct
Pine Creek Falls	Livingston	2.6 mi	720 ft	May – Nov
Beartooth Lake Loop	Cooke City	4.1 mi	410 ft	Jul – Sep
Hyalite Peak	Bozeman	11.4 mi	3,470 ft	Jul – Oct
Sacagawea Peak	Bridger	4.6 mi	2,000 ft	Jul – Sep

Modals, drawers, toasts — quietly.

Overlays use a navy scrim with a 2px blur. Drawers slide in from the right at 480px wide. Toasts stack bottom-right with a hairline border in the tone color.

Press Esc to dismiss any open overlay.

Modal

<div class="overlay">
  <div class="modal">
    <button class="modal-close"/>
    <h3>Subscribe</h3>
    <p>One email a month. Unsubscribe any time.</p>
    <input class="input" placeholder="you@example.com"/>
    <button class="btn btn-primary">Sign me up</button>
  </div>
</div>

Drawer

<aside class="drawer is-open">
  <header class="drawer-head">
    <span class="eyebrow">Itinerary</span>
    <button class="btn-icon"/>
  </header>
  <ul class="drawer-list">…</ul>
</aside>

14 — Patterns

A few real assemblies.

Pre-built compositions you'll reach for again and again — hero, listing row, pillar grid, footer CTA. All built from components above.

Hero — full-bleed photography

+ Year-Round Exploration

There is always something to do.

From the quiet springs to the golden autumns, the quintessential summer adventures to the world-class winter recreation.

Plan Your Trip Watch the film

Photo · Stillwater County

Pillar grid

+ Captivating Landscapes

Natural Wonders

Quite frankly, there is nowhere else like it in the country.

Learn more

+ Western Hospitality

Vibrant Communities

We help visitors plan their trip — and remind ourselves how lucky we are.

Learn more

+ Premier Outdoor Adventures

Year-Round Exploration

Three of Montana's biggest ski areas, plus everything in between.

Learn more

+ Essential Preservation

Responsible Recreation

Eight small things every visitor can do to leave it better than they found it.

Learn more

Listing row — search results

Park County

Footer CTA

+ Responsible Recreation

Love Montana back.

Eight small things every visitor can do to leave Yellowstone Country a little better than they found it.

Take the pledge

Yellowstone Country, built on Orca.

Wire it up in three lines.

Brand colors and full shade scales.

Two families. Italic does the heavy lifting.

It's an entire country.

From quiet springs to golden autumns.

Plan your trip to Yellowstone Country.

Three of Montana's biggest ski areas.

Year-Round Exploration

A 90-pixel page edge is part of the brand.

Three radii. Shadows on hover, not at rest.

Ionicons (v2 · iOS). No emoji, ever.

Pill primary, ghost everywhere else.

Forms

Your trip is in the works

Quiet inputs. Gold focus.

Plan a Trip

A YC card is a real card.

Captivating Landscapes

Western Hospitality

Year-Round Exploration

A Long Weekend in Paradise Valley

Love Montana Back

Quiet messages, mostly plainspoken.

Header, breadcrumb, tabs, pagination.

Tables and tags.

Modals, drawers, toasts — quietly.

A few real assemblies.

There is always something to do.

Natural Wonders

Vibrant Communities

Year-Round Exploration

Responsible Recreation

Pine Creek Falls

Saturday Farmers Market

Lone Peak Tram

Love Montana back.

It's an entire country.

From quiet springs to golden autumns.

Plan your trip to Yellowstone Country.

Three of Montana's biggest ski areas.

Year-Round Exploration

Your trip is in the works

Plan a Trip

Captivating Landscapes

Western Hospitality

Year-Round Exploration

A Long Weekend in Paradise Valley

Love Montana Back

Get the seasonal guide.

There is always something to do.

Natural Wonders

Vibrant Communities

Year-Round Exploration

Responsible Recreation

Pine Creek Falls

Saturday Farmers Market

Lone Peak Tram

Love Montana back.