A unified design language for the Generac dealer portal — covering color, typography, spacing, and UI components across the enterprise dashboard experience.
Product
Dealer 360° Portal
Platform
Web — Desktop Primary
Designer
Kish Hickerson
Version
1.0
01
Color
The Generac palette is anchored by a high-energy orange derived from the brand identity. All interactive and focus states use orange. Gray values establish hierarchy across text, backgrounds, and borders.
Brand
Generac Orange
#E8420A
Primary action, active nav, brand accent
Orange Mid
#F05A28
Hover states, dealer badge
Orange Light
#FFF0EB
Active nav bg, hover tints, badge bg
Black
#1A1A1A
Topbar bg, primary headings, sidebar
Neutrals
Gray Dark
#4A4A4A
Body text, nav items
Gray Mid
#767676
Secondary text, table headers, hints
Gray Light
#ADADAD
Placeholder text, disabled states
Gray Pale
#F2F2F2
Page background, component backgrounds
Status
Shipped
#2ECC71
Fully shipped orders
Partial
#F05A28
Partially shipped orders
Entered
#95A5A6
Entered / pending orders
Danger
#E74C3C
Errors, destructive actions
02
Typography
DM Sans is used throughout for its clean, neutral character suited to enterprise data interfaces. DM Mono is reserved for code, tokens, and numerical data requiring monospace alignment.
Type Scale — DM Sans
--text-2xl
2rem · 700 · -0.02em Line height 1.1
Welcome Back, Christopher
Page greeting Hero headings
--text-xl
1.25rem · 700 · -0.01em Line height 1.2
Order Management
Section titles Panel headers
--text-base
0.875rem · 400 · 0 Line height 1.6
Connect Wi-Fi capable generators to a Wi-Fi connection and meet the 60% goal.
Body text Descriptions
--text-sm
0.78rem · 400 · 0 Line height 1.5
anna.janusz@gmail.com · Default
Table cells Card content
--text-xs
0.68rem · 500–600 · 0.08em Uppercase
Order Date Sales Order Order Status
Table headers Nav labels
Monospace — DM Mono
--font-mono
0.78rem · 400 Tabular figures
0002788894 10/31/2022
Order numbers Dates, IDs
03
Spacing & Grid
An 8px base unit governs all spacing decisions. The layout uses a fixed sidebar (220px) with a fluid content area. The responsive grid adapts from 12 columns on desktop down to 4 on mobile.
Spacing Scale — 8px Base
space-1
4px
Icon gaps, badge padding
space-2
8px
Inline item gaps
space-3
12px
Nav item padding, button padding-y
space-4
16px
Mobile margins, card padding-sm
space-6
24px
Gutters, card padding, input padding
space-8
32px
Desktop margins, section spacing-sm
space-12
48px
Between page sections
space-16
64px
Page-level vertical rhythm
Responsive Grid
Desktop
Frame width1440px
Columns12
Margin32px
Gutter24px
Tablet Landscape
Frame width1024px
Columns8
Margin24px
Gutter24px
Tablet Portrait
Frame width834px
Columns8
Margin24px
Gutter24px
Mobile
Frame width375px
Columns4
Margin16px
Gutter16px
Layout note: The sidebar (220px fixed) and topbar (60px fixed) are outside the content grid. Content area width = viewport − 220px sidebar. Grid columns apply within the content area only.
04a
Buttons
Variants
Sizes
With Icons
04b
Badges & Status
Order Status
ShippedPartially ShippedEntered
Dealer Tier Badges
Select MemberElite MemberElite+ MemberPremier Member
Achievement Tiers
🥉
Select
100k
🏅
Elite
500k
🥇
Elite+
1.5m
🏆
Premier
1.5m+
04c
Forms & Inputs
Text Input States
This field is required
Search Input
Select / Dropdown
04d
Navigation
Topbar
GeneracDealer 360°
Lucci Electric, Inc.
Sidebar Navigation
Welcome Back,
Christopher
Home
Goals
Orders
Purchase History
Sales
User Management
04e
Data Table
Order Table — with status badges and pagination
Order Management
Order Date ↕
Sales Order ↕
Purchase Order
Material Count ↕
Order Status ▼
10/31/2022
0002788894
Velgot2
9
Shipped
10/31/2022
0002788895
Velgot2
9
Partially Shipped
10/31/2022
0002788896
Velgot2
9
Entered
09/03/2022
0002788897
Bert Gutierrez
6
Shipped
Displaying results 10 of 40
04f
Cards
User Card
AJ
Anna Janusz
anna.janusz@gmail.com
Principal
···
KH
Kish Hickerson
kish.hickerson@gmail.com
Default
···
KPI Card
PowerPlay Close Rate
Close Rate0%
Contracts Signed0
Leads Sent (Last Year)34
Leads in Close Rate34
Fleet Enrollment Rate
87%
Percentage of devices enrolled in Fleet.
05
Iconography
Icons use a consistent 16×16px viewport with 1.3–1.5px stroke weight. All icons are outline style — no filled icons except for active/selected states. Icon color inherits from parent text color.
home
Home nav item
goals
Goals nav
orders
Orders nav
purchase
Purchase History
sales
Sales nav
user
User Management
search
Search inputs
notification
Topbar alerts
calendar
Date filters
arrow-right
CTAs, links
chevron-down
Dropdowns
sort
Table sort
📐
Icon spec: All icons are drawn on a 16×16px grid with a 1px padding safe zone, giving a 14×14px active area. Stroke weight is 1.3px at 16px — scale proportionally for larger sizes. Use currentColor for stroke so icons inherit parent text color automatically. Feather Icons is the recommended icon library — it matches the stroke weight and style of the existing icons in the system.