The v2 website (website-v2/) is the primary design reference. All tokens, components, and patterns below reflect the v2 system. The v1 dark-first palette is preserved as a secondary reference for future dark-theme designs.
01 Color Palette
Primary - v2 Brand Foundation
Light-first system. Navy anchors dark type and surfaces; orange is the brand accent; process blue handles all interactive elements and CTAs. These are the active tokens across all v2 pages.
Navy
--navy
#0D2137 Active
Primary dark. Headings, nav brand, footer background.
Navy Mid
--navy-mid
#1E3A5F Active
Dark card surfaces, secondary dark backgrounds.
Industrial Orange
--orange
#F4821F Active
Brand accent. Eyebrows, logo mark, proof strip top border, highlights.
Process Blue
--blue
#0082C8 Active
All CTAs, interactive elements, links, nav CTA pill. WCAG AA on white.
Resin Teal
--teal
#00BFA5 Active
Data callouts, engineering tags, secondary accent elements.
Primary - v2 Neutrals & Text
Three background neutrals create visual rhythm across page sections. Body and secondary are for text on light backgrounds.
Fog
--fog
#F0F4F8 Active
Cool blue-grey. Body background, hero, pillar sections, case studies.
Stone
--stone
#ECEEF1 Active
Cool grey. Third neutral break. Industries, supplier band, quote sections.
White
--white
#FFFFFF Active
Clean break between fog and stone sections. Nav, proof strip, materials.
Body Charcoal
--body
#4A4A4A Active
Body copy on all light backgrounds.
Secondary
--secondary
#3D5066 Active
Secondary text: nav links, card bodies, sub-labels.
Border Light
--border-light
#E4EBF2 Active
Dividers, card borders, table rules.
Dim / Overlay Tokens
Use for tinted backgrounds on icon containers, callout boxes, and hover states. Never use as standalone backgrounds.
Blue Dim
--blue-dim
rgba(0,130,200,0.09)
Icon container bg, selected chip bg.
Orange Dim
--orange-dim
rgba(244,130,31,0.10)
Orange-tinted feature callouts.
Teal Dim
--teal-dim
rgba(0,191,165,0.08)
Teal-tinted feature callouts.
Secondary - v1 Dark Palette
The v1 dark-first system. Available for future dark-theme pages, dark hero overlays, or dark section treatments. Not the primary direction for v2 pages.
Marine Deep
v1 body bg
#071624 v1 Secondary
Darkest surface. Hero body background in v1.
Marine Mid
v1 section bg
#112940 v1 Secondary
Section backgrounds, card surfaces, ticker strip.
Warm White
v1 text
#E8EDF3 v1 Secondary
Primary text color on v1 dark backgrounds.
02 Background System
The v2 three-neutral rule: no two adjacent page sections may share the same background. The standard alternation pattern for a full-page layout:
Fog
--fog #F0F4F8
Cool blue-grey. Hero, pillars, case studies.
White
--white #FFFFFF
Clean break. Proof strip, materials, nav.
Stone
--stone #ECEEF1
Cool grey. Industries, supplier band, quotes.
Home page rhythm (9 sections)
Hero
Proof
Pillars
Industries
Materials
Cases
Quote
CTA
03 Typography
Primary Stack - v2
Three-family system. Big Shoulders Display for all editorial display headings. Barlow Condensed for eyebrows, labels, and spec tags. Barlow for all body copy and nav.
Our experts help plastics pioneers edge out the competition with lower costs and higher quality. No minimums, no runaround.
Barlow400 body / 500-600 UIPrimary
Display Heading Scale
Big Shoulders Display 900 · All display headings use this weight
H1 Hero / clamp(3.5-5.6rem)THE RIGHT RESIN
H2 Section / clamp(2-3rem)From Raw Resin to Finished Spec
H3 Sub-section / 1.3-1.5remDistribution Network
Eyebrow / 0.68-0.75remResin Distribution
Body / 1rem · Barlow 400Body copy, descriptions, card text.
Small / 0.82rem · Barlow 500Nav links, form labels, meta text.
Secondary Stack - v1
Available for dark-theme pages, technical spec sheets, or any context where the engineering/code aesthetic of IBM Plex reads better than the editorial v2 system.
IBM Plex Sans · v1 Headings + Body
BE A RESIN HERO
Industrial-grade sans. Clean, technical, readable across all sizes.
IBM Plex Sans300-700v1 Secondary
IBM Plex Mono · v1 Spec / Code
MFI 12 g/10min
ASTM D1238 / ISO 1133
#0D2137 · #F4821F · #0082C8
IBM Plex Mono400-500spec values, hex codesv1 Secondary
04 Components
Navigation - v2
White bar, 64px tall. Orange square logo mark + Big Shoulders Display brand name. Barlow 500 nav links. Process Blue pill CTA. Hamburger + drawer on mobile (< 900px).
Every content section opens with this sequence: eyebrow (orange or blue) then Big Shoulders Display H2. Eyebrow uses Barlow Condensed 600, 0.72rem, 0.18em tracking, uppercase.
What We Do
From Raw Resin to Finished Spec
Eyebrow color: --orange on most sections. --blue on process/technical sections. Never both on the same page.
05 Voice & Tone
Poly Evolution's voice is expert, direct, and partner-first. Strong taglines punch above the typical distributor. Preserve and amplify this in all copy.
Core Voice Attributes
Expert
Deep industry knowledge, not generic distributor talk
Partner-first
We succeed when you succeed. Not vendor language
Results-driven
Specific outcomes, cost savings, quality metrics
Direct
No corporate filler. Say it plainly and with confidence
Avoid
"We provide comprehensive resin distribution solutions leveraging our extensive network of supplier relationships to deliver value-added services to our valued customers."
Use
"We source the right resin at the right price - and our team picks up the phone when you have a problem. That's the difference."
Avoid
"Our best-in-class compounding capabilities enable our clients to achieve superior product outcomes through customized formulation strategies."
Use
"Tell us your spec. We'll engineer a compound that hits it - without the three-month lead time you're used to."