Skip to guide
Lightning Bolts

Brand & site system · Version 1.0

One crew.
Every adventure.

The same bolt, a familiar feel, and room for every trip to be itself.

Try the themes Download the kit
The original yellow lightning bolt with dark outline and red offset
LIGHTNING BOLTS

Good dads.
Great adventures.

Built from the main site, Mammoth, O’Neill, Pali, and BoltChella / Lazy River. This is the shared standard for future builds; existing sites keep their current layouts until updated.

The identity.

Warm, adventurous, practical. Real time together is the point.

Original standalone Lightning Bolts logo

One original mark.

Keep the bolt recognizable.

Use the original artwork with its yellow fill, dark outline, and red offset. Preserve its shape and proportions. Leave clear space equal to at least one-quarter of its height.

Use at least 24 px of logo height; 40–52 px works well in a website header. Pair it with “Lightning Bolts” in a clean wordmark. Keep the round badge for existing gear and legacy uses.

Original artClear spaceNo stretchingNo generic bolt icons
Download the original bolt ↗

Colors with a job.

Navy anchors the page. Cream gives it warmth. Yellow points to the next action.

Select a swatch to copy its hex value.

Paper on navy14.31:1 contrast
Navy on yellow10.18:1 contrast
Slate on cream5.34:1 contrast

These pairs exceed 4.5:1 for normal text. Yellow belongs on dark backgrounds or behind dark text. Use red #D5543F sparingly as decoration, never as the only signal for status.

Two typefaces. Clear roles.

A little personality in the headlines. Easy reading everywhere else.

Caveat Brush · Display

Fresh tracks.
Same crew.

Trip titles and selected section headings. Keep it short and use sentence case. Avoid brush lettering in navigation, buttons, schedules, and paragraphs.

DM Sans · Body & interface

Make time
for the good stuff.

Body copy, facts, times, forms and controls. Also use it for the main site’s cleaner headlines. Regular 400, semibold 600, bold 700.

64–104Desktop hero44–64Phone hero36–48Section title20–24Card title16–18Body13–14Small labels

Same family. Different weekends.

Choose a reference to preview its color and type treatment. The logo and yellow action stay consistent.

Live style preview

The days
he’ll remember.

Campouts. Rockets. Races. Time together.

A dad and son on a trail with the Lightning Bolts crew
Crew navy + warm cream · DM Sans headlinesOriginal bolt. One yellow. Clear actions.

Preview only. This control does not submit an RSVP or change an existing trip site.

Snow Ice #DCEBF0 / Alpine #2D6678

Camp Sage #E6EAD8 / Forest #3D5547

River Sand #F4E4CE / Pool #006C70

A familiar way to find things.

Make each trip useful on a phone, with one clear heading per section.

  1. Compact headerBolt + wordmark, up to five local links, one primary action.
  2. One trip introductionName, dates, short promise, real photo, RSVP or calendar action.
  3. Essential factsDeparture, location, lodging and costs. Confirmed details first.
  4. Weekend scheduleDay tabs for longer trips; a simple timeline for shorter events.
  5. The experiencePhotos next to the activities, amenities and links they explain.
  6. Prepare & connectPacking, planning contacts, calendar and one easy RSVP destination.
  7. Quiet footerRelated events at the bottom. The trip stands on its own.

Let the photos do their part.

Start with the crew. Use venue photos for amenities and activities. Keep faces in frame on phones, show each image once, and make galleries optional. Keep source credits in the asset record; display attribution wherever required.

Keep the words useful.

Warm, direct, specific. “Bring a favorite game” beats a paragraph of hype. Use “RSVP,” “What to pack,” and “Your weekend.” Don’t repeat the title in an eyebrow, headline and subtitle.

Only publish what we know.

Explain pending lodging or pricing once. À la carte means not included in Bolts dues. A countdown uses the confirmed time and time zone. If only a date is known, count days without inventing a departure time.

The reusable pieces.

Shared styling, real keyboard behavior, and enough restraint to stay out of the way.

Actions

Get the kit

Use one primary destination. If RSVPs are closed, offer the calendar instead.

Facts

Departure
Thursday · 8 a.m.
Trip costs
À la carte

Short labels, concrete answers. Link addresses to maps and contacts to email or phone.

Day tabs

Departure, arrival, and settling in.

A day of shared adventures.

Use arrows, Home and End. Every day remains readable if JavaScript is unavailable.

Forms & checklists

Visible labels, 16 px input text, and comfortable tap targets. This example does not save or send data.

Space 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 72 / 96 px

Shape 8 px cards · 4 px controls · no heavy shadows

Touch 44 px controls · visible keyboard focus · 16 px body

Motion Brief, purposeful · respect reduced motion · no autoplay

Ready for the next site.

A portable foundation, with local fonts and the original logo included.

Download brand kit Open starter ↗

Start with the shared files.

<link rel="stylesheet" href="brand/tokens.css">
<link rel="stylesheet" href="brand/components.css">
<script defer src="brand/behaviors.js"></script>

<body class="lb-site"
      data-lb-theme="snow"
      data-lb-mode="trip">

Choose crew, snow, camp, or river. Keep project-specific CSS small. Copy the versioned kit into each project so updates are deliberate.