Brand Guidelines
QC Webworks
QC Webworks
Brand Kit
The definitive reference for our visual identity, type system, color palette, component patterns, and usage rules.
01 / Color System
Brand Colors
Primary — Violet Scale
Violet Core
–p700 / #5a14a0
Violet Deep
–p600 / #6d1dba
Violet Active
–p500 / #8a2be2
Violet Bright
–p400 / #9d3df5
Violet Glow
–p300 / #b266ff
Neutrals
Charcoal
–char / #16161a
Charcoal 2
–char2 / #1d1d22
Charcoal 3
–char3 / #252530
Warm Gray
–wg / #94928e
Light Gray
–wg3 / #d2d0cc
Off-White
–ow / #f4f3f0
White
–white / #ffffff
Semantic / Status
Success
#2ecc71
Warning
#f39c12
Error
#e74c3c
Info
#3498db
02 / Typography
Type System
Headlines — Outfit
The Quad Cities’ web studio.
Custom, strategy-first websites for businesses ready to grow.
Aa
Aa
Aa
Body — Work Sans
We build websites that actually do something for your business. No templates, no page builders, no recycled designs. Every project is hand-coded and strategy-driven from the ground up.
Aa
Aa
Aa
Aa
Labels / Metadata — Geist Mono
Web Design & Development — Local SEO — Website Maintenance — March 2026
Aa
Aa
| Role | Family | Size | Weight | Tracking |
|---|---|---|---|---|
| Display / Hero | --font-head | clamp(2.4rem, 5vw, 3.6rem) | 900 | -0.03em |
| H1 / Page Title | --font-head | 2.2rem | 800-900 | -0.02em |
| H2 / Section | --font-head | 1.75rem | 700-800 | -0.02em |
| H3 / Subsection | --font-head | 1.2rem | 700 | -0.01em |
| Body | --font-body | 1rem | 400 | 0 |
| Body Small | --font-body | 0.9rem | 400 | 0 |
| Label / Tag | --font-mono | 0.7rem | 400 | 0.12em |
| Caption | --font-mono | 0.65rem | 300 | 0.08em |
03 / Logo
Logo Usage
QC Webworks
Primary — Dark Background
QC Webworks
Primary — Light Background
QC Webworks
Monochrome — Violet Background
| Property | Value |
|---|---|
| Typeface | Outfit Black (900) |
| Tracking | -0.01em |
| Accent Color (dark bg) | --p300 / #b266ff |
| Accent Color (light bg) | --p500 / #8a2be2 |
| Minimum Size | 16px font-size |
| Clear Space | 1x the height of the “Q” on all sides |
| Icon | PNG mark at 38px width adjacent to wordmark |
04 / Components
UI Components
Buttons
Badges
Web Design
Active
Pending
Overdue
Form Inputs
Cards
Web Design & Development
Hand-coded, strategy-driven websites built from scratch for Quad Cities businesses.
Local SEO
Get found by the customers who are already searching for what you do in the QC area.
05 / Design Tokens
Spacing, Radii & Shadows
Spacing Scale
| Token | Value | Use |
|---|---|---|
--sp-xs | 4px | Tight inline gaps |
--sp-sm | 8px | Small padding, icon gaps |
--sp-md | 16px | Default content spacing |
--sp-lg | 24px | Card padding, grid gaps |
--sp-xl | 40px | Section sub-spacing |
--sp-2xl | 64px | Major section padding |
--sp-3xl | 96px | Hero / top-level sections |
Border Radii
| Token | Value | Use |
|---|---|---|
--r-sm | 6px | Buttons, inputs, badges |
--r-md | 10px | Cards, panels |
--r-lg | 16px | Modals, large containers |
--r-xl | 24px | Hero sections, feature blocks |
Shadows
| Token | Value | Use |
|---|---|---|
--shadow-sm | 0 1px 3px rgba(0,0,0,.12) | Subtle elevation |
--shadow-md | 0 4px 12px rgba(0,0,0,.15) | Cards, dropdowns |
--shadow-lg | 0 12px 40px rgba(0,0,0,.25) | Modals, overlays |
06 / Usage Rules
Brand Guidelines
Do
- Use the violet accent on “Webworks” in the logo
- Maintain clear space around the logo mark
- Use Outfit for all headlines and navigation
- Use Work Sans for body copy and descriptions
- Use Geist Mono (uppercase) for labels and metadata
- Keep dark mode as the default brand presentation
- Use –p500 as the primary interactive color
- Maintain tight letter-spacing on headlines (-0.02em to -0.03em)
Do Not
- Stretch, rotate, or distort the logo wordmark
- Use colors outside the defined palette
- Mix headline weights within a single heading
- Use Geist Mono for body paragraphs
- Place the logo on busy or low-contrast backgrounds
- Add drop shadows or gradients to the logo text
- Use emojis in professional or client-facing materials
- Substitute Inter, Roboto, or Arial for brand typefaces
07 / Contact Reference
Company Information
Legal Name
QC Webworks LLC
Tagline
Built local. Built right.
Location
Moline, Illinois — Quad Cities Area
Website
Email
Phone
LinkedIn
Facebook
QC Webworks LLC / Brand Kit v3.0 / March 2026