Design System Analysis of Slacc

An inspired interpretation of Slacc's design language — a workplace messaging brand built on a deep aubergine primary, cream-lavender hero gradients with floating product UI mockups, blue inline links, and over-padded pill CTAs at 90px radius.

01 — Colors

Color Palette

Core brand and surface tokens.

Primary
#4a154b
Brand primary surface and CTA color.
Ink
#1d1d1d
Default body text color.
On Primary
#ffffff
Text on primary surfaces.
Canvas
#ffffff
Default content surface.
Canvas Alt
#f4ede4
Secondary surface / band fill.
Hairline
#e6e6e6
1px divider on cards and tables.
Muted
#696969
Secondary text and helper copy.
Accent 2
#1264a3
Inline link / second chromatic accent.

Brand & Accent (extended)

Aubergine Press
#611f69
Pressed state lift of primary.
Aubergine Tint
#592466
Border accent on aubergine surfaces.
Canvas Lavender
#f9f0ff
Soft section band fill.
On Aubergine Mute
#d9bdde
Muted text on aubergine surfaces.

02 — Typography

Typography Scale

Display tier handles hero and section openers; body tier carries UI copy and captions.

display-xxl64px / 700 / 1.12 / -0.768px
Display headline
display-lg50 / 700 / 1.12 / -0.6px
Section opener
display-md32 / 700 / 1.25 / -0.256px
Card title
heading-lg24 / 700 / 1.33
Pricing tier name
body-lg18 / 400 / 1.55
Marketing body lead — relaxed leading for comfortable reading at scale.
body-md16 / 400 / 1.55
Default UI body, table cells, form labels.
caption14 / 400 / 1.43
Helper copy, footnotes.
button-md16 / 700 / 1.38 / 0.2px
CTA Label
micro-cap12 / 700 / 1.0 / 0.96px
Eyebrow Label

03 — Components

Button Variants

Primary, secondary, and outline variants.

button-primary
button-secondary
button-outline
button-secondary-pill · lavender
button-outline-aubergine

04 — Components

Card Examples

Pricing tiers with one inverted featured tier, plus alt-canvas feature card.

Starter

$0

For small teams.

  • Core features
  • Email support
  • 3 seats

Pro

$29

For growing teams.

  • Everything in Starter
  • Priority support
  • 20 seats

Business

$80

For scaled organizations.

  • Everything in Pro
  • SSO + audit log
  • Unlimited seats

Built-in security

SOC 2 Type II, GDPR, HIPAA-ready out of the box.

05 — Components

Form Elements

Standard inputs with hairline borders; focus replaces hairline with primary color.

06 — Foundations

Spacing Scale

8px base with denser sub-units for fine vertical rhythm.

xs · 4px
sm · 8px
md · 12px
lg · 16px
xl · 24px
xxl · 32px
huge · 64px

07 — Foundations

Border Radius Scale

From inputs to pill buttons; the brand's radius vocabulary.

sm · 4px
md · 8px
lg · 12px
xl · 16px
button · 90px

08 — Foundations

Elevation & Depth

Layered shadow stacks for surface lift; deeper shadows for floating panels.

L0 · Flat
L1 · Card
L2 · Mockup halo
L3 · Toast

09 — Responsive

Responsive Behavior

Display sizes scale through the breakpoint stair; pricing tiers stair-step 4-up to 1-up.

NameWidthKey Changes
Wide≥ 1440pxFull hero band; pricing 4-up
Desktop1024–1440pxDefault content max-width
Tablet768–1023pxPricing 2-up; grid feature 1-up
Mobile< 768pxPricing 1-up; hamburger nav
375
768
1024
1440

Touch Targets

Pill buttons hit ≥44×44px on mobile. Form fields stay at the 44px minimum. WCAG AAA compliant.

Collapsing Strategy