Design System & Style Guide

This page exists so we can look at every core element the site uses — headings, paragraph text, lists, buttons, images, colors, and spacing — on one page, side by side, on desktop, tablet, and phone. It’s not linked in the site menu; it’s a working reference for spotting and fixing style inconsistencies across the rest of the site.

Typography

Heading 1 — Page Title

Heading 2 — Section Title

Heading 3 — Subsection Title

Heading 4 — Minor Heading

Heading 5 — Small Heading
Heading 6 — Smallest Heading

This is a standard paragraph of body text, styled with the site’s global font and size settings with no manual overrides. Use this paragraph as the baseline for what regular page copy should look like — font family, size, line height, and color should all match this everywhere on the site, on every screen size.

Lists

Bulleted List

  • Climate-controlled storage units
  • 24/7 gated access with individual codes
  • RV, boat, and commercial vehicle parking
  • On-site security cameras and lighting

Numbered List

  1. Choose your unit size and type
  2. Reserve online or call our office
  3. Sign your rental agreement
  4. Move in and get your gate code

Buttons

Standard button style, using the site’s global button settings with no per-page overrides:

Image Styling

Standard content image, no manual size/crop/border overrides:

Inside view showing the front of the property.

Brand Colors

Primary

#132F53

Secondary

#1360BD

Accent

#F9C014

White

#FFFFFF

Black

#000000

Standard Section Spacing

This section uses the site’s most common section padding — 60px top and bottom, 40px left and right on desktop. Compare this breathing room to other sections on the site to spot ones that are cramped or unusually spaced.

Real-World Style Variations Found Across the Site

Everything below uses real headings, buttons, and copy pulled directly from live pages — grouped side by side so you can see, at a glance, how many different versions of each style element are actually in use.

Heading Font — H1 Page Titles

Inter — global default (46 of 56 pages)

Our Storage Solutions

Raleway — override used on 9 pages

Premium RV Storage in Leland

Heading Font — H2 Subheadings

Inter — global default

Large Vehicle Storage

Rajdhani — override used on 49 headings across 10 pages

Water, Wash & Dumping Station

H1 Title Size — Same Element, Six Different Sizes

Every one of these is a page’s main H1 title. Font size ranges from 34px to 77px with no clear pattern tied to page importance.

34px — Homepage, RV Storage, Boat, Cold Storage

Storage With Power & Climate Control

42px — Our Storage Solutions, Contact Us, and 6 others

Our Storage Solutions

47px — Boat Storage, Work Truck Storage

PREMIUM BOAT STORAGE

58px — Work at Powered Storage, Vehicles For Sale

Work at Powered Storage

77px — What Can You Do With 50 Amps?

What Can You Do With 50 Amps?

Button Corner Rounding — Five Different Values in Use

0px — Cold Storage, Business Storage

4px — Global default (Footer only)

5px — RV, Boat, Work Truck, Food Truck

6px — Homepage

8px — Long-Term Parking

Brand yellow — #F9C014 (used almost everywhere)

Off-brand yellow — #F8BF00 (Terms page only)

Section Background Colors In Use

The Cold Storage page uses #0076A3 for its section background — but the site’s own saved ‘Cold Storage’ brand color is a different blue, #00A8E9, shown alongside for comparison.

Navy

#132F53

White

#FFFFFF

Black

#000000

Faint blue A

#2C39F20D

Faint blue B

#2C39F205

Cold Storage page bg

#0076A3

Actual "Cold Storage" brand color (saved global)

#00A8E9

Section Padding — How Much Breathing Room Sections Get

Each box below uses its real, exact padding value pulled from a live section.

60px top/bottom, 40px sides — most common (38 sections)

0px all sides — hero/banner sections (12 sections)

90px top, 30px sides, 0px bottom — (5 sections)

70px top/bottom, 60px sides — (5 sections)

Section Content Width — How Wide Sections Are Set To

Over 20 different content widths are in use site-wide. These bars are drawn to their real relative widths, centered, so you can see how much they vary.

1291px — the de facto standard (34 sections)

1166px (7 sections)

1069px (5 sections)

762px (10 sections)

500px (6 sections)