Coastal Builders Supply
Wilmington, NC · 3 contacts
Built for the
field rep's thumb.
Six main pages. Glass owns the chrome (top bars, FAB, bottom nav with the M3 pill). Solid M3 owns the content (cards, KPIs, list items, hero cards). Toggle the theme above to compare light and dark.
Open Pipeline
$184k
↑ 12% this week
Tasks Due
7
3 overdue
Active Dealers
42
↑ 3 new
Calls Today
5
2 done · 3 left
Recent activity
Alison closed deal · Hardware Plus
12 min ago · $14,200
Wisdom added contact · Coastal Builders
1 hr ago · Sara Rivera
You have a quote pending · CIS Builders
2 hrs ago · $8,400
Home — Dashboard
CB
Active
HP
Hardware Plus
Charlotte, NC · 7 contacts
VIP
SR
Stone & Rock Distributors
Raleigh, NC · 2 contacts
Prospect
MS
Mountain Supply Co.
Asheville, NC · 4 contacts
Active
PB
Piedmont Building
Greensboro, NC · 5 contacts
Active
New dealer
Dealers — List
CB
Coastal Builders Supply
ActiveVIPNet 308 vendors
YTD Revenue
$48.2k
↑ 18%
Open Quotes
3
$12.5k pending
Overview
Contacts
Activity
Files
Key contacts
JM
Jamie Morrison
Owner · jamie@coastal.com
SR
Sara Rivera
Buyer · (910) 555-0142
Dealer — Detail
CI
CI Supply · Aurora
CIS · 8 dealers carry
CIS
PB
Pioneer Brands
Direct · 22 dealers
Direct
AC
Atlas Coatings
Direct · 11 dealers
Direct
DH
DuraHardware
CIS · 15 dealers
CIS
VT
Veritas Tools
Direct · 9 dealers
Direct
Vendors — List
Overdue
!
Follow up: Hardware Plus
Quote pending · Due Apr 28
3d late
!
Updated pricing — Atlas
Vendor program · Due Apr 30
2d late
Today
●
Call Jamie at Coastal
11:00 AM · Q2 order
11 AM
●
Drop samples at Piedmont
2:30 PM · Greensboro
Today
✓
Email Pioneer rep
Done at 8:42 AM
Done
New task
Tasks — Today
KN
Kevin Noles-Guerra
Sales Rep · MTA
AdminNC Region
Tools
Activity Feed
Team-wide updates
Voice Notes
Quick recordings
SOPs
Standard procedures
More — Profile
The Rule
Glass for chrome, M3 for content
Top app bars, bottom nav, and FAB get the frosted treatment. Cards, KPIs, list items, and hero cards stay solid M3. The shell breathes; the data stays sharp.
M3 Spine
The pill indicator survives
The colored capsule behind the active bottom-nav icon stays intact — but now sitting in a glass nav bar with orbs floating behind. A soft glow makes it pop against the frosted background.
Glass Pop
Bold hero cards stay solid
The mauve dealer-detail hero and the indigo profile card stay solid M3 — they're focal points. Glass would wash them out.
The skeleton, the soul,
and a touch of light.
Three desktop screens. Same hybrid rule as mobile: M3 owns the components, glass owns the chrome. The drawer, top bar, and panels frost. KPIs, list items, and hero cards stay solid M3 so reps can scan in seconds.
01 — Dashboard
Good morning, Kevin
Monday, May 4 · 7 tasks due today · 3 overdue
Open Pipeline
$184k
↑ 12% vs last week
Tasks Due
7
3 overdue
Active Dealers
42
↑ 3 new
Calls This Week
23
5 today · 2 done
Pipeline by Stage
Last 30 daysQuotedClosed Won
Recent Activity
Across the teamAL
Alison closed deal · Hardware Plus
12 min ago · $14,200 · Pioneer Brands
WD
Wisdom added contact · Coastal Builders
1 hr ago · Sara Rivera · Buyer
KN
You have a quote pending · CIS Builders
2 hrs ago · $8,400 · DuraHardware
Today
May 4Call Jamie at Coastal
re: Q2 order
Drop samples — Piedmont
Greensboro
Send Q3 program email
Atlas Coatings
Email Pioneer rep
8:42 AM
Top Dealers
YTDCB
Coastal Builders
$48.2k YTD
HP
Hardware Plus
$36.7k YTD
MS
Mountain Supply
$28.1k YTD
02 — Dealers · Split List + Detail
Dealers
42 activeAll
Active
Prospects
VIP
CB
Coastal Builders Supply
Wilmington, NC · 3 contacts
HP
Hardware Plus
Charlotte, NC · 7 contacts
VIP
SR
Stone & Rock Distributors
Raleigh, NC · 2 contacts
MS
Mountain Supply Co.
Asheville, NC · 4 contacts
PB
Piedmont Building
Greensboro, NC · 5 contacts
TC
Tarheel Construction
Durham, NC · 6 contacts
CB
Coastal Builders Supply
ActiveVIPNet 308 vendors
YTD Revenue
$48.2k
↑ 18%
Open Quotes
3
$12.5k
Last Visit
12d
Apr 22
AR Aging
$2.1k
Current
Overview
Contacts
Activity
Quotes
Files
Key Contacts
JM
Jamie Morrison
Owner · jamie@coastal.com
SR
Sara Rivera
Buyer · (910) 555-0142
DT
Derek Thompson
Yard Manager · (910) 555-0173
Recent Activity
KN
Quote sent · $4,200 Pioneer order
Apr 30 · You
KN
Visited yard · met with Sara
Apr 22 · You
AL
Phone call · Q2 program
Apr 18 · Alison
03 — Tasks · Kanban Board
To Do
5Follow up: Hardware Plus quote
Hardware Plus · $14,200 quote pending
📅 Apr 28 · 3d late
KN
Send updated pricing — Atlas
Vendor program change · Q3
📅 Apr 30 · 2d late
KN
Prep deck for Tarheel meeting
Friday demo · Pioneer + Atlas lines
📅 May 4
AT
Review Q2 commission run
Office · Sherry has the spreadsheet
📅 May 5
KN
In Progress
3Call Jamie at Coastal Builders
Q2 order · Pioneer + DuraHardware
⏰ 11:00 AM
KN
Drop samples at Piedmont
Greensboro yard · Atlas color cards
⏰ 2:30 PM
KN
Email Pioneer rep · Q3 program
Tier 2 dealer terms · ride-along ask
⏰ 4:00 PM
AL
In Review
2Quote review — CIS Builders
$8,400 · DuraHardware · awaiting Wisdom
📅 May 6
WD
Pricing matrix — Veritas Tools
New tier structure · 9 dealers affected
📅 May 7
SH
Done
8Hardware Plus — closed deal
$14,200 · Pioneer Brands · Alison
✓ 12 min ago
AL
Add Sara Rivera to contacts
Buyer role · primary contact
✓ 1 hr ago
WD
Send Pioneer Q2 program PDF
22 dealers · email blast
✓ Yesterday
KN
Tokens, components,
and the rules that bind them.
The visual reference. Color tokens, typography, spacing, radius, elevation, and a live render of every component primitive. Toggle Light/Dark above to compare modes.
00
The core rule
Glass for chrome · M3 for contentThis is solid M3
$184k
For KPI tiles, list items, hero cards — anywhere data must be readable.
This is glass M3
42
For neutral KPIs that should let orbs peek through.
01
Color tokens
Toggle the theme above to see light vs darkPrimary · Indigo
primary
on-primary
primary-container
on-primary-container
Secondary · Cool gray
secondary
secondary-container
Tertiary · Mauve
tertiary
tertiary-container
Status · Success / Error
success
success-container
error
error-container
Surfaces · Tonal Elevation
surface
cl-low
cl
cl-high
cl-highest
02
Typography
Roboto Flex · Material 3 type scaleheadline-large
Good morning, Kevin
32 / 40
w 600
w 600
headline-medium
42 active accounts
28 / 36
w 500
w 500
headline-small
Coastal Builders Supply
24 / 32
w 500
w 500
title-large
Pipeline by Stage
22 / 28
w 500
w 500
title-medium
Hardware Plus — VIP dealer in Charlotte
16 / 24
w 500
w 500
title-small
Recent activity
14 / 20
w 600
w 600
body-medium
Default body text. Used for most UI. Read once, scan often.
14 / 20
w 400
w 400
body-small
Caption / supporting text · 12 minutes ago · $14,200
12 / 16
w 400
w 400
label-large
Button · FAB · Segmented
14 / 20
w 600
w 600
label-small
VIP · ACTIVE · OVERDUE
11 / 16
w 600
w 600
03
Spacing scale
Stick to these. Never freestyle.space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-8
32px
space-12
48px
space-16
64px
04
Radius scale
Different components, different radii — that's M3's rhythmradius-xs
4px · badges
radius-sm
8px · chips
radius-md
12px · cards
radius-lg
16px · KPI tiles
radius-xl
20px · panels
radius-2xl
24px · hero cards
radius-3xl
28px · profile · drawer
radius-fab
16px · FAB
radius-pill
999px · buttons
05
Tonal elevation
Depth via color, not shadowsLevel 0
surface
Level 1
cl-low
Level 2
cl
Level 3
cl-high
Level 4
cl-highest
06
Component library
Live render of every primitiveButtons
SolidFilled for primary actions, tonal for secondary, outlined for tertiary, text for inline.
Floating Action Button
Solid · with glowThe single most important action on the page. Bottom-right, always. Note the colored shadow — that's the FAB's signature glow.
New dealer
Bottom Navigation Bar
Glass + M3 pillThe signature element. Glass nav bar with the M3 pill behind the active icon — that capsule is sacred. Note the soft glow around the active pill.
Home
Dealers
Contacts
Vendors
Tasks
Search Bar
GlassFull-radius pill input. Top of every list page on mobile, docked in the top bar on desktop with a ⌘K hint.
Search dealers, contacts, vendors
⌘K
Filter Chips
Outline · selectedOutlined by default; fills with secondary-container plus a checkmark when selected. Below the search bar on list pages.
All · 42
Active
Prospects
VIP
Net 30
Segmented Buttons
GlassView switchers and tab-likes. Used on detail pages and view selectors.
Overview
Contacts
Activity
Files
Badges
SolidStatus pills. Always one of the M3 container colors. Use sparingly — too many badges and they stop signaling status.
Active
Net 30
VIP
Overdue · 3d
Prospect
List Items
SolidM3's standard 72dp list. Selected state uses secondary-container — same color as the nav pill, so users learn one cue.
CB
Coastal Builders Supply
Wilmington, NC · 3 contacts
HP
Hardware Plus
Charlotte, NC · 7 contacts
SR
Stone & Rock Distributors
Raleigh, NC · 2 contacts
Hero Card
Solid · alwaysThe Material You "personality" element. One per page, max. Always solid (never glass) — it's the focal point.
CB
Coastal Builders Supply
ActiveVIPNet 30
KPI Tiles · Mixed
Solid + GlassThe dashboard pattern. One bold colored tile per row; rest are glass to let orbs through.
Open Pipeline
$184k
↑ 12% this week
Tasks Due
7
3 overdue
Active Dealers
42
↑ 3 new
Calls Today
5
2 done · 3 left
Activity Rows
SolidFor activity feeds and team updates. Glowing status dot + bold actor name + timestamp.
Alison closed deal · Hardware Plus
12 min ago · $14,200
Wisdom added contact · Coastal Builders
1 hr ago · Sara Rivera
You have a quote pending · CIS Builders
2 hrs ago · $8,400
Profile Card
Solid · primary-containerUsed on the More/Settings page. Bold primary-container — this is the page's hero element.
KN
Kevin Noles-Guerra
Sales Rep · MTA
AdminNC Region