Nimbus Solutions Brand & Style Guide
The single source of truth for the site's visual language. Click any value to copy it.
Colors mirror the CSS custom properties in assets/scss/main.scss; type
and components render with the live site styles.
Color
Brand palette grouped by role. Each swatch copies either the hex value or the CSS variable.
Palette
The entire brand. Four colors, nothing else; muted text and hairlines are opacities of white.
The one accent — links, buttons, highlights, focus, active states, the blue word in the logo
Raised surfaces — cards, panels, plan tiers, section bands
Page background, deepest surfaces, hover state for cards, text on Nimbus Blue
All text and headings on dark; opacities give muted text (.76) and hairlines (.14)
Typefaces
Two typefaces, strict roles. Oswald (a condensed block sans) carries every heading, the hero, navigation, buttons, and all uppercase labels. Sentient (a serif) is used only for long-form paragraph and body copy. Uppercase is reserved for the header wordmark, the hero, and labels.
Type Scale
Headings, the eyebrow/title/subtitle trio, and body styles, rendered live.
High Speed, Reliable, Local Internet
Reliable wireless internet for Southwest Colorado.
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Body copy sets the baseline for readable paragraphs. Nimbus delivers fast, reliable wireless internet across the Four Corners, backed by local support.
Secondary note text, used for captions and form hints.
Spacing & Layout
Container widths, the section rhythm, and gutters. The standard container is what sets the left/right page margins.
Buttons
Flat, square, uppercase Oswald. Solid Nimbus Blue primary; a blue outline as the secondary, and a white outline (.btn--light) for photo and hero overlays. No gradients or glows.
Tables
Use .brand-table for comparison data, policy disclosures, and technical facts. Headers stay compact and uppercase; values use tabular numerals and a dark, high-contrast surface.
| Plan | Download | Upload | Latency | Price |
|---|---|---|---|---|
| Foothills | Up to 50 Mbps | 5 to 25 Mbps | 20 to 40 ms | $50/mo |
| Mesa | Up to 100 Mbps | 5 to 25 Mbps | 20 to 40 ms | $75/mo |
| Summit | 300 to 800 Mbps | Up to 1 Gbps | 15 to 30 ms | $95/mo |
Voice & Principles
How copy and design decisions get made. The full machine-readable spec is the plain-text version.
Voice & copy
- Customer-forward: lead with the customer's pain (slow/expensive incumbents, contracts, data caps, the big-provider runaround), not with technology jargon.
- Plain, local, confident. Minimal acronyms; keep 'licensed spectrum' and deep tech on the Network page.
- No em-dashes or en-dashes anywhere in copy.
- Customer reviews are verbatim — never edit, trim, reword, or invent reviewer locations.
- Never fabricate facts, names, prices, or coverage. Pull figures from data/ (plans, company) so they stay consistent.
- Restraint over maximalism: clean grids, generous space, one accent (Nimbus Blue) used sparingly. No glows, watermarks, or busy effects.
Design principles
- Dark theme: black page over a fixed night-sky photo background; content sits on Nimbus Grey panels or transparent bands.
- Headings and all UI are Oswald (uppercase for header/hero/labels); serif (Sentient) is reserved for paragraph copy.
- Every image goes through the Hugo pipeline (partial "picture.html" or resources.Get + .Resize); never reference a raw file.
- Reuse global components and tokens (assets/scss/main.scss). Don't add one-off inline styles or per-page CSS.
- Sections: .section (transparent, shows stars), .section--alt / .section--sand (translucent grey bands), .section--black (solid), .section--photo (image + scrim).
- Reveal-on-scroll: add data-reveal to cards/items; the global observer animates them in.