NZO Design System · Style Guide

Foundations

Logos

Three variants. V1 (black) on white/light. V3 (white) on dark/maroon. V2 (red) for brand moments only. Always use SVG for digital.

V1 — Black + Feather

SVG ↓ PNG ↓

V2 — All Red

SVG ↓ PNG ↓

V3 — White + Feather

SVG ↓ PNG ↓

Foundations

Colors

The complete NZO palette. Use only these values — no exceptions. All defined as CSS tokens in nzo-master-styles.css.

Brand Colors

NZO Red

HEX#84251F

RGB132, 37, 31

CMYK0, 72, 77, 48

HSLhsl(3, 62%, 32%)

HSB3°, 77%, 52%

Token--nzo-red

NZO Red Hover

HEX#57140F

RGB87, 20, 15

CMYK0, 77, 83, 66

HSLhsl(3, 71%, 20%)

HSB3°, 83%, 34%

Token--nzo-red-hover

Near Black

HEX#121212

RGB18, 18, 18

CMYK0, 0, 0, 93

HSLhsl(0, 0%, 7%)

HSB0°, 0%, 7%

Token--nzo-black

White

HEX#FFFFFF

RGB255, 255, 255

CMYK0, 0, 0, 0

HSLhsl(0, 0%, 100%)

HSB0°, 0%, 100%

Token--nzo-white

Neutral Backgrounds

Light Gray

HEX#F3F3F3

RGB243, 243, 243

CMYK0, 0, 0, 5

HSLhsl(0, 0%, 95%)

HSB0°, 0%, 95%

Token--nzo-gray-light

Border

HEX#E3E3E3

RGB227, 227, 227

CMYK0, 0, 0, 11

HSLhsl(0, 0%, 89%)

HSB0°, 0%, 89%

Token--nzo-gray-border

Muted Text

HEX#5C5C5C

RGB92, 92, 92

CMYK0, 0, 0, 64

HSLhsl(0, 0%, 36%)

HSB0°, 0%, 36%

Token--nzo-gray-muted

Star Gold

HEX#F79E1B

RGB247, 158, 27

CMYK0, 36, 89, 3

HSLhsl(38, 93%, 54%)

HSB38°, 89%, 97%

Token--nzo-star

Dark Accent Backgrounds — Use Sparingly

Section Dark

HEX#2A2A2A

RGB42, 42, 42

CMYK0, 0, 0, 84

HSLhsl(0, 0%, 16%)

HSB0°, 0%, 16%

Token--nzo-section-dark

Header Dark

HEX#292929

RGB41, 41, 41

CMYK0, 0, 0, 84

HSLhsl(0, 0%, 16%)

HSB0°, 0%, 16%

Token--nzo-header-dark

Gray Subtle

HEX#7B7B7B

RGB123, 123, 123

CMYK0, 0, 0, 52

HSLhsl(0, 0%, 48%)

HSB0°, 0%, 48%

Token--nzo-gray-subtle

Disabled

HEX#C9C9C9

RGB201, 201, 201

CMYK0, 0, 0, 21

HSLhsl(0, 0%, 79%)

HSB0°, 0%, 79%

Token--nzo-disabled

Foundations

Typography

One font: Figtree by Erik Kennedy. Free via Google Fonts ↗ (SIL Open Font License). No other typefaces permitted.

Typeface

Figtree

Variable font · Weights 400–900 available · SIL Open Font License

NZO uses: 400 Regular · 700 Bold · 900 Black

Download from Google Fonts ↗

Eyebrow / KickerFigtree 700 · 12px
Uppercase · ls +0.18em
Color: #84251F

Backpacking Essentials

Display / H1Figtree 700 · 48px
Uppercase · ls −0.03em
LH 1.05 · Color: #121212

Near Zero

Section Heading / H2Figtree 700 · 36px
Uppercase · ls −0.03em
LH 1.1 · Color: #121212

Shop the Bundles

Card Heading / H3Figtree 700 · 24px
Uppercase · ls −0.03em
LH 1.15 · Color: #121212

Ultralight Bundle

Body LargeFigtree 400 · 18px
Normal case · LH 1.6
Color: #121212

Built for the trail. Made to last a lifetime without the weight penalty.

BodyFigtree 400 · 16px
Normal case · LH 1.7
Color: #121212

Ultralight gear engineered for the people who go further, stay longer, and demand more from their equipment. Every gram is intentional.

Button / LabelFigtree 700 · 13px
Uppercase · ls +0.14em
Color: #121212 or #fff

Shop the Collection

Small / CaptionFigtree 500 · 12px
Normal case
Color: #5C5C5C

Free shipping on orders over $75 · Lifetime warranty included

Real-World Typography Examples

Best Seller · Backpacking

Ultralight
Sleep System

Down to 15°F. Compresses to the size of a water bottle. The last sleeping bag you'll ever need on the trail.

Shop Now

Product Hero — White BG

Join 12,000+ Adventurers

Go Further.
Stay Longer.

Get exclusive gear drops, trail tips, and early access to sales. No spam. Ever.

Join the List

Newsletter CTA — Dark BG

Near Zero

Trail Cooking Kit

$89.00

Titanium · 4.2 oz · Includes spork

★★★★★ 4.9 (238 reviews)

Add to Cart

Product Card

Memorial Day Sale · Ends Monday

Up to 30% Off
Sitewide

Our biggest sale of the year. All bundles, sleeping systems, and cooking kits included.

Shop the Sale

Promotional Banner — Brand Red BG

Foundations

Buttons

Sharp corners only (radius 0). Figtree Bold, uppercase, ls 0.12–0.14em. Three types × three sizes × five states.

Anatomy of a Button

Sizes

SM Button Text → 11px / 10px 20px

MD Button Text → 13px / 14px 32px

LG Button Text → 15px / 18px 40px

Typography

Font FamilyFigtree, sans-serif

Font Weight700 (Bold)

TransformUPPERCASE

Letter SpacingSM 0.12em · MD/LG 0.14em

Color#FFFFFF always on solid

Text Deconone

Behavior

↖Cursor: pointer

⇔Display: inline-flex

⊕Align items: center

↔Gap: 6px (text + icon)

↦White-space: nowrap

⏱Transition: bg, border, ls 0.2s ease

States (Solid)

Default Button →

Hover Button →

Active Button →

Disabled Button →

Button styles may vary by type (solid/outline/text) and state. This diagram represents the Solid Primary button. See matrices below for all variants.

Component Breakdown

Core Elements

Text — Primary content conveying the button's purpose. Always uppercase, Figtree Bold.
Text Size — SM 11px · MD 13px · LG 15px. Size scales with context, never below 11px.
Text Weight — Always 700 (Bold). Never Regular inside a button.
Background Color — Solid fill. Primary: #84251F. Hover: #57140F. Active: #3d0d09. Disabled: #C9C9C9.
Icon — Optional. Arrow (→) or Material Symbol. Always 6px gap from text. Inherits color.

Padding & Spacing

Padding Top/Bottom — SM 10px · MD 14px · LG 18px. Vertical breathing room around label.
Padding Left/Right — SM 20px · MD 32px · LG 40px. Horizontal extent determines click target size.
Outer Margin — Min 8px between adjacent buttons. 16px between button and form fields.
Min Touch Target — 44×44px per WCAG 2.5.5. SM buttons satisfy this at full width on mobile.

Shape & Border

Corner Radius — Always 0px. NZO identity is sharp, architectural. No rounded or pill shapes.
Border — Always 1px solid. Solid buttons: transparent border (maintains layout stability). Outline buttons: #84251F. Reversed: #FFFFFF.
Border on hover — Outline buttons fill background on hover; border stays visible. Solid buttons border stays transparent.

Shadow

Default — No box-shadow on primary solid buttons. Flat and confident.
Active/pressed — inset 0 2px 4px rgba(0,0,0,0.2) — creates a pressed/recessed appearance.
Outline active — inset 0 2px 4px rgba(0,0,0,0.15)
Never use — Elevation shadows (drop-shadow) on buttons. They conflict with Dawn's flat UI language.

Hover State

Solid hover — Background darkens: #84251F → #57140F. Text stays #FFFFFF. Border stays transparent.
Outline hover — Background fills to #84251F. Text changes to #FFFFFF. Creates a solid button appearance.
Text/link hover — Color darkens: #84251F → #57140F. Underline remains. No background added.
Transition — background 0.2s ease, border-color 0.2s ease

Active State

Solid active — Background: #3d0d09 (deepest red). Inset shadow applied. Text stays #FFFFFF.
Outline active — Background: #57140F. Text: #FFFFFF. Inset shadow: 0 2px 4px rgba(0,0,0,0.15).
Visual goal — Button appears physically pressed/depressed. Darker + inset shadow achieves this.
Duration — Instant on press (transition: none acceptable for :active).

Disabled State

Background — #C9C9C9 (neutral gray). Communicates inactivity without brand color.
Text — #FFFFFF on solid. #C9C9C9 on outline. Never brand red when disabled.
Cursor — not-allowed. Clear affordance that interaction is blocked.
Pointer events — pointer-events: none on all disabled buttons to prevent JS handlers firing.
Opacity — 0.8 to soften, not to signal disabled (color does that).

Loading State

Visual — Spinner (14×14px, CSS animation) prepended to label text. Label fades to 70% opacity.
Spinner — 2px border, top-color animates at 0.7s linear. White on solid buttons, red on outline.
Background — Unchanged from default state (maintains button footprint, no layout shift).
Cursor — wait. Pointer events blocked.
Implementation — Add .is-loading class via JS on click. Remove on response.

Solid Buttons (Primary)

Size	Default	Hover	Disabled	Active	Loading
Small	Default	Hover	Disabled	Active	Loading
Medium	Default	Hover	Disabled	Active	Loading
Large	Default	Hover	Disabled	Active	Loading

Outline Buttons (Secondary)

Size	Default	Hover	Disabled	Active	Loading
Small	Default	Hover	Disabled	Active	Loading
Medium	Default	Hover	Disabled	Active	Loading
Large	Default	Hover	Disabled	Active	Loading

Text / Link Buttons

Size	Default	Hover	Disabled	Active	Loading
Small	Default	Hover	Disabled	Active	Loading…
Medium	Default	Hover	Disabled	Active	Loading…
Large	Default	Hover	Disabled	Active	Loading…

Animated Button Effects

Shop Now Effect 1 — Expand Lines

Shop Now Effect 2 — Light Sweep

Hover the buttons above to preview animations. See CSS Reference below for implementation code.

Complete CSS Reference — All Button Variants & States

nzo-buttons.css — NZO Button System

CSS

/* ─────────────────────────────────────────────────────
   NZO BUTTON SYSTEM — Complete CSS Reference
   Font: Figtree (Google Fonts)
   All corners: radius 0 (sharp)
   Typography stays #FFFFFF on hover + active for solid/outline
───────────────────────────────────────────────────── */

/* ── Base ── */
.nzo-btn {
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  color: #ffffff;
  transition: background 0.2s ease, border-color 0.2s ease, letter-spacing 0.2s ease;
}

/* ── Sizes ── */
.nzo-btn--sm  { font-size: 11px; letter-spacing: 0.12em; padding: 10px 20px; }
.nzo-btn--md  { font-size: 13px; letter-spacing: 0.14em; padding: 14px 32px; }
.nzo-btn--lg  { font-size: 15px; letter-spacing: 0.14em; padding: 18px 40px; }

/* ══════════════════════════════════════════════════
   SOLID (PRIMARY)
══════════════════════════════════════════════════ */
.nzo-btn--solid { background: #84251F; color: #ffffff; border-color: #84251F; }

.nzo-btn--solid:hover  { background: #57140F; color: #ffffff; border-color: #57140F; }
.nzo-btn--solid:active { background: #3d0d09; color: #ffffff; border-color: #3d0d09;
                         box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }
.nzo-btn--solid:disabled,
.nzo-btn--solid[disabled] { background: #C9C9C9; color: #ffffff; border-color: #C9C9C9;
                             cursor: not-allowed; opacity: 0.8; pointer-events: none; }
.nzo-btn--solid.is-loading { background: #84251F; color: rgba(255,255,255,0.7);
                              border-color: #84251F; cursor: wait; pointer-events: none; }

/* ══════════════════════════════════════════════════
   OUTLINE (SECONDARY)
══════════════════════════════════════════════════ */
.nzo-btn--outline { background: transparent; color: #84251F; border-color: #84251F; }

.nzo-btn--outline:hover  { background: #84251F; color: #ffffff; border-color: #84251F; }
.nzo-btn--outline:active { background: #57140F; color: #ffffff; border-color: #57140F;
                            box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); }
.nzo-btn--outline:disabled,
.nzo-btn--outline[disabled] { background: transparent; color: #C9C9C9; border-color: #C9C9C9;
                               cursor: not-allowed; pointer-events: none; }
.nzo-btn--outline.is-loading { background: transparent; color: rgba(132,37,31,0.5);
                                border-color: rgba(132,37,31,0.5); cursor: wait; pointer-events: none; }

/* Outline reversed (on dark/red backgrounds) */
.nzo-btn--outline-reversed { background: transparent; color: #ffffff; border-color: #ffffff; }
.nzo-btn--outline-reversed:hover  { background: #ffffff; color: #84251F; border-color: #ffffff; }
.nzo-btn--outline-reversed:active { background: rgba(255,255,255,0.85); color: #84251F; }

/* ══════════════════════════════════════════════════
   TEXT / LINK
══════════════════════════════════════════════════ */
.nzo-btn--text { background: transparent; color: #84251F; border-color: transparent;
                 text-decoration: underline; text-underline-offset: 3px; padding-left: 0; padding-right: 0; }
.nzo-btn--text:hover  { color: #57140F; text-decoration: underline; }
.nzo-btn--text:active { color: #3d0d09; }
.nzo-btn--text:disabled,
.nzo-btn--text[disabled] { color: #C9C9C9; cursor: not-allowed; pointer-events: none; }
.nzo-btn--text.is-loading { color: rgba(132,37,31,0.5); cursor: wait; pointer-events: none; }

/* Text reversed (on dark backgrounds) */
.nzo-btn--text-reversed { color: #ffffff; background: transparent; border-color: transparent;
                           text-decoration: underline; text-underline-offset: 3px; padding-left: 0; padding-right: 0; }
.nzo-btn--text-reversed:hover  { color: rgba(255,255,255,0.7); }

/* ══════════════════════════════════════════════════
   LOADING SPINNER
══════════════════════════════════════════════════ */
.nzo-btn__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: nzo-spin 0.7s linear infinite;
}
.nzo-btn__spinner--red {
  border-color: rgba(132,37,31,0.2);
  border-top-color: #84251F;
}
@keyframes nzo-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════
   ANIMATION EFFECT 1 — Expand Lines
   Horizontal lines animate in from center on hover.
   Use on reversed (white text) buttons.
══════════════════════════════════════════════════ */
.nzo-anim-btn--expand {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 14px 32px;
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  position: relative;
  border-radius: 0;
  transition: letter-spacing 0.28s ease-in-out;
}
.nzo-anim-btn--expand:hover,
.nzo-anim-btn--expand:active {
  letter-spacing: 5px;
  color: #ffffff;
}
.nzo-anim-btn--expand::before,
.nzo-anim-btn--expand::after {
  backface-visibility: hidden;
  border: 1px solid rgba(255,255,255,0);
  bottom: 0;
  content: "";
  display: block;
  margin: 0 auto;
  position: relative;
  transition: all 280ms ease-in-out;
  width: 0;
}
.nzo-anim-btn--expand:hover::after,
.nzo-anim-btn--expand:hover::before {
  backface-visibility: hidden;
  border-color: #ffffff;
  transition: width 350ms ease-in-out;
  width: 70%;
}
.nzo-anim-btn--expand:hover::before {
  bottom: auto;
  top: 0;
  width: 70%;
}

/* ══════════════════════════════════════════════════
   ANIMATION EFFECT 2 — Light Sweep
   Diagonal white sheen sweeps across on hover.
   Use on solid or dark backgrounds.
══════════════════════════════════════════════════ */
.nzo-anim-btn--sweep {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 14px 32px;
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  position: relative;
  border: 1px solid #ffffff;
  border-radius: 0;
  overflow: hidden;
}
.nzo-anim-btn--sweep span { position: relative; z-index: 2; }
.nzo-anim-btn--sweep::after {
  background: #ffffff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: 0.2;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 1;
}
.nzo-anim-btn--sweep:hover { color: #ffffff; }
.nzo-anim-btn--sweep:hover::after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
.nzo-anim-btn--sweep:active { color: #ffffff; }

Foundations

Icons

Google Material Symbols — two approved styles: Outlined (default) and Rounded (softer UI contexts). Browse the full library at fonts.google.com/icons ↗ and Material 3 Icons ↗.

Step 1 — Add the Font to Your <head>

layout/theme.liquid

Liquid

<!-- Material Symbols — add inside <head> before </head> -->

<!-- Outlined style (default for NZO) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">

<!-- Rounded style (optional — for softer UI contexts only) -->
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">

Step 2 — Required CSS (add once globally)

assets/nzo-master-styles.css

CSS

/* ── Material Symbols base reset ── */
.material-symbols-outlined,
.material-symbols-rounded {
  font-family: 'Material Symbols Outlined';  /* or 'Material Symbols Rounded' */
  font-weight: normal;
  font-style: normal;
  font-size: 24px;              /* Default size — override per context */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings:
    'FILL' 0,     /* 0 = outlined, 1 = filled */
    'wght' 400,   /* stroke weight 100–700 */
    'GRAD' 0,     /* grade -50 to 200 */
    'opsz' 24;    /* optical size 20–48 */
}

/* NZO approved icon sizes */
.icon--sm  { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.icon--md  { font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon--lg  { font-size: 32px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40; }
.icon--xl  { font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }

/* Filled variant */
.icon--filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* NZO brand color tint */
.icon--brand  { color: #84251F; }
.icon--muted  { color: #5C5C5C; }

Step 3 — Usage in HTML / Liquid

sections/nzo-feature-bar.liquid

HTML

<!-- Basic usage: write the icon name as text content -->
<span class="material-symbols-outlined">local_shipping</span>

<!-- Rounded style -->
<span class="material-symbols-rounded">shopping_cart</span>

<!-- With NZO size utility -->
<span class="material-symbols-outlined icon--lg">hiking</span>

<!-- With NZO brand color -->
<span class="material-symbols-outlined icon--brand">verified</span>

<!-- Filled variant -->
<span class="material-symbols-outlined icon--filled">favorite</span>

<!-- Inline with button text -->
<button class="nzo-btn nzo-btn--md nzo-btn--solid">
  <span class="material-symbols-outlined icon--sm">add_shopping_cart</span>
  Add to Cart
</button>

<!-- Inline with feature card -->
<div class="nzo-feature-card">
  <span class="material-symbols-outlined icon--lg icon--brand">workspace_premium</span>
  <div>
    <h3>Lifetime Warranty</h3>
    <p>Every product built to last.</p>
  </div>
</div>

Step 4 — Customizing with font-variation-settings

Variation Axes Reference

CSS

/*
  font-variation-settings axes for Material Symbols:

  FILL  0 or 1
        0 = outlined/stroke (default for NZO)
        1 = filled/solid

  wght  100 – 700   (stroke weight, like font-weight)
        400 = regular (NZO default)
        300 = thinner
        600 = heavier

  GRAD  -50 – 200   (grade — subtle weight without spacing change)
        0   = default
        -25 = lighter on dark backgrounds (recommended)
        200 = heavier emphasis

  opsz  20 – 48     (optical size — match to icon px size)
        20 = small icons (18–20px)
        24 = medium icons (24px) ← NZO default
        40 = large icons (32–40px)
        48 = xlarge icons (48px+)
*/

/* ── NZO Approved Presets ── */

/* Navigation / UI chrome — thin, precise */
.icon-nav {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* CTA / feature icons — standard weight */
.icon-feature {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40;
  font-size: 36px;
}

/* Trust badges / filled accent icons */
.icon-trust {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  color: #84251F;
}

/* On dark backgrounds — reduce grade */
.icon-on-dark {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' -25, 'opsz' 24;
  color: rgba(255, 255, 255, 0.85);
}

Live Icon Variation Demo — hiking icon across all axes

hiking

FILL 0 / 300w

Thin outlined

hiking

FILL 0 / 400w

NZO default

hiking

FILL 0 / 600w

Heavy outlined

hiking

FILL 1 / 400w

Filled + brand

hiking

GRAD -25 / dark

On dark bg

hiking

FILL 1 / red bg

On brand bg

Navigation & Actions

Outlined

menu

close

search

arrow_forward

arrow_back

expand_more

expand_less

chevron_right

open_in_new

filter_list

Rounded

menu

close

search

arrow_forward

arrow_back

expand_more

expand_less

chevron_right

open_in_new

filter_list

E-Commerce & Shopping

Outlined

shopping_cart

shopping_bag

favorite

favorite_border

star

star_border

local_shipping

inventory_2

sell

discount

Rounded

shopping_cart

shopping_bag

favorite

favorite_border

star

star_border

local_shipping

inventory_2

sell

discount

Outdoor & Activity

Outlined

hiking

camping

terrain

explore

map

navigation

place

wb_sunny

cloud

ac_unit

Rounded

hiking

camping

terrain

explore

map

navigation

place

wb_sunny

cloud

ac_unit

Trust & Communication

Outlined

verified

shield

lock

email

phone

chat

support_agent

info

check_circle

workspace_premium

Rounded

verified

shield

lock

email

phone

chat

support_agent

info

check_circle

workspace_premium

Layout

Spacing

8pt grid. 4pt half-steps below 24px. Use only these tokens for padding, margin, and gap.

4px

--nzo-space-1

8px

--nzo-space-2

12px

--nzo-space-3

16px

--nzo-space-4

24px

--nzo-space-6

32px

--nzo-space-8

40px

--nzo-space-10

48px

--nzo-space-12

56px

--nzo-space-14

64px

--nzo-space-16

80px

--nzo-space-20

Layout

Grid System

Responsive grid adapts per breakpoint. Max content width 1300px centered. Columns reduce on smaller viewports.

Breakpoints Overview

Breakpoint	Device	Columns	Margin	Gutter	Max Width
xs · <480px	Mobile portrait	4	16px	8px	100%
sm · 480–767px	Mobile landscape	4	20px	12px	100%
md · 768–1023px	Tablet portrait	8	24px	16px	100%
lg · 1024–1299px	Tablet landscape / small desktop	10	32px	16px	100%
xl · ≥1300px	Desktop	12	auto	16px	1300px

Device Grid Mockups

1

2

3

4

Mobile Portrait iPhone 16 Pro Max · 440×956
4 col · 16px margin · 8px gutter

1

2

3

4

5

6

7

8

Tablet Portrait 768×1024px
8 col · 24px margin · 16px gutter

1

2

3

4

5

6

7

8

9

10

Tablet Landscape 1024×768px
10 col · 32px margin · 16px gutter

Desktop — 12-Column · 1300px max-width · 16px gutter

1

2

3

4

5

6

7

8

9

10

11

12

4 col

8 col — main

4 col — sidebar

3

Foundations

Elevation & Shadows

Five shadow levels for layering UI. All NZO surfaces use border-radius: 0 — no exceptions. Sharp edges are non-negotiable.

Design Rule — Sharp Edges Only

Every Near Zero component must use border-radius: 0. No pills. No rounded cards. No softened inputs. This is absolute — never override with a positive value. Rounded corners are off-brand.

01

Elevation 01 — Hairline Drop

Subtle lift. Cards resting on white. Inline components.

box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;

02

Elevation 02 — Soft Diffuse

Product cards. Section blocks. Default card elevation.

box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;

03

Elevation 03 — Mid Lift

Hover states. Drawers. Sticky headers on scroll.

box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;

04

Elevation 04 — Deep Float

Modals. Overlays. Full-page drawers. Hero elements.

box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;

05

Elevation 05 — Material Press

Buttons in resting state. Input fields. Small chips.

box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;

CSS Token Reference

Token	Value	Use
--shadow-01	rgba(0,0,0,.15) 0 3px 3px 0	Cards · resting
--shadow-02	rgba(0,0,0,.08) 0 4px 12px	Product cards · default
--shadow-03	rgba(0,0,0,.15) 0 2px 8px	Hover lift · sticky nav
--shadow-04	rgba(50,50,93,.25) 0 50px 100px -20px, rgba(0,0,0,.3) 0 30px 60px -30px	Modals · overlays
--shadow-05	rgba(0,0,0,.12) 0 1px 3px, rgba(0,0,0,.24) 0 1px 2px	Buttons · inputs

            /* Border radius rule — absolute */   border-radius: 0; /* Always. No exceptions. */
          

Components

Cards

Four card types. Sharp corners. 1px #E3E3E3 border. White or dark background only. No box-shadows on product cards.

Product Cards

backpack Best Seller

Near Zero · Sleeping Systems

Ultralight Sleep System

★★★★★ (238)

$189.00

camping Sale

Near Zero · Cooking

Trail Cooking Kit

★★★★★ (94)

$62.00 $89.00

hiking

Near Zero · Apparel

Merino Base Layer

XS · S · M · L · XL

$135.00

Feature / Trust Cards

Dark Feature Cards · Dark section context

local_shipping $75+

Free Shipping

On all orders over $75. Ships within 1–2 business days.

workspace_premium ∞

Lifetime Warranty

Every product is built to last. We stand behind it forever.

verified 100%

Field Tested

Every gram is weighed, every seam is stress-tested in the field.

support_agent 24/7

Expert Support

Talk to a real person who's actually used the gear on trail.

Use on dark (#121212 or #292929) section backgrounds. Top border accent always #84251F. No border-radius — sharp edges only.

Review / Testimonial Cards

★★★★★

"Lightest kit I've ever carried. Summited in conditions that would have ruined cheaper gear."

J. Martinez

✓ Verified Purchase

★★★★★

"The sleep system is worth every penny. Packed into my side pocket and I almost forgot it was there."

A. Chen · Seattle, WA

✓ Verified Purchase

★★★★★

"Did the JMT with NZO top to bottom. Zero complaints. Just perfect gear."

T. Williams

✓ Verified Purchase

Blog / Content Cards

terrain

Gear Guide

How to Choose Your First Ultralight Sleep System

Weight vs. warmth vs. price — the triangle every backpacker has to navigate.

Tables

Four table styles. Use Standard for most data. Striped for long lists. Bordered for specs/comparison. Compact for dense UI.

Standard Table — Dark Header

Product	Weight	Price	Rating	Status
Ultralight Sleep System	1 lb 6 oz	$189.00	★★★★★ (238)	In Stock
Trail Cooking Kit	4.2 oz	$89.00	★★★★ (94)	In Stock
Merino Base Layer	6.1 oz	$135.00	★★★★★ (51)	Low Stock
Carbon Trekking Poles	7.9 oz	$149.00	★★★★ (12)	Coming Soon

Striped Table — Alternating Rows

Order	Customer	Date	Items	Total	Status
#5021	J. Martinez	Jun 19, 2026	2	$278.00	Fulfilled
#5020	A. Chen	Jun 18, 2026	1	$189.00	Fulfilled
#5019	T. Williams	Jun 17, 2026	3	$413.00	Processing
#5018	K. Park	Jun 16, 2026	1	$89.00	Refunded
#5017	M. Torres	Jun 15, 2026	2	$324.00	Fulfilled

Bordered Table — Specs / Comparison

Feature	Base Layer	Mid Layer	Shell
Material	Merino Wool	Primaloft Gold	3L Gore-Tex
Weight	6.1 oz	8.4 oz	11.2 oz
Temp Rating	30–70°F	20–50°F	All conditions
Pack Size	Fist-sized	Softball	Grapefruit
Price	$135.00	$219.00	$389.00

Compact Table — Dense UI / Admin

SKU	Name	Inventory	Price	Weight
NZO-SS-001	Sleep System · 15°F	42	$189.00	1 lb 6 oz
NZO-CK-001	Cooking Kit · Ti	87	$89.00	4.2 oz
NZO-BL-S	Base Layer · Small	12	$135.00	6.1 oz
NZO-BL-M	Base Layer · Medium	0	$135.00	6.1 oz
NZO-TP-001	Trekking Poles · Carbon	8	$149.00	7.9 oz
NZO-BND-001	Starter Bundle	23	$249.00	22.8 oz

Patterns

Color Schemes

Four approved Dawn theme schemes. Never mix button colors within a section. Each scheme has a designated button pairing.

New Arrival

Ultralight Bundle

Engineered for the trail. Built to last a lifetime without the weight penalty.

Shop Now Learn More

Scheme 1 — Primary · White BG · Red fill + Red outline

Best Sellers

Sleeping Systems

Down to 15°F. Compresses to the size of a water bottle. The last bag you'll ever need.

Shop Now View All

Scheme 2 — Light Gray · #F3F3F3 BG · Alternate sections

Limited Edition

Go Further.

Join 12,000+ adventurers who trust Near Zero on every expedition. Sign up for early access.

Shop Now Learn More

Scheme 3 — Dark · #292929 BG · Red fill + White outline

Memorial Day Sale

Up to 30% Off

Time-limited offer on bundles, sleeping systems, and cooking kits. No code needed.

Shop the Sale View All Deals

Scheme 4 — Brand Red · #84251F BG · White fill + White outline

Patterns

Section Backgrounds

Three section types. Dark accent used sparingly — max one per page.

Eyebrow label

White Section

Default background for most sections. Clean and neutral.

Eyebrow label

Light Gray Section

Alternate background. Creates visual separation without heavy contrast.

Eyebrow label

Dark Accent Section

Used sparingly. Max one per page. Newsletter, feature callouts.

Reference

All Tokens

Complete CSS custom properties in nzo-master-styles.css. Reference this when writing any new CSS for the store.

Token	Value	Use
--nzo-red	#84251F	Primary CTA, links, accents
--nzo-red-hover	#57140F	Hover states
--nzo-black	#121212	Body text, headings
--nzo-white	#FFFFFF	Backgrounds, reversed text
--nzo-gray-light	#F3F3F3	Section backgrounds
--nzo-gray-card	#F9F9F9	Product card backgrounds
--nzo-gray-border	#E3E3E3	Hairline borders
--nzo-gray-bar	#E8E8E8	Progress bars, dividers
--nzo-gray-muted	#5C5C5C	Secondary text
--nzo-section-dark	#2A2A2A	Dark accent sections
--nzo-header-dark	#292929	Header background
--nzo-gray-mid	#3F3F3F	Secondary dark surfaces
--nzo-gray-subtle	#7B7B7B	Muted text on dark bg
--nzo-gray-rule	#CCCCCC	Borders on dark sections
--nzo-star	#F79E1B	Star ratings only
--nzo-disabled	#C9C9C9	Disabled states
--nzo-font	'Figtree', sans-serif	All text
--nzo-weight-bold	700	Headings, buttons, labels
--nzo-weight-regular	400	Body text
--nzo-size-display	48px	H1 / Display
--nzo-size-h2	36px	Section headings
--nzo-size-h3	24px	Card headings
--nzo-size-body	16px	Default body
--nzo-size-sm	13px	Buttons, labels
--nzo-size-xs	12px	Captions, eyebrows
--nzo-radius	0px	All borders — sharp corners
--nzo-page-width	1300px	Max content width
--nzo-duration	0.2s	Default transition duration
--nzo-ease	cubic-bezier(0,0,0.3,1)	All easing