Style guide
Every look in SiteZump, LeadZump and AdZump has a NAME. Ask for changes by name: "make this H3 · SubText Color", "use Padding Design Four here", "this should be an Outline Button". The names are the labels in the editor's property panel: Text = Text Container Type · Text Color Scheme; surfaces = the Grid's Background, Border, Border Type, BoxShadow and Padding Type; controls = Design Type · Color Scheme. Inputs on this page are live: type, pick and click, the value shows beside each. Samples on this page are drawn by the live theme, so switch Light/Dark to compare. Generated 2026-10-06 from the shared theme; usage counts cover the app pages of all three apps.
Text sizes: the tag (textContainer)
The tag sets the SIZE and default weight. Choose by size, not by HTML meaning.
H1
The quick brown fox
Page title (24/30, 600)
One per page, top of the content. The shell crumb already names the page, so most app pages do without it.
Used 100× (SiteZump 17 · LeadZump 6 · AdZump 77). e.g. AdZump campaignConfiguration, AdZump campaignSetup, AdZump AIadSuggestions
H2
The quick brown fox
Dialog or big-section title (20/26, 600)
Popup titles and the first heading of a long settings page.
Used 364× (SiteZump 9 · LeadZump 182 · AdZump 173). e.g. AdZump leadPreview, AdZump campaignPerformanceGraph, LeadZump dealProfile
H3
The quick brown fox
Section / card title (16/22, 600)
The heading inside a card or panel. The most useful heading in app pages.
Used 1585× (SiteZump 40 · LeadZump 1017 · AdZump 528). e.g. LeadZump dealProfile, AdZump campaignPerformanceGraph, AdZump adSettings
H4
The quick brown fox
Strong body (14/21, 600)
Body size with weight: a row title, a field group name, a value that must stand out.
Used 976× (SiteZump 11 · LeadZump 910 · AdZump 55). e.g. LeadZump inventoryScreen, LeadZump dealProfile, LeadZump bpTeammateProfile
H5
The quick brown fox
Strong body, bold tag (14/21, 600)
Renders like H4. Kept for old pages; prefer H4.
Used 31× (SiteZump 19 · LeadZump 6 · AdZump 6). e.g. SiteZump siteAnalytics, LeadZump templateConversion, SiteZump ssl
H6
The quick brown fox
Caption (12/18, 500)
Field labels, helper lines, small headers above a value.
Used 28× (SiteZump 12 · LeadZump 11 · AdZump 5). e.g. LeadZump whatsappInbox, SiteZump accountHome, SiteZump pages
SPAN
The quick brown fox
Body, inline (14/21, 400)
The default. Table cells, values, any text inside a row.
Used 3677× (SiteZump 646 · LeadZump 1413 · AdZump 1618). e.g. AdZump campaignSetup, LeadZump dealProfile, AdZump leadPreview
P
The quick brown fox
Body, paragraph (14/21, 400)
Same size as SPAN but a block: descriptions and multi-line copy.
Used 1530× (SiteZump 238 · LeadZump 260 · AdZump 1032). e.g. AdZump metaCampaignSetup, AdZump campaignPerformanceGraph, AdZump adSettings
B
The quick brown fox
Body bold (14/21, 600)
An emphasised word or value inside a line.
Used 19× (SiteZump 7 · LeadZump 12). e.g. LeadZump bpDashboard, SiteZump ssl, LeadZump dashboard
I
The quick brown fox
Body italic (14/21, 400)
Rare: quoted or placeholder-like copy.
Used 10× (SiteZump 2 · AdZump 8). e.g. AdZump campaignPerformanceGraph, SiteZump assets, AdZump assets
Text colour and weight: the role (textColor)
The role sets COLOUR and sometimes WEIGHT (and, for the two new roles, the size). Mono has one ink and one muted grey; hue is only for status.
Primary Text Color
The quick brown fox
#191918 / #EEEDE9
400 14px/21px
Ink. The default for anything the user reads first.
Used 3163× (SiteZump 422 · LeadZump 913 · AdZump 1828). e.g. AdZump leadPreview, AdZump campaignPerformanceGraph, AdZump metaCampaignSetup
Light Primary Text Color
The quick brown fox
#191918 / #EEEDE9
600 14px/21px
Ink at 600. A heading-like value without changing the tag. Renders identically to Light Label Text Color, Coloured Text Color 5; this is the most used, standardise on it.
Used 360× (SiteZump 45 · LeadZump 220 · AdZump 95). e.g. LeadZump businessPartnerProfile, LeadZump bpTeammateProfile, LeadZump channelPartnerProfile
Paragraph Text Color
The quick brown fox
#62625E / #9B9B96
400 14px/21px
Muted grey. Descriptions and secondary sentences under a title. Renders identically to SubText Color; prefer SubText Color.
Used 833× (SiteZump 225 · LeadZump 291 · AdZump 317). e.g. LeadZump dealProfile, AdZump googleCampaignDetails, SiteZump socialPreview
SubText Color
The quick brown fox
#62625E / #9B9B96
400 14px/21px
Muted grey. Secondary values, meta lines, timestamps. Renders identically to Paragraph Text Color; this is the most used, standardise on it.
Used 1115× (SiteZump 63 · LeadZump 791 · AdZump 261). e.g. LeadZump inventoryScreen, LeadZump dealProfile, LeadZump channelPartnerProfile
Light SubText Color
The quick brown fox
#62625E / #9B9B96
500 14px/21px
Muted at 500. A secondary line that still needs a little weight. Renders identically to Label Text Color, Coloured Text Color 2; this is the most used, standardise on it.
Used 504× (SiteZump 32 · LeadZump 312 · AdZump 160). e.g. LeadZump dealProfile, AdZump campaignPerformanceGraph, LeadZump inventoryScreen
Label Text Color
The quick brown fox
#62625E / #9B9B96
500 14px/21px
Muted at 500. Field and value labels (pair with H6). Renders identically to Light SubText Color, Coloured Text Color 2; prefer Light SubText Color.
Used 447× (SiteZump 138 · LeadZump 92 · AdZump 217). e.g. AdZump metaCampaignSetup, SiteZump csPolicy, AdZump campaignPerformanceGraph
Light Label Text Color
The quick brown fox
#191918 / #EEEDE9
600 14px/21px
Ink at 600. A label that is also the value's heading. Renders identically to Light Primary Text Color, Coloured Text Color 5; prefer Light Primary Text Color.
Used 330× (SiteZump 15 · LeadZump 129 · AdZump 186). e.g. LeadZump dealProfile, AdZump campaignToAdUpdate, AdZump metaCampaignSetup
Light Paragraph Text Color
The quick brown fox
#FFFFFF / #FFFFFF
400 14px/21px
WHITE in both modes. Only for text on a dark fill that stays dark (marketing bars). Never on panels.
Used 9× (SiteZump 7 · AdZump 2). e.g. SiteZump shell, SiteZump docs, AdZump shell
Coloured Text Color 1
The quick brown fox
#191918 / #EEEDE9
500 14px/21px
Ink at 500. Was the action colour; the guide retires hue, so actions read by weight. Renders identically to Coloured Text Color 3, Coloured Text Color 4; this is the most used, standardise on it.
Used 890× (SiteZump 4 · LeadZump 615 · AdZump 271). e.g. LeadZump deals, LeadZump channelPartnerProfile, LeadZump dealProfile
Coloured Text Color 2
The quick brown fox
#62625E / #9B9B96
500 14px/21px
Muted at 500. Was info blue. Renders identically to Light SubText Color, Label Text Color; prefer Light SubText Color.
Used 426× (SiteZump 4 · LeadZump 385 · AdZump 37). e.g. LeadZump bpTeammateProfile, LeadZump dealProfile, LeadZump dashboard
Coloured Text Color 3
The quick brown fox
#191918 / #EEEDE9
500 14px/21px
Ink at 500. Was success green. Do not put it on an ink fill (it disappears). Renders identically to Coloured Text Color 1, Coloured Text Color 4; prefer Coloured Text Color 1.
Used 197× (SiteZump 6 · LeadZump 64 · AdZump 127). e.g. AdZump adSettings, AdZump metaCampaignSetup, LeadZump dealProfile
Coloured Text Color 4
The quick brown fox
#191918 / #EEEDE9
500 14px/21px
Ink at 500. Was warning amber. Renders identically to Coloured Text Color 1, Coloured Text Color 3; prefer Coloured Text Color 1.
Used 16× (SiteZump 6 · LeadZump 2 · AdZump 8). e.g. SiteZump orgUsers, SiteZump templateManagement, LeadZump orgUsers
Coloured Text Color 5
The quick brown fox
#191918 / #EEEDE9
600 14px/21px
Ink at 600. Was danger red; danger now reads by weight, status colour is for fields and toasts. Renders identically to Light Primary Text Color, Light Label Text Color; prefer Light Primary Text Color.
Used 20× (SiteZump 3 · LeadZump 3 · AdZump 14). e.g. AdZump audiences, AdZump leadPreview, SiteZump myProfile
Overline Text
The quick brown fox
#191918 / #EEEDE9
600 11px/16px
NEW. 11/16 at 600, any tag. Table heads and small section labels.
Not used yet.
Small Text
The quick brown fox
#191918 / #EEEDE9
400 13px/20px
NEW. 13/20 at 400, any tag. Secondary details one step below body.
Used 32× (SiteZump 32). e.g. SiteZump siteAnalytics
Text: the combinations actually in use
The most-used tag · role pairs. When two look alike, standardise on the more-used one.
SPAN · Primary Text Color
The quick brown fox
400 14px/21px
Ink. The default for anything the user reads first.
Used 1930× (SiteZump 284 · LeadZump 597 · AdZump 1049). e.g. AdZump leadPreview, AdZump campaignSetup, LeadZump inventoryScreen
H3 · Primary Text Color
The quick brown fox
600 16px/22px
Ink. The default for anything the user reads first.
Used 651× (SiteZump 17 · LeadZump 152 · AdZump 482). e.g. AdZump adSettings, AdZump campaignPerformanceGraph, AdZump metaCampaignSetup
SPAN · Paragraph Text Color
The quick brown fox
400 14px/21px
Muted grey. Descriptions and secondary sentences under a title.
Used 450× (SiteZump 176 · LeadZump 47 · AdZump 227). e.g. AdZump googleCampaignDetails, SiteZump socialPreview, SiteZump siteAnalytics
SPAN · SubText Color
The quick brown fox
400 14px/21px
Muted grey. Secondary values, meta lines, timestamps.
Used 398× (SiteZump 17 · LeadZump 184 · AdZump 197). e.g. LeadZump dealProfile, AdZump campaignToAdUpdate, AdZump chatBot
H3 · Coloured Text Color 1
The quick brown fox
600 16px/22px
Ink at 500. Was the action colour; the guide retires hue, so actions read by weight.
Used 383× (SiteZump 3 · LeadZump 376 · AdZump 4). e.g. LeadZump channelPartnerProfile, LeadZump businessPartnerProfile, LeadZump deals
H4 · SubText Color
The quick brown fox
600 14px/21px
Muted grey. Secondary values, meta lines, timestamps.
Used 345× (SiteZump 5 · LeadZump 314 · AdZump 26). e.g. LeadZump inventoryScreen, AdZump campaignPerformanceGraph, LeadZump addProduct
P · Coloured Text Color 1
The quick brown fox
500 14px/21px
Ink at 500. Was the action colour; the guide retires hue, so actions read by weight.
Used 267× (SiteZump 1 · LeadZump 35 · AdZump 231). e.g. AdZump metaCampaignSetup, AdZump adSettings, AdZump AdsPerfomance
P · Label Text Color
The quick brown fox
500 14px/21px
Muted at 500. Field and value labels (pair with H6).
Used 237× (SiteZump 62 · LeadZump 10 · AdZump 165). e.g. AdZump metaCampaignSetup, SiteZump csPolicy, AdZump campaignPerformanceGraph
H3 · Coloured Text Color 2
The quick brown fox
600 16px/22px
Muted at 500. Was info blue.
Used 220× (SiteZump 1 · LeadZump 214 · AdZump 5). e.g. LeadZump bpTeammateProfile, LeadZump dealProfile, LeadZump callReport
H4 · Light SubText Color
The quick brown fox
500 14px/21px
Muted at 500. A secondary line that still needs a little weight.
Used 207× (SiteZump 1 · LeadZump 206). e.g. LeadZump dealProfile, LeadZump inventoryScreen, LeadZump bpTeammateProfile
P · Primary Text Color
The quick brown fox
400 14px/21px
Ink. The default for anything the user reads first.
Used 202× (SiteZump 77 · LeadZump 76 · AdZump 49). e.g. LeadZump whatsappThread, SiteZump usageAndPurchase, LeadZump usageAndPurchase
H3 · SubText Color
The quick brown fox
600 16px/22px
Muted grey. Secondary values, meta lines, timestamps.
Used 179× (LeadZump 179). e.g. LeadZump dealProfile, LeadZump channelPartnerProfile, LeadZump shell
P · Light SubText Color
The quick brown fox
500 14px/21px
Muted at 500. A secondary line that still needs a little weight.
Used 176× (SiteZump 15 · LeadZump 10 · AdZump 151). e.g. AdZump campaignPerformanceGraph, AdZump metaCampaignSetup, AdZump campaignToAdUpdate
P · Light Label Text Color
The quick brown fox
600 14px/21px
Ink at 600. A label that is also the value's heading.
Used 170× (SiteZump 1 · LeadZump 1 · AdZump 168). e.g. AdZump campaignToAdUpdate, AdZump metaCampaignSetup, AdZump chatBot
SPAN · Coloured Text Color 1
The quick brown fox
500 14px/21px
Ink at 500. Was the action colour; the guide retires hue, so actions read by weight.
Used 168× (LeadZump 160 · AdZump 8). e.g. LeadZump deals, LeadZump businessPartners, LeadZump inventoryScreen
H2 · Primary Text Color
The quick brown fox
600 20px/26px
Ink. The default for anything the user reads first.
Used 161× (SiteZump 5 · LeadZump 17 · AdZump 139). e.g. AdZump leadPreview, AdZump campaignPerformanceGraph, AdZump metaCampaignSetup
SPAN · Coloured Text Color 2
The quick brown fox
500 14px/21px
Muted at 500. Was info blue.
Used 158× (LeadZump 148 · AdZump 10). e.g. LeadZump dashboard, LeadZump bpTeammateProfile, LeadZump dealsBp
SPAN · Label Text Color
The quick brown fox
500 14px/21px
Muted at 500. Field and value labels (pair with H6).
Used 155× (SiteZump 65 · LeadZump 42 · AdZump 48). e.g. SiteZump csPolicy, SiteZump orgUsers, LeadZump orgUsers
H4 · Paragraph Text Color
The quick brown fox
600 14px/21px
Muted grey. Descriptions and secondary sentences under a title.
Used 149× (SiteZump 2 · LeadZump 125 · AdZump 22). e.g. LeadZump dealProfile, LeadZump inventoryScreen, AdZump campaignPerformanceGraph
SPAN · Light Primary Text Color
The quick brown fox
600 14px/21px
Ink at 600. A heading-like value without changing the tag.
Used 146× (SiteZump 39 · LeadZump 53 · AdZump 54). e.g. SiteZump designSystem, AdZump metaCampaignSetup, AdZump adSettings
P · SubText Color
The quick brown fox
400 14px/21px
Muted grey. Secondary values, meta lines, timestamps.
Used 130× (SiteZump 38 · LeadZump 57 · AdZump 35). e.g. SiteZump myProfile, LeadZump myProfile, AdZump myProfile
P · Paragraph Text Color
The quick brown fox
400 14px/21px
Muted grey. Descriptions and secondary sentences under a title.
Used 127× (SiteZump 35 · LeadZump 35 · AdZump 57). e.g. AdZump leadPreview, LeadZump channelPartnerProfile, SiteZump analytics
P · Coloured Text Color 3
The quick brown fox
500 14px/21px
Ink at 500. Was success green. Do not put it on an ink fill (it disappears).
Used 120× (LeadZump 1 · AdZump 119). e.g. AdZump adSettings, AdZump metaCampaignSetup, AdZump adSetSettings
H4 · Light Primary Text Color
The quick brown fox
600 14px/21px
Ink at 600. A heading-like value without changing the tag.
Used 111× (LeadZump 111). e.g. LeadZump businessPartnerProfile, LeadZump bpTeammateProfile, LeadZump channelPartnerProfile
Surfaces: Grid background
Set the Grid's `background` property, never a backgroundColor leaf. A leaf will not follow Light/Dark changes made in the theme.
Primary background
Aa sample
ink / solid
#191918 / #EEEDE9
Solid fills: primary buttons, the brand mark, selected chips. Text on it must be white (on-solid), never a text role.
Used 83× (SiteZump 11 · LeadZump 32 · AdZump 40). e.g. AdZump googleCampaignDetails, LeadZump dealProfile, AdZump audiences
Secondary background
Aa sample
canvas
#F4F4F2 / #121211
The page ground behind everything. Page roots and full-width bands.
Used 600× (SiteZump 73 · LeadZump 430 · AdZump 97). e.g. LeadZump dealProfile, LeadZump bpTeammateProfile, LeadZump dashboard
Tertiary background
Aa sample
panel
#FFFFFF / #1B1B1A
Cards and panels that sit on the canvas. Pair with border Light and corners Very Round.
Used 425× (SiteZump 50 · LeadZump 170 · AdZump 205). e.g. LeadZump inventoryScreen, AdZump leadPreview, AdZump campaignPerformanceGraph
Quaternary background
Aa sample
chip
#F2F1EC / #252523
Chips, badges, avatars with initials, segmented tracks. Ink text reads on it in both modes.
Used 207× (SiteZump 18 · LeadZump 71 · AdZump 118). e.g. AdZump googleCampaignDetails, AdZump metaCampaignSetup, AdZump adSetSettings
Quinary background
Aa sample
tint
#1919181A / #FFFFFF1A
A faint ink wash: hover and selected rows.
Used 60× (SiteZump 1 · LeadZump 3 · AdZump 56). e.g. AdZump campaignPerformanceGraph, AdZump adSetSettings, AdZump AIadSuggestions
Senary background
Aa sample
legacy
#FFFFFF1A / #1B1B1A1A
No assigned meaning in mono. Avoid in new work.
Used 30× (LeadZump 2 · AdZump 28). e.g. AdZump adSettings, AdZump googleAd, LeadZump shell
Septenary background
Aa sample
legacy
#FFFFFF / #1B1B1A
No assigned meaning in mono. Avoid in new work.
Used 528× (SiteZump 73 · LeadZump 328 · AdZump 127). e.g. AdZump metaCampaignSetup, LeadZump dashboard, LeadZump channelPartnerProfile
Octonary background
Aa sample
legacy
#D6D5CF / #42423F
No assigned meaning in mono. Avoid in new work.
Used 53× (SiteZump 23 · LeadZump 10 · AdZump 20). e.g. SiteZump csPolicy, AdZump googleCampaignDetails, SiteZump designSystem
Nonary background
Aa sample
surface / zebra
#F2F1EC / #252523
Row hovers and alternating surfaces. Not a dark fill.
Used 36× (LeadZump 15 · AdZump 21). e.g. AdZump displayCampaignCreation, AdZump searchCampaignCreation, LeadZump shell
Surfaces: border, corners, shadow
Grid properties `border`, `borderRadius`, `boxShadow`.
border Light
Aa
1px solid #ECEBE6
Hairline: card and panel edges, row dividers. The default border.
Used 1041× (SiteZump 14 · LeadZump 137 · AdZump 890). e.g. AdZump metaCampaignSetup, AdZump adSettings, AdZump leadPreview
border Medium
Aa
1px solid #D6D5CF
Edge grey: a control or a box that must read as an outline.
Used 586× (SiteZump 2 · LeadZump 489 · AdZump 95). e.g. LeadZump bpTeammateProfile, LeadZump dealProfile, LeadZump channelPartnerProfile
border Heavy
Aa
1px solid #A2A29C
Darker outline. Rare.
Used 106× (SiteZump 2 · LeadZump 83 · AdZump 21). e.g. LeadZump addProductTemplate, LeadZump addProduct, AdZump campaignSetup
border Extreme
Aa
1px solid #74746F
Near-ink outline. Rare.
Used 30× (LeadZump 30). e.g. LeadZump channelPartnerProfile, LeadZump dashboard, LeadZump dealSettings
border Ultra
Aa
2px solid #191918
2px ink. Selection rings only.
Used 6× (LeadZump 6). e.g. LeadZump shell
border Maximum
Aa
2px solid #191918
2px ink. Selection rings only.
Used 1× (LeadZump 1). e.g. LeadZump bpAssets
corners Straight
Aa
0px
0. Full-bleed bands and tables.
Not used yet.
corners Slight Round
Aa
4px
4px. Code chips, tiny tags.
Used 891× (SiteZump 46 · LeadZump 345 · AdZump 500). e.g. LeadZump dealProfile, AdZump metaCampaignSetup, LeadZump inventoryScreen
corners Round
Aa
8px
8px. Rows, small boxes, inputs inside cards.
Used 1216× (SiteZump 106 · LeadZump 343 · AdZump 767). e.g. AdZump metaCampaignSetup, AdZump leadPreview, AdZump campaignSetup
corners Very Round
Aa
14px
14px. Cards and panels.
Used 272× (SiteZump 61 · LeadZump 93 · AdZump 118). e.g. AdZump metaCampaignSetup, LeadZump dealProfile, AdZump campaignSetup
corners Extra Round
Aa
20px
20px. Large surfaces and toasts.
Used 160× (SiteZump 43 · LeadZump 64 · AdZump 53). e.g. SiteZump siteAnalytics, LeadZump addProduct, AdZump leadPreview
corners Full Round
Aa
9999px
Pill / circle. Avatars, pills.
Used 203× (SiteZump 3 · LeadZump 180 · AdZump 20). e.g. LeadZump deals, LeadZump dashboard, LeadZump businessPartnerProfile
shadow LightLow
Card
The card shadow: a 6px glow (light) / hairline ring (dark). The only shadow for cards.
Used 291× (SiteZump 45 · LeadZump 122 · AdZump 124). e.g. AdZump leadPreview, AdZump adSettings, AdZump metaCampaignSetup
shadow LightMedium
Card
Floating menus and popovers.
Not used yet.
shadow LightHigh
Card
Dialogs.
Not used yet.
shadow DarkLow
Card
Same as LightLow. Prefer LightLow.
Used 318× (SiteZump 42 · LeadZump 5 · AdZump 271). e.g. AdZump leadPreview, AdZump adSettings, AdZump campaignPerformanceGraph
shadow DarkMedium
Card
Same as LightMedium.
Not used yet.
shadow DarkHigh
Card
Same as LightHigh. Not on cards.
Not used yet.
Spacing: Grid padding
Grid property `padding`. A slot is the same on all four sides.
Padding Design One
content
4px
4px. Tight chips and icon boxes.
Used 560× (SiteZump 6 · LeadZump 175 · AdZump 379). e.g. AdZump adSettings, AdZump metaCampaignSetup, AdZump campaignPerformanceGraph
Padding Design Two
content
8px
8px. Compact rows and pills.
Used 583× (SiteZump 34 · LeadZump 312 · AdZump 237). e.g. AdZump metaCampaignSetup, LeadZump channelPartnerProfile, LeadZump dealProfile
Padding Design Three
content
12px
12px. Rows, list items, small cards.
Used 378× (SiteZump 3 · LeadZump 164 · AdZump 211). e.g. AdZump metaCampaignSetup, LeadZump deals, AdZump adSetSettings
Padding Design Four
content
16px
16px. Standard card padding.
Used 230× (SiteZump 74 · LeadZump 100 · AdZump 56). e.g. LeadZump dealProfile, SiteZump siteAnalytics, AdZump metaCampaignSetup
Padding Design Five
content
24px
24px. Roomy panels and dialogs.
Used 56× (SiteZump 7 · LeadZump 13 · AdZump 36). e.g. AdZump metaCampaignSetup, AdZump campaignSetup, SiteZump myProfile
Padding Design Six
content
32px 48px 48px 48px
Page gutter (32 top, 48 sides; 24 tablet, 16 phone).
Used 32× (SiteZump 24 · LeadZump 4 · AdZump 4). e.g. SiteZump analytics, SiteZump assets, SiteZump buyTokens
Padding Design Seven
content
20px
NEW. 20px. The most common hand-written padding, now a slot.
Used 101× (SiteZump 5 · LeadZump 24 · AdZump 72). e.g. AdZump metaCampaignSetup, AdZump campaignSetup, AdZump searchCampaignCreation
Buttons: designType · colorScheme
colorScheme picks a variant inside a design, and some variants change the look completely (Default · Secondary Color Scheme is an OUTLINE, not a solid button). The middle column says what each combination renders as; combinations that render identically are flagged so we can settle on one name.
Default · Primary Color Scheme
Solid ink fill, white label, 40px tall
Primary action: the one solid button per area. Looks identical to Default · Quaternary Color Scheme, Primary Icon Button · Tertiary Color Scheme, Primary Icon Button · Quinary Color Scheme; this is the most used of them.
Used 753× (SiteZump 89 · LeadZump 434 · AdZump 230). e.g. LeadZump channelPartnerProfile, LeadZump dealProfile, LeadZump businessPartnerProfile
Icon Button · Primary Color Scheme
Outline: panel fill, edge border, ink label, 40px tall
Secondary action, beside a primary one. Square icon-only control. Row menus, toolbar icons. Looks identical to Icon Button · Secondary Color Scheme, Icon Button · Tertiary Color Scheme, Icon Button · Quinary Color Scheme; this is the most used of them.
Used 285× (SiteZump 42 · LeadZump 165 · AdZump 78). e.g. LeadZump channelPartnerProfile, LeadZump dealProfile, LeadZump conversationPage
Outline Button · Primary Color Scheme
Outline: panel fill, edge border, ink label, 40px tall
Secondary action, beside a primary one. Looks identical to Default · Secondary Color Scheme, Outline Button · Quaternary Color Scheme, Outline Button · Tertiary Color Scheme; this is the most used of them.
Used 207× (SiteZump 85 · LeadZump 80 · AdZump 42). e.g. SiteZump orgUsers, LeadZump orgUsers, LeadZump templateConversion
Default · Secondary Color Scheme
Outline: panel fill, edge border, ink label, 40px tall
Secondary action, beside a primary one. Looks identical to Outline Button · Primary Color Scheme, Outline Button · Quaternary Color Scheme, Outline Button · Tertiary Color Scheme; prefer Outline Button · Primary Color Scheme.
Used 172× (SiteZump 14 · LeadZump 48 · AdZump 110). e.g. AdZump leadPreview, AdZump adSettings, LeadZump channelPartnerProfile
Default · Quaternary Color Scheme
Solid ink fill, white label, 40px tall
Primary action: the one solid button per area. Looks identical to Default · Primary Color Scheme, Primary Icon Button · Tertiary Color Scheme, Primary Icon Button · Quinary Color Scheme; prefer Default · Primary Color Scheme.
Used 160× (SiteZump 10 · LeadZump 26 · AdZump 124). e.g. AdZump metaCampaignSetup, AdZump adSettings, AdZump leadPreview
Text Button · Primary Color Scheme
No box: text only, 40px tall
Tertiary action or a link inside a row. Looks identical to Text Button · Quaternary Color Scheme, Text Button · Secondary Color Scheme, Text Button · Tertiary Color Scheme; this is the most used of them.
Used 155× (SiteZump 51 · LeadZump 49 · AdZump 55). e.g. AdZump campaignToAdUpdate, SiteZump assets, SiteZump csPolicy
Text Button · Quaternary Color Scheme
No box: text only, 40px tall
Tertiary action or a link inside a row. Looks identical to Text Button · Primary Color Scheme, Text Button · Secondary Color Scheme, Text Button · Tertiary Color Scheme; prefer Text Button · Primary Color Scheme.
Used 117× (SiteZump 2 · LeadZump 115). e.g. LeadZump channelPartnerProfile, LeadZump addProduct, LeadZump businessPartnerProfile
Text Button · Secondary Color Scheme
No box: text only, 40px tall
Tertiary action or a link inside a row. Looks identical to Text Button · Primary Color Scheme, Text Button · Quaternary Color Scheme, Text Button · Tertiary Color Scheme; prefer Text Button · Primary Color Scheme.
Used 115× (SiteZump 5 · LeadZump 91 · AdZump 19). e.g. LeadZump dealProfile, LeadZump addProduct, LeadZump channelPartnerProfile
Outline Button · Quaternary Color Scheme
Outline: panel fill, edge border, ink label, 40px tall
Secondary action, beside a primary one. Looks identical to Outline Button · Primary Color Scheme, Default · Secondary Color Scheme, Outline Button · Tertiary Color Scheme; prefer Outline Button · Primary Color Scheme.
Used 77× (SiteZump 3 · LeadZump 47 · AdZump 27). e.g. AdZump settings, LeadZump dealProfile, LeadZump deals
Icon Button · Secondary Color Scheme
Outline: panel fill, edge border, ink label, 40px tall
Secondary action, beside a primary one. Square icon-only control. Row menus, toolbar icons. Looks identical to Icon Button · Primary Color Scheme, Icon Button · Tertiary Color Scheme, Icon Button · Quinary Color Scheme; prefer Icon Button · Primary Color Scheme.
Used 76× (SiteZump 1 · LeadZump 4 · AdZump 71). e.g. AdZump metaCampaignSetup, AdZump campaignSetup, AdZump productSummary
Outline Button · Tertiary Color Scheme
Outline: panel fill, edge border, ink label, 40px tall
Secondary action, beside a primary one. Looks identical to Outline Button · Primary Color Scheme, Default · Secondary Color Scheme, Outline Button · Quaternary Color Scheme; prefer Outline Button · Primary Color Scheme.
Used 75× (SiteZump 1 · LeadZump 73 · AdZump 1). e.g. LeadZump addProduct, LeadZump addProductTemplate, LeadZump businessPartnerProfile
Outline Button · Quinary Color Scheme
Outline: panel fill, edge border, ink label, 40px tall
Secondary action, beside a primary one. Looks identical to Outline Button · Primary Color Scheme, Default · Secondary Color Scheme, Outline Button · Quaternary Color Scheme; prefer Outline Button · Primary Color Scheme.
Used 75× (SiteZump 1 · LeadZump 25 · AdZump 49). e.g. AdZump campaignPerformanceGraph, LeadZump channelPartnerProfile, LeadZump businessPartnerProfile
Decorative Button · Primary Color Scheme
Solid ink fill, white label, 40px tall
Primary action: the one solid button per area. Ink chip with on-solid text. Crumb-like links.
Used 57× (LeadZump 57). e.g. LeadZump inventoryScreen, LeadZump addProduct, LeadZump bpTeammateProfile
Primary Icon Button · Primary Color Scheme
Solid ink fill, white label, 40px tall
Primary action: the one solid button per area. Icon with a solid fill.
Used 53× (SiteZump 7 · LeadZump 36 · AdZump 10). e.g. LeadZump addProduct, LeadZump addProductTemplate, AdZump metaCampaignSetup
Icon Button · Tertiary Color Scheme
Outline: panel fill, edge border, ink label, 40px tall
Secondary action, beside a primary one. Square icon-only control. Row menus, toolbar icons. Looks identical to Icon Button · Primary Color Scheme, Icon Button · Secondary Color Scheme, Icon Button · Quinary Color Scheme; prefer Icon Button · Primary Color Scheme.
Used 41× (SiteZump 11 · LeadZump 5 · AdZump 25). e.g. AdZump metaCampaignSetup, SiteZump shell, SiteZump usageAndPurchase
Outline Button · Secondary Color Scheme
Outline: panel fill, edge border, ink label, 40px tall
Secondary action, beside a primary one. Looks identical to Outline Button · Primary Color Scheme, Default · Secondary Color Scheme, Outline Button · Quaternary Color Scheme; prefer Outline Button · Primary Color Scheme.
Used 38× (SiteZump 4 · LeadZump 33 · AdZump 1). e.g. LeadZump bpTeammateProfile, LeadZump channelPartnerProfile, LeadZump myProfileBp
Icon Button · Quinary Color Scheme
Outline: panel fill, edge border, ink label, 40px tall
Secondary action, beside a primary one. Square icon-only control. Row menus, toolbar icons. Looks identical to Icon Button · Primary Color Scheme, Icon Button · Secondary Color Scheme, Icon Button · Tertiary Color Scheme; prefer Icon Button · Primary Color Scheme.
Used 37× (SiteZump 2 · LeadZump 35). e.g. LeadZump callReport, LeadZump dealProfile, LeadZump bpTeammateProfile
Floating Action Mini Button · Primary Color Scheme
No box: text only, 32px tall
Tertiary action or a link inside a row. Small round action (back arrows, chevrons). Looks identical to Floating Action Mini Button · Secondary Color Scheme, Floating Action Mini Button · Tertiary Color Scheme, Floating Action Mini Button · Quinary Color Scheme; this is the most used of them.
Used 32× (SiteZump 18 · LeadZump 14). e.g. LeadZump addProduct, SiteZump accountHome, SiteZump pages
Text Button · Tertiary Color Scheme
No box: text only, 40px tall
Tertiary action or a link inside a row. Looks identical to Text Button · Primary Color Scheme, Text Button · Quaternary Color Scheme, Text Button · Secondary Color Scheme; prefer Text Button · Primary Color Scheme.
Used 25× (SiteZump 2 · LeadZump 21 · AdZump 2). e.g. LeadZump channelPartnerProfile, LeadZump bpOnBoarding, LeadZump bpTeammateProfile
Text Button · Quinary Color Scheme
No box: text only, 40px tall
Tertiary action or a link inside a row.
Used 23× (SiteZump 1 · LeadZump 13 · AdZump 9). e.g. LeadZump dealProfile, LeadZump bpTeammateProfile, LeadZump businessPartnerProfile
Fields: designType
TextBox, Dropdown, TextArea and PhoneNumber share these designs.
Default
Boxed field with the label above. The standard form field.
Used 1663× (SiteZump 275 · LeadZump 709 · AdZump 679). e.g. AdZump leadPreview, AdZump metaCampaignSetup, LeadZump addProduct
Outline Button
Outlined field. Older pages; looks like Default in mono.
Used 76× (SiteZump 7 · LeadZump 33 · AdZump 36). e.g. LeadZump dealProfile, AdZump googleCampaign, LeadZump deals
Filled Calendar
Filled field. Search boxes and dense filters.
Used 42× (SiteZump 2 · LeadZump 28 · AdZump 12). e.g. LeadZump dealProfile, AdZump campaignSetup, LeadZump employeeProfile
Edit on Request
Looks like text until clicked. Inline edit on detail pages.
Used 71× (SiteZump 3 · LeadZump 67 · AdZump 1). e.g. LeadZump employeeProfile, LeadZump channelPartnerProfile, LeadZump bpTeammateProfile
Big Design 1
Large field on partner/auth pages. NOT dark-ready: stays a white box in Dark. Move these to Default.
Used 65× (LeadZump 65). e.g. LeadZump dealProfile, LeadZump myProfileBp, LeadZump bpOnBoarding
Text Button
Bare text input.
Used 7× (AdZump 7). e.g. AdZump adSetSettings, AdZump metaCampaignSetup, AdZump adSetTable
Icon
Material Symbols glyphs. Size and colour come from the scheme; icons are muted unless they are the action. Used 737× in all.
Default · Primary Color Scheme
The standard for this component (most used).
Used 551× (SiteZump 32 · LeadZump 215 · AdZump 304). e.g. AdZump metaCampaignSetup, AdZump campaignPerformanceGraph, LeadZump inventoryScreen
Default · Secondary Color Scheme
A variant of the standard.
Used 98× (SiteZump 1 · LeadZump 95 · AdZump 2). e.g. LeadZump dealProfile, LeadZump bpTeammateProfile, LeadZump dashboard
Default · Light
A variant of the standard.
Used 63× (SiteZump 19 · LeadZump 15 · AdZump 29). e.g. SiteZump csPolicy, AdZump metaCampaignSetup, LeadZump shell
Default · Quaternary Color Scheme
A variant of the standard.
Used 8× (SiteZump 1 · AdZump 7). e.g. AdZump adSetSettings, AdZump metaCampaignSetup, SiteZump ssl
Default · Tertiary Color Scheme
A variant of the standard.
Used 6× (LeadZump 6). e.g. LeadZump dealProfile, LeadZump leadProfile, LeadZump businessPartnerProfile
Default · Default
A variant of the standard.
Used 4× (SiteZump 2 · AdZump 2). e.g. SiteZump assets, SiteZump icons, AdZump assets
Default · Quinary Color Scheme
A variant of the standard.
Used 3× (LeadZump 3). e.g. LeadZump addProductTemplate
Filled · Secondary Color Scheme
A variant of the standard.
Used 2× (AdZump 2). e.g. AdZump adSettings, AdZump metaCampaignSetup
Dropdown
Single or multi choice from a list. Same field geometry as TextBox. Used 581× in all.
Default · Primary Color Scheme
The standard for this component (most used).
Used 410× (SiteZump 22 · LeadZump 255 · AdZump 133). e.g. LeadZump addProduct, LeadZump dealProfile, LeadZump addProductTemplate
Default · Secondary Color Scheme
A variant of the standard.
Used 95× (SiteZump 43 · LeadZump 25 · AdZump 27). e.g. SiteZump orgDepartments, LeadZump orgDepartments, AdZump orgDepartments
Outline Dropdown · Secondary Color Scheme
A variant of the standard.
Used 27× (AdZump 27). e.g. AdZump googleCampaign, AdZump googleAd, AdZump ads
Default · Tertiary Color Scheme
A variant of the standard.
Used 21× (SiteZump 1 · LeadZump 20). e.g. LeadZump businessPartnerProfile, LeadZump dashboard, SiteZump templateManagement
Filled Dropdown · Primary Color Scheme
A variant of the standard.
Used 13× (SiteZump 1 · LeadZump 12). e.g. LeadZump employeeProfile, LeadZump dealProfile, LeadZump channelPartnerProfile
Outline Dropdown · Primary Color Scheme
A variant of the standard.
Used 7× (SiteZump 2 · LeadZump 1 · AdZump 4). e.g. SiteZump designSystem, SiteZump usageAndPurchase, LeadZump usageAndPurchase
Text Dropdown · Primary Color Scheme
A variant of the standard.
Used 7× (AdZump 7). e.g. AdZump adSetSettings, AdZump metaCampaignSetup, AdZump adSetTable
Edit On Request · Primary Color Scheme
A variant of the standard.
Used 1× (SiteZump 1). e.g. SiteZump designSystem
Popup
Dialogs. Design 1 is the standard: built-in title bar, 420px for a confirmation, 560px for a form, actions on the right (way out first, outlined; the solid action last). Open one on any page to see it. Used 406× in all.
Design 1 · Primary Color Scheme
This removes Asha Rao and her 3 deals. You cannot undo it.
The standard for this component (most used).
Used 386× (SiteZump 47 · LeadZump 264 · AdZump 75). e.g. LeadZump channelPartnerProfile, LeadZump dealProfile, LeadZump businessPartnerProfile
Default · Primary Color Scheme
This removes Asha Rao and her 3 deals. You cannot undo it.
A variant of the standard.
Used 20× (SiteZump 2 · LeadZump 2 · AdZump 16). e.g. AdZump leadPreview, AdZump leadFormTable, AdZump metaCampaignSetup
CheckBox
Boolean or multi-select. Filled Checkbox is the standard tick box. Used 186× in all.
Filled Checkbox · Primary Color Scheme
The standard for this component (most used). Renders identically to Default · Primary Color Scheme, Outline Checkbox · Primary Color Scheme, Filled Checkbox · Secondary Color Scheme; standardise on this one.
Used 117× (SiteZump 2 · LeadZump 115). e.g. LeadZump deals, LeadZump dealProfile, LeadZump dealsBp
Default · Primary Color Scheme
A variant of the standard. Renders identically to Filled Checkbox · Primary Color Scheme, Outline Checkbox · Primary Color Scheme, Filled Checkbox · Secondary Color Scheme; prefer Filled Checkbox · Primary Color Scheme.
Used 61× (SiteZump 3 · LeadZump 13 · AdZump 45). e.g. AdZump metaCampaignSetup, AdZump campaignToAdUpdate, LeadZump bpOnboardConfiguration
Outline Checkbox · Primary Color Scheme
A variant of the standard. Renders identically to Filled Checkbox · Primary Color Scheme, Default · Primary Color Scheme, Filled Checkbox · Secondary Color Scheme; prefer Filled Checkbox · Primary Color Scheme.
Used 4× (SiteZump 3 · AdZump 1). e.g. SiteZump blog, AdZump accountSettings
Filled Checkbox · Secondary Color Scheme
A variant of the standard. Renders identically to Filled Checkbox · Primary Color Scheme, Default · Primary Color Scheme, Outline Checkbox · Primary Color Scheme; prefer Filled Checkbox · Primary Color Scheme.
Used 3× (LeadZump 3). e.g. LeadZump businessPartnerProfile, LeadZump channelPartnerProfile, LeadZump dealProfile
Filled Checkbox · Quinary Color Scheme
A variant of the standard. Renders identically to Filled Checkbox · Primary Color Scheme, Default · Primary Color Scheme, Outline Checkbox · Primary Color Scheme; prefer Filled Checkbox · Primary Color Scheme.
Used 1× (AdZump 1). e.g. AdZump adSetTable
Menu
Navigation rows (the rail, side menus). The rail uses Default · Quaternary Color Scheme. Used 184× in all.
Default · Quaternary Color Scheme
The standard for this component (most used). Renders identically to Default · Primary Color Scheme, Text Menu · Primary Color Scheme; standardise on this one.
Used 112× (SiteZump 52 · LeadZump 21 · AdZump 39). e.g. AdZump shell, SiteZump shell, LeadZump shell
Outline Type Menu · Secondary Color Scheme
A variant of the standard.
Used 47× (AdZump 47). e.g. AdZump shell, AdZump generalSettings
Default · Primary Color Scheme
A variant of the standard. Renders identically to Default · Quaternary Color Scheme, Text Menu · Primary Color Scheme; prefer Default · Quaternary Color Scheme.
Used 14× (LeadZump 14). e.g. LeadZump shell, LeadZump whatsappThread
Text Menu · Primary Color Scheme
A variant of the standard. Renders identically to Default · Quaternary Color Scheme, Default · Primary Color Scheme; prefer Default · Quaternary Color Scheme.
Used 7× (LeadZump 7). e.g. LeadZump shell
Outline Type Menu · Primary Color Scheme
A variant of the standard.
Used 4× (AdZump 4). e.g. AdZump aiReport
TextArea
Multi-line text. Same field rules as TextBox. Used 146× in all.
Default · Primary Color Scheme
The standard for this component (most used).
Used 93× (SiteZump 23 · LeadZump 19 · AdZump 51). e.g. AdZump leadPreview, AdZump metaCampaignSetup, AdZump adSettings
Outline Text Area · Primary Color Scheme
A variant of the standard.
Used 37× (LeadZump 32 · AdZump 5). e.g. LeadZump dealProfile, LeadZump deals, AdZump productSummary
Edit On Request · Primary Color Scheme
A variant of the standard.
Used 11× (LeadZump 11). e.g. LeadZump employeeProfile, LeadZump bpTeammateProfile, LeadZump businessPartnerProfile
Default · Secondary Color Scheme
A variant of the standard.
Used 5× (SiteZump 1 · LeadZump 4). e.g. SiteZump blog, LeadZump businessPartnerProfile, LeadZump channelPartnerProfile
Popover
Floating panel anchored to a control (row menus, avatar menu). Uses the LightMedium shadow. Only one is open at a time. Used 137× in all.
Default · Primary Color Scheme
Shown in place on the pages listed.
The standard for this component (most used).
Used 137× (SiteZump 31 · LeadZump 79 · AdZump 27). e.g. SiteZump csPolicy, LeadZump dashboard, LeadZump channelPartnerProfile
Calendar
Date fields. Small Calendar is the standard date field; the others are older full calendars. Used 131× in all.
Small Calendar · Default · Primary Color Scheme
The standard for this component (most used).
Used 123× (SiteZump 3 · LeadZump 80 · AdZump 40). e.g. LeadZump dealProfile, LeadZump deals, AdZump campaignPerformanceGraph
Default Calendar · Default · Primary Color Scheme
A variant of the standard.
Used 7× (LeadZump 1 · AdZump 6). e.g. AdZump metaCampaignSetup, LeadZump tasksBp, AdZump AdsPerfomance
Small Calendar · Default · Secondary Color Scheme
A variant of the standard.
Used 1× (SiteZump 1). e.g. SiteZump blog
ToggleButton
On/off switch. Needs an explicit width. Used 125× in all.
Default · Secondary Color Scheme
The standard for this component (most used).
Used 74× (LeadZump 74). e.g. LeadZump addProduct, LeadZump callReport, LeadZump addProductTemplate
Small type · Primary Color Scheme
A variant of the standard.
Used 38× (SiteZump 13 · LeadZump 2 · AdZump 23). e.g. SiteZump analytics, SiteZump form, AdZump audiences
Default · Primary Color Scheme
A variant of the standard.
Used 12× (SiteZump 2 · LeadZump 7 · AdZump 3). e.g. LeadZump addProduct, LeadZump addProductTemplate, LeadZump dashboard
Outline type · Quinary Color Scheme
A variant of the standard.
Used 1× (AdZump 1). e.g. AdZump campaignSetup
Table
Data tables. Design 7 is the standard: hairline wrap at 10px radius, transparent fill, pager on the canvas. Used 118× in all.
Design 7
The standard for this component (most used).
Used 111× (SiteZump 15 · LeadZump 55 · AdZump 41). e.g. LeadZump bpTeammateProfile, LeadZump addProduct, LeadZump businessPartnerProfile
Design 10
A variant of the standard.
Used 4× (SiteZump 1 · LeadZump 1 · AdZump 2). e.g. SiteZump assets, LeadZump employeeProfile, AdZump assets
Design 1
A variant of the standard.
Used 2× (SiteZump 2). e.g. SiteZump buyTokens
Design 8
A variant of the standard.
Used 1× (AdZump 1). e.g. AdZump campaignPerformance
RadioButton
One choice from a few visible options. Used 108× in all.
Default · Secondary Color Scheme
The standard for this component (most used). Renders identically to Default · Primary Color Scheme; standardise on this one.
Used 63× (LeadZump 63). e.g. LeadZump deals, LeadZump dealsBp, LeadZump dealReport
Outline Radio Button · Primary Color Scheme
A variant of the standard. Renders identically to Outline Radio Button · Tertiary Color Scheme, Outline Radio Button · Secondary Color Scheme; standardise on this one.
Used 36× (AdZump 36). e.g. AdZump leadPreview, AdZump metaCampaignSetup, AdZump adSettings
Default · Primary Color Scheme
A variant of the standard. Renders identically to Default · Secondary Color Scheme; prefer Default · Secondary Color Scheme.
Used 5× (SiteZump 1 · LeadZump 1 · AdZump 3). e.g. SiteZump designSystem, LeadZump dealDuplication, AdZump campaignSetup
Outline Radio Button · Tertiary Color Scheme
A variant of the standard. Renders identically to Outline Radio Button · Primary Color Scheme, Outline Radio Button · Secondary Color Scheme; prefer Outline Radio Button · Primary Color Scheme.
Used 2× (SiteZump 2). e.g. SiteZump templateCategories
Outline Radio Button · Secondary Color Scheme
A variant of the standard. Renders identically to Outline Radio Button · Primary Color Scheme, Outline Radio Button · Tertiary Color Scheme; prefer Outline Radio Button · Primary Color Scheme.
Used 2× (LeadZump 2). e.g. LeadZump addProduct, LeadZump addProductTemplate
PhoneNumber
Phone field with dial code. Same field rules as TextBox. Used 93× in all.
Default · Primary Color Scheme
The standard for this component (most used).
Used 64× (SiteZump 1 · LeadZump 50 · AdZump 13). e.g. LeadZump deals, LeadZump leads, LeadZump dealsBp
Filled Textbox · Secondary Color Scheme
A variant of the standard.
Used 15× (LeadZump 15). e.g. LeadZump dealProfile, LeadZump bpTeammateProfile, LeadZump myProfileBp
Edit on Request · Primary Color Scheme
A variant of the standard.
Used 14× (LeadZump 14). e.g. LeadZump employeeProfile, LeadZump bpTeammateProfile, LeadZump channelPartnerProfile
FileUpload
Picks a file from the device and hands it to the page. Inline is a solid ink button with a white label in every scheme; Drop Area is the dashed box for drag and drop. Used 80× in all.
Inline Upload Design 1 · Primary Color Scheme
The standard for this component (most used).
Used 62× (SiteZump 3 · LeadZump 2 · AdZump 57). e.g. AdZump leadPreview, AdZump adSettings, AdZump audiences
Droparea Upload Design 3 · Primary Color Scheme
A variant of the standard.
Used 9× (LeadZump 9). e.g. LeadZump employeeProfile, LeadZump appGenerate, LeadZump templateSettings
Only icon design 1 · Primary Color Scheme
A variant of the standard.
Used 4× (AdZump 4). e.g. AdZump metaCampaignSetup
Inline Upload Design 3 · Primary Color Scheme
A variant of the standard.
Used 2× (SiteZump 1 · LeadZump 1). e.g. SiteZump assets, LeadZump addProduct
Droparea Upload Design 1 · Primary Color Scheme
A variant of the standard.
Used 2× (LeadZump 1 · AdZump 1). e.g. LeadZump whatsappThread, AdZump campaignConfiguration
Only icon design 1 · Quaternary Color Scheme
A variant of the standard.
Used 1× (LeadZump 1). e.g. LeadZump leadProfile
FileSelector
Picks a file from the app's own file store (upload, browse, choose). Row actions are muted, no hue. The samples work for real inside a /styleGuide folder of the signed-in client's secured files; delete and rename are hidden. Used 63× in all.
File Upload With Progress Bar · Primary Color Scheme
The standard for this component (most used).
Used 56× (SiteZump 6 · LeadZump 45 · AdZump 5). e.g. LeadZump dealProfile, LeadZump channelPartnerProfile, LeadZump addProduct
Button to open browser · Primary Color Scheme
A variant of the standard.
Used 4× (SiteZump 3 · AdZump 1). e.g. SiteZump socialPreview, AdZump campaignConfiguration
Full browser · Primary Color Scheme
A variant of the standard.
Used 2× (LeadZump 2). e.g. LeadZump assetManagement, LeadZump whatsappThread
Default · Secondary Color Scheme
A variant of the standard.
Used 1× (SiteZump 1). e.g. SiteZump blog
Tabs
Tab with highlight is the standard: a segmented control on a chip track. Tab with underline for page-level tabs. Used 60× in all.
Tab with highlight · Primary Color Scheme
The standard for this component (most used).
Used 37× (SiteZump 1 · LeadZump 30 · AdZump 6). e.g. AdZump metaCampaignSetup, LeadZump bpTeammateProfile, LeadZump deals
Tab with underline · Primary Color Scheme
A variant of the standard.
Used 13× (SiteZump 2 · LeadZump 10 · AdZump 1). e.g. LeadZump conversationPage, SiteZump csPolicy, SiteZump ssl
Default · Primary Color Scheme
A variant of the standard.
Used 10× (LeadZump 1 · AdZump 9). e.g. AdZump campaignSetup, AdZump campaignConfiguration, LeadZump callDetails
ProgressBar
Progress on a chip track. Used 59× in all.
Progress Bar Deafault Design
The standard for this component (most used).
Used 58× (LeadZump 6 · AdZump 52). e.g. AdZump googleCampaignDetails, AdZump leadPreview, AdZump adSettings
Progress Bar circular design.
A variant of the standard.
Used 1× (LeadZump 1). e.g. LeadZump callReport
Link
Inline links. Prefer a Text Button Button for actions; Link is for navigation inside copy. Used 24× in all.
Default · Primary Color Scheme
The standard for this component (most used). Renders identically to Underline Link · Tertiary Color Scheme, Underline Link · Quaternary Color Scheme, Underline Link · Primary Color Scheme; standardise on this one.
Used 17× (SiteZump 3 · LeadZump 8 · AdZump 6). e.g. LeadZump bpOnBoarding, SiteZump ownerRequestApp, LeadZump whatsappThread
Underline Link · Tertiary Color Scheme
A variant of the standard. Renders identically to Default · Primary Color Scheme, Underline Link · Quaternary Color Scheme, Underline Link · Primary Color Scheme; prefer Default · Primary Color Scheme.
Used 2× (SiteZump 1 · AdZump 1). e.g. SiteZump assets, AdZump assets
Underline Link · Quaternary Color Scheme
A variant of the standard. Renders identically to Default · Primary Color Scheme, Underline Link · Tertiary Color Scheme, Underline Link · Primary Color Scheme; prefer Default · Primary Color Scheme.
Used 2× (SiteZump 1 · AdZump 1). e.g. SiteZump assets, AdZump assets
Underline Link · Primary Color Scheme
A variant of the standard. Renders identically to Default · Primary Color Scheme, Underline Link · Tertiary Color Scheme, Underline Link · Quaternary Color Scheme; prefer Default · Primary Color Scheme.
Used 2× (LeadZump 2). e.g. LeadZump appGenerate, LeadZump whatsappThread
Default · Tertiary Color Scheme
A variant of the standard. Renders identically to Default · Primary Color Scheme, Underline Link · Tertiary Color Scheme, Underline Link · Quaternary Color Scheme; prefer Default · Primary Color Scheme.
Used 1× (AdZump 1). e.g. AdZump dashboard
RangeSlider
Numeric range input. Used 10× in all.
Default · Primary Color Scheme
The standard for this component (most used).
Used 10× (AdZump 10). e.g. AdZump adSetSettings, AdZump metaCampaignSetup, AdZump audiences
Stepper
Multi-step flows. Ring and title colours come from the theme. Used 6× in all.
Default · Primary Color Scheme
The standard for this component (most used).
Used 4× (LeadZump 2 · AdZump 2). e.g. LeadZump dealProfile, AdZump campaignSetup, AdZump metaCampaignSetup
Default · Secondary Color Scheme
A variant of the standard.
Used 2× (LeadZump 2). e.g. LeadZump addProduct, LeadZump addProductTemplate
Colour tokens (for expressions)
Only when a slot or role cannot do it: `Theme.<name>` in an expression. Each value is shown as light / dark.
Theme.fontColorOne
ink
#191918 / #EEEDE9
Primary text, icons, solid fills.
Theme.fontColorTwo
muted
#62625E / #9B9B96
Secondary text, labels, inactive icons.
Theme.backgroundColorTwo
canvas
#F4F4F2 / #121211
Page ground.
Theme.backgroundColorThree
panel
#FFFFFF / #1B1B1A
Cards and panels.
Theme.backgroundColorFour
chip
#F2F1EC / #252523
Chips, badges, tracks.
Theme.borderColorOne
line
#ECEBE6 / #2B2B29
Hairlines and dividers.
Theme.borderColorTwo
edge
#D6D5CF / #42423F
Control outlines.
Theme.colorSeven
on-solid
#FFFFFF / #1B1B1A
Text on an ink fill (white in light, dark in dark).
Theme.colorTwelve
error
#C0362C / #F2726A
Status only: field errors, danger toasts.
Theme.colorEleven
success
#1E7A46 / #4FC48A
Status only: success toasts and states.
Theme.warningColor
warning
#A35F00 / #E8A64E
Status only.
Theme.messageInformationColor
info
#2E6DB4 / #6FA8EC
Status only: information toasts and links that need a hue.