Nelson Company
Brand Style Guide — Design Tokens
--primary#2F2E7C
--secondary#19B24E
--nelson-bright-blue#0078BD · Links / ADA
--tertiary#FF6F00
--accent#800C50
--nelson-bluegray-lt#D2E4F0
--nelson-bluegray#B1C3D1
--text-neutral#6D7F8B
--active-neutral#3C454C
--heading-neutral#1D2327
Each row is one color's full 11-step semantic scale: bg → surface → subtle → border → muted → base → hover → text → active → heading → dark. Use the semantic token, not the step number.
About fluid type sizes — clamp(min, fluid, max)
Heading sizes use clamp() — a CSS function that sets a minimum size, a maximum size, and a fluid value in between that scales with the viewport. A value like clamp(31→42px) means the type is 31px on small screens and grows to 42px on wide screens, scaling smoothly between. OxyMade controls all clamp values — adjust any heading size in OxyMade → Variables → Typography. Changes flow through automatically.
Each heading is a bare semantic element — no extra classes. Font family, weight, and size come from Oxygen global typography. Left column shows the token name used in Globals.
Nelson
The Right Pallet
for Your Operation
Plastic Pallets
& Containers
Static Load Capacity: 30,000 lbs
Dynamic: 6,500 lbs
FDA Compliant / ISPM-15 Certified
Rackable & Nestable
Technical Specifications
Load & Racking Data
Section Label / Eyebrow
Used for Subheadings
Nelson Company is a solutions-driven company with a focus on the design, supply and recovery of transport packaging products, specifically pallets and crates.
To lead the charge in reducing product damage using the most sustainable packaging available. Contact Us →
--text-xs12px--text-sm14px--text-base16px--text-lg17→18px--text-xl18→20px--text-2xl20→24px--text-3xl24→30px--text-4xl30→36px--text-5xl38→48px--text-6xl48→60px--text-7xl56→72pxThe gap below each row is the token value. Each row's margin-bottom is set to the variable it labels — the visual space is the proof.
--s14px--s28px--s38→12px--s410→16px--s512→20px--s614→24px--s816→32px--s1020→40px--s1224→48px--s1632→64px--s2040→80px--s2448→96px--s3264→128px--s4080→160px--s4896→192px--s56112→224px--s64128→256px--s72144→288px--radius-sm1.25px
--radius-md2.5px
--radius-lg5px
--radius-xl7.5px
--radius-2xl10px
--radius-3xl15px
--radius-full9999px
.nc-btn--primary · #0078BD
.nc-btn--splash · #005A8C
.nc-btn--secondary · outline
.nc-linkbtn · no chrome
Navy + 2px green border
3px blue ring
translateY(1px)
opacity .45
.nc-btn--sm · 12px / 8px 15px
14px / 12px 21px
.nc-btn--lg · 15px / 15px 28px
Each band layers .nc-eyebrow + heading + .nc-lede on its surface variant. Eyebrow is maroon on light, green on dark/blue.
Plastic Pallets
Lightweight, Durable
Material Handling
FDA-compliant plastic pallets for food, pharma, and export-ready operations. Available in nestable, stackable, and rackable configurations.
.nc-section--tint · .nc-eyebrow (maroon) · .nc-lede
Since 1921
100 Years of Industrial
Packaging Expertise
Nelson Company has supplied plastic pallets, containers, and crates to manufacturers, distributors, and food processors across North America.
.nc-section--blue · .nc-eyebrow--on-dark (green)Recovery Program
Used Pallet Recovery
& Exchange
Return used pallets through our exchange program. Nelson brokers resale, recycles material, and keeps packaging out of landfills.
.nc-section--dark · .nc-eyebrow--on-dark (green)Full-width navy band. 4-column grid. Serif numerals in green, uppercase label, subdued descriptor.
SVG texture patterns applied to .nc-banner__bg. 6 wood (grain, rings, planks, knots) + 3 plastic (hex, curves, grid). Apply the pattern class to the .nc-banner wrapper.
How to reference these tokens inside Oxygen Builder's panels and CSS inputs.
In any Oxygen color or value picker, use curly-brace syntax — no var() wrapper:
{var-primary} | → var(--primary) — Navy #2F2E7C |
{var-secondary} | → var(--secondary) — Green #19B24E |
{var-nelson-bright-blue} | → var(--nelson-bright-blue) — #0078BD |
{var-s8} | → spacing 32px |
Three places for CSS — use the correct tier:
| OxyMade Variables panel | Color, spacing, and typography tokens |
| Oxygen → Manage → Stylesheets | Reusable component classes (.nelson-card, .stats-bar) |
| Element → Custom CSS tab | One-off overrides scoped to a single element |
Apply in the Oxygen class input — autocomplete enabled. Full list: OxyMade Globals → Classes.
.flex .flex-col .flex-row .hidden.items-center .justify-between .centered.grid-cols-2 → .grid-cols-6 · .col-span-2.gap-4 .gap-6 .gap-8 .gap-12.text-primary .bg-surface-neutral .border-primary.rounded-md .shadow-md .opacity-50sm-hidden md-flex-col lg-grid-cols-3