Skip to content

Style Guide

The Alpine Field Guide design system — the shared look for Spokane Mountaineers digital surfaces. It started as the member FAQ page and is now a reusable theme we apply as we convert existing content.

The look: a warm topographic "paper," deep evergreen, a trail-marker rust accent, and an editorial serif (Fraunces) paired with a clean humanist body (Public Sans). Calm, scannable, outdoorsy — a printed field guide, on screen.

Using the theme

One stylesheet, smi-theme.css, holds the tokens and smi- component classes.

  • Docs site — loaded via extra_css in mkdocs.yml. Add class="smi-…" in HTML blocks (this page is the reference).
  • Experience Cloud (LWC) — the same file is mirrored to the smi_theme static resource (just sync-theme keeps the copies identical). Light-DOM components load it with loadStyle; the faqPage LWC is the shadow-DOM reference implementation and uses the same tokens inline.
  • Anywhere else — link smi-theme.css directly (standalone HTML, email).

Tokens are declared on :root, :host, so the file works in a normal document and inside an LWC shadow root unchanged.

Keep the two copies in sync

docs/stylesheets/smi-theme.css is canonical. After editing it, run just sync-theme to mirror it into the Salesforce static resource before deploying.

Color

Brand colors carry meaning — evergreen for structure, rust for emphasis and calls to action, sky for links and information, moss for gentle/secondary notes.

Pine
--smi-pine
#1E4B38
Pine 2
--smi-pine-2
#2C6A4E
Moss
--smi-moss
#6E9173
Rust
--smi-rust
#B14A1E
Sky
--smi-sky
#2C6A8C
Paper
--smi-paper
#F4EFE3
Ink
--smi-ink
#1C2520
Token Use
--smi-pine / --smi-pine-2 / --smi-pine-deep Primary structure, headings, hero gradient
--smi-rust / --smi-rust-soft Accent, warnings, primary buttons
--smi-sky Links, informational notes
--smi-moss Soft/secondary notes, list markers
--smi-paper / --smi-paper-2 / --smi-card Surfaces
--smi-ink / --smi-ink-soft / --smi-ink-faint Text
--smi-line / --smi-line-strong Hairlines, borders

Typography

  • Display — Fraunces (--smi-font-display). High-contrast editorial serif. Headings, hero, numerals.
  • Body — Public Sans (--smi-font-body). Clean and legible at length.
  • Mono — JetBrains Mono (--smi-font-mono). Code and the .smi username token.
Frequently Asked
Section heading
Body copy in Public Sans. The system pairs a characterful display serif with a quiet, readable body so long content stays calm and scannable. Inline tokens like you@example.com.smi use the mono face.

Components

The gallery below renders the actual smi- classes.

Eyebrow + section header

Spokane Mountaineers · Member Help

01

Logging in

Section body introduces the topic in a sentence or two.

Callouts

Warning. Use for the highest-stakes guidance — e.g. renew with your email, never your .smi username.

Note. Use for helpful asides and clarifications.

Tip. Use for optional, nice-to-know guidance.

Table

Setting What you get
Every Post An email every time someone posts to the group
Weekly Digest The past 7 days in a Sunday-morning email

Buttons & tags

Call-to-action

Still need help?

Email membership@spokanemountaineers.org and a club volunteer will help you out.

Principles

  1. Calm and scannable. One idea per section, generous spacing, a clear trailhead (eyebrow → title → rule).
  2. Accent with intent. Rust draws the eye to the few things that matter most — not everything.
  3. Frame the evidence. Screenshots get a consistent border, radius, and shadow (.smi-figure), and enlarge on click.
  4. Motion is a whisper. A single staggered rise on load; everything respects prefers-reduced-motion.
  5. Tokens first. Reach for a --smi-* token, never a raw hex, so a future palette tweak flows everywhere.