Color Palette
Navy
#1B3A5C
rgb(27, 58, 92)
PRIMARY
Orange
#E8692A
rgb(232, 105, 42)
ACCENT
Cream
#F5F2EE
rgb(245, 242, 238)
BACKGROUND
Charcoal
#222222
rgb(34, 34, 34)
TEXT
Steel
#8A9BB0
rgb(138, 155, 176)
SECONDARY
Typography
The Right Materials,
Right on Time.
Right on Time.
Aa
Bb
Cc
0123456789
We stock the materials contractors actually need — same-day on most orders. Regional commercial and industrial supply distributor serving contractors, facilities managers, and industrial operations across the Upper M...
Logo
Primary logo on light backgrounds; reversed version for dark backgrounds and photography. Maintain minimum clear space equal to the height of the mark (x) around the logo — increase to 1.5x for premium print applications. Never change the logo color to Steel or off-brand colors, never stretch/condense/distort the wordmark, never use lowercase or alter letterforms, and never use the logo at reduced opacity or as a watermark.
UI Patterns
Buttons
Primary
Accent
Outline
Text link →
Badges & Tags
Primary
Accent
Secondary
Outline
Card
Same-Day Availability
In stock on most orders placed before noon. Regional delivery within 100 miles.
Alert / Callout
Orders placed before noon ship same day. Call us if you need it sooner.
Social Media Formats
Voice & Tone
Direct, dependable, no-nonsense
DirectConfidentPracticalHuman
✓ Do write like this
- Say the thing — no throat-clearing or hedging
- Use short, plain sentences like contractors talk
- State availability clearly: 'Same-day delivery on most orders before noon.'
- Be honest about errors: 'We're out of stock. Here's what we can get you by Thursday.'
- Use plain CTAs like 'Get a quote' or 'Call us'
- Communicate confidently from earned knowledge
✗ Avoid this
- Use corporate fluff like 'committed to delivering synergistic supply chain solutions'
- Use passive hedging like 'Availability may be subject to regional inventory variances'
- Oversell with claims like 'The best supply experience you've ever had, guaranteed!'
- Use vague CTAs like 'Explore our solutions'
- Add jargon for its own sake
- Qualify every statement
Color Contrast — WCAG
Aa
Cream on Charcoal
Aa
Navy on Cream
Aa
Charcoal on Steel
Aa
Orange on Charcoal
Aa
Navy on Steel
Aa
Navy on Orange
Aa
Orange on Cream
Aa
Cream on Steel
Aa
Navy on Charcoal
Aa
Orange on Steel
Code & Assets
CSS Variables
:root {
--color-navy: #1B3A5C;
--color-orange: #E8692A;
--color-cream: #F5F2EE;
--color-charcoal: #222222;
--color-steel: #8A9BB0;
--font-heading: 'Barlow Condensed', sans-serif;
--font-body: 'Inter', sans-serif;
}
brand.json
↓ Download
{
"client": "Acme Supply Co.",
"tagline": "We get the right materials to the right people \u2014 on time, every time. No drama.",
"colors": [
{
"name": "Navy",
"hex": "#1B3A5C",
"role": "primary"
},
{
"name": "Orange",
"hex": "#E8692A",
"role": "accent"
},
{
"name": "Cream",
"hex": "#F5F2EE",
"role": "background"
},
{
"name": "Charcoal",
"hex": "#222222",
"role": "text"
},
{
"name": "Steel",
"hex": "#8A9BB0",
"role": "secondary"
}
],
"fonts": {
"heading": "Barlow Condensed",
"body": "Inter",
"mono": null
},
"voice": {
"tone": "Direct, dependable, no-nonsense",
"attributes": [
"Direct",
"Confident",
"Practical",
"Human"
],
"do": [
"Say the thing \u2014 no throat-clearing or hedging",
"Use short, plain sentences like contractors talk",
"State availability clearly: 'Same-day delivery on most orders before noon.'",
"Be honest about errors: 'We're out of stock. Here's what we can get you by Thursday.'",
"Use plain CTAs like 'Get a quote' or 'Call us'",
"Communicate confidently from earned knowledge"
],
"dont": [
"Use corporate fluff like 'committed to delivering synergistic supply chain solutions'",
"Use passive hedging like 'Availability may be subject to regional inventory variances'",
"Oversell with claims like 'The best supply experience you've ever had, guaranteed!'",
"Use vague CTAs like 'Explore our solutions'",
"Add jargon for its own sake",
"Qualify every statement"
]
},
"logo": {
"notes": "Primary logo on light backgrounds; reversed version for dark backgrounds and photography. Maintain minimum clear space equal to the height of the mark (x) around the logo \u2014 increase to 1.5x for premium print applications. Never change the logo color to Steel or off-brand colors, never stretch/condense/distort the wordmark, never use lowercase or alter letterforms, and never use the logo at reduced opacity or as a watermark.",
"assets": {
"primary": "https://assets.1pg.us/demo/acme/assets/logo-primary.svg",
"reversed": "https://assets.1pg.us/demo/acme/assets/logo-reversed.svg",
"mark": "https://assets.1pg.us/demo/acme/assets/logo-mark.svg"
}
},
"industry": "Regional commercial and industrial supply distributor serving contractors, facilities managers, and industrial operations across the Upper Midwest since 1987. Stocks ~14,000 SKUs across fasteners, electrical, plumbing, and HVAC with same-day availability and regional delivery within 100 miles of St. Paul, MN.",
"extraction_notes": "All five named colors extracted with explicit hex values from the palette page. PMS and CMYK values are also provided in the guide but hex used per instructions. Tagline taken from the stated mission statement. No monospace font is specified in the guide."
}