Overview

Slacc

Visual Theme

A workplace-messaging brand built around chromatic monotheism: one deep aubergine primary (#4a154b) does the work of the entire accent system, appearing on filled CTAs, the featured pricing tier, the footer band, and the wordmark. Around that aubergine the system stages an unusually delicate ecosystem — cream-lavender hero canvases washed with soft pastel-mesh gradients (peach, lavender, dusty green) that pulse behind floating product-UI mockups. The mockups sit above the gradient, never inside chrome; the gradient itself is the brand's flavor of depth-without-shadows. The overall mood is calm, expansive, and quietly confident.

Color Principles

The palette is aubergine-and-cream with a single blue exception. Aubergine (#4a154b) is reserved for filled CTAs, the featured tier, and the footer; its pressed lift is #611f69. Surfaces run white (#ffffff), warm cream (#f4ede4), and pale lavender (#f9f0ff). Body text is near-black ink (#1d1d1d) with muted #696969 for secondary copy, and #d9bdde mauve on aubergine surfaces. Inline links break to a saturated blue (#1264a3, hover #3860be) — the only non-aubergine accent anywhere. Semantics stay warm: crimson error (#cc4117) and green success (#007a5a).

Typography

Two humanist sans tiers. The display tier (Salesforce Avant Garde, substituted with Inter) runs at 700 weight from 32px to 64px with tight negative letter-spacing (-0.768px at 64px) for editorial density. The UI tier (Salesforce Sans, also Inter) handles body, captions, and button labels at 400-700 with a relaxed 1.55 leading. Eyebrows render uppercase with wide 0.96px tracking.

Layout

8px base spacing (with 4/12/16/20/24/28 sub-tokens), sections at 64-96px, cards at 32px internal padding, aubergine bands at 48px. Content centers in a ~1240px container while pastel-mesh gradients bleed past its edges. Radius runs 2px (tags) / 4px (inputs) / 8-12px (cards, mockups) / 16px (pricing cards) / 90px (every button). Depth comes from the pastel-mesh gradient and soft rgba(0,0,0,0.1) 0 0 32px mockup halos — never heavy drop shadows.

Components

Buttons are always 90px pills with generous 28-30px horizontal padding — over-padded by SaaS defaults, deliberately so. The aubergine filled pill is the dominant CTA; a soft lavender pill is the secondary. Pricing uses white hairline-bordered cards with one inverted aubergine featured tier. Statistics render as massive 50px aubergine numerals on white. Every marketing page closes with a full-bleed aubergine footer band.

Preview

Open in new tab ↗

Derived view rendered server-side from package tokens and components — no authored copy.

Colors (19)

aubergine

#4a154b

aubergineDeep

#481a54

auberginePress

#611f69

aubergineTint

#592466

onPrimary

#ffffff

ink

#1d1d1d

inkMute

#696969

linkBlue

#1264a3

linkHover

#3860be

canvas

#ffffff

canvasCream

#f4ede4

canvasLavender

#f9f0ff

surfaceElev

#ffffff

surfaceAubergine

#4a154b

hairline

#e6e6e6

hairlineStrong

#000000

semanticError

#cc4117

semanticSuccess

#007a5a

onAubergineMute

#d9bdde

Typography (6)

display

Salesforce Avant Garde, Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

heading

Salesforce Avant Garde, Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

body

Salesforce Sans, Inter, system-ui, -apple-system, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

ui

Salesforce Sans, Inter, system-ui, -apple-system, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

mono

ui-monospace, 'SF Mono', Menlo, Consolas, monospace

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

scale

unparsed

{
  "displayXxl": "64px/1.12",
  "displayXl": "58px/1.25",
  "displayLg": "50px/1.12",
  "displayMd": "32px/1.25",
  "headingLg": "24px/1.33",
  "headingMd": "22px/1.40",
  "headingSm": "18px/1.56",
  "bodyLg": "18px/1.55",
  "body": "16px/1.55",
  "bodyStrong": "16px/1.50",
  "caption": "14px/1.43",
  "microCap": "12px/1.0"
}

Components (14)

Button

Over-padded 90px pill buttons. Aubergine filled primary is the dominant CTA; soft lavender secondary echoes the primary surface; aubergine-outline variants for white canvases.

html

Hand-tuned CSS, no framework

2 props · 5 states · 10 tags · 2 sources

Missing states: loading

Input

Single-line field on white with a 4px radius and hairline border. Focus shifts the border to aubergine; error copy uses the warm crimson semantic color.

html

Hand-tuned CSS, no framework

2 props · 5 states · 8 tags · 2 sources

Card

Pricing tier card on white with a 16px radius and hairline border. The featured tier inverts to an aubergine fill — the brand's signature pricing move.

html

Hand-tuned CSS, no framework

1 props · 2 states · 10 tags · 2 sources

Missing states: focus-visible, disabled

Badge

Small all-caps eyebrow pill on a cream shade — sits above pricing-tier titles and feature labels.

html

Hand-tuned CSS, no framework

1 props · 1 states · 7 tags · 2 sources

Missing states: hover, focus-visible, disabled

Heading

Display hierarchy in the Avant Garde tier at 700 weight with tight negative tracking (-0.768px at 64px) for editorial-density headlines.

html

Hand-tuned CSS, no framework

1 props · 1 states · 9 tags · 2 sources

Missing states: hover, focus-visible, disabled

Link

Inline links in saturated blue — the only chromatic departure from the aubergine-and-cream world. No underline until hover; on aubergine surfaces links go white with a persistent underline.

html

Hand-tuned CSS, no framework

1 props · 4 states · 4 tags · 2 sources

Missing states: disabled

Hero

Cream-lavender hero with a pastel-mesh gradient backdrop, 64px display headline, and floating product-UI mockup lifted by the gradient rather than a shadow.

html

Hand-tuned CSS, no framework

1 props · 1 states · 8 tags · 2 sources

Missing states: hover, focus-visible, disabled

Nav

Light top nav on white with a wordmark on the left, centered links, and two pill buttons on the right (soft lavender Sign In, aubergine Try For Free).

html

Hand-tuned CSS, no framework

0 props · 3 states · 6 tags · 2 sources

Missing states: disabled

Footer

Full-bleed aubergine footer band with 4-5 columns of muted-mauve link groups and a small legal row — the page's signature closing chapter.

html

Hand-tuned CSS, no framework

0 props · 2 states · 7 tags · 2 sources

Missing states: focus-visible, disabled

Stat

Statistics callout in massive 50px aubergine display numerals on white — quantitative emphasis through scale alone.

html

Hand-tuned CSS, no framework

1 props · 1 states · 7 tags · 2 sources

Missing states: hover, focus-visible, disabled

Quote

Customer pull-quote in 32px display type with an aubergine opening mark on a cream band — the brand's testimonial signature.

html

Hand-tuned CSS, no framework

0 props · 1 states · 5 tags · 2 sources

Missing states: hover, focus-visible, disabled

Tag

Small status pill at a tight 2px radius for hairline tags and channel markers — the rare non-pill radius in the system.

html

Hand-tuned CSS, no framework

1 props · 2 states · 8 tags · 2 sources

Missing states: focus-visible, disabled

Avatar

Rounded-square avatar at an 8px radius — the workplace-messaging convention — with aubergine and lavender initial fills for team rosters and message rows.

html

Hand-tuned CSS, no framework

1 props · 1 states · 9 tags · 2 sources

Missing states: hover, focus-visible, disabled

Tab

Pill-style tab list inside a lavender container — used to switch between marketing views like Channels, Huddles, and Canvas.

html

Hand-tuned CSS, no framework

1 props · 4 states · 4 tags · 2 sources

Missing states: disabled

DESIGN.md

Slacc

Visual Theme

A workplace-messaging brand built around chromatic monotheism: one deep aubergine primary (#4a154b) does the work of the entire accent system, appearing on filled CTAs, the featured pricing tier, the footer band, and the wordmark. Around that aubergine the system stages an unusually delicate ecosystem — cream-lavender hero canvases washed with soft pastel-mesh gradients (peach, lavender, dusty green) that pulse behind floating product-UI mockups. The mockups sit above the gradient, never inside chrome; the gradient itself is the brand's flavor of depth-without-shadows. The overall mood is calm, expansive, and quietly confident.

Color Principles

The palette is aubergine-and-cream with a single blue exception. Aubergine (#4a154b) is reserved for filled CTAs, the featured tier, and the footer; its pressed lift is #611f69. Surfaces run white (#ffffff), warm cream (#f4ede4), and pale lavender (#f9f0ff). Body text is near-black ink (#1d1d1d) with muted #696969 for secondary copy, and #d9bdde mauve on aubergine surfaces. Inline links break to a saturated blue (#1264a3, hover #3860be) — the only non-aubergine accent anywhere. Semantics stay warm: crimson error (#cc4117) and green success (#007a5a).

Typography

Two humanist sans tiers. The display tier (Salesforce Avant Garde, substituted with Inter) runs at 700 weight from 32px to 64px with tight negative letter-spacing (-0.768px at 64px) for editorial density. The UI tier (Salesforce Sans, also Inter) handles body, captions, and button labels at 400-700 with a relaxed 1.55 leading. Eyebrows render uppercase with wide 0.96px tracking.

Layout

8px base spacing (with 4/12/16/20/24/28 sub-tokens), sections at 64-96px, cards at 32px internal padding, aubergine bands at 48px. Content centers in a ~1240px container while pastel-mesh gradients bleed past its edges. Radius runs 2px (tags) / 4px (inputs) / 8-12px (cards, mockups) / 16px (pricing cards) / 90px (every button). Depth comes from the pastel-mesh gradient and soft rgba(0,0,0,0.1) 0 0 32px mockup halos — never heavy drop shadows.

Components

Buttons are always 90px pills with generous 28-30px horizontal padding — over-padded by SaaS defaults, deliberately so. The aubergine filled pill is the dominant CTA; a soft lavender pill is the secondary. Pricing uses white hairline-bordered cards with one inverted aubergine featured tier. Statistics render as massive 50px aubergine numerals on white. Every marketing page closes with a full-bleed aubergine footer band.

Adapters (6)

adapters/tokens.css
text/css
Download
adapters/shadcn-registry.json
application/json
Download
adapters/tailwind.config.js
text/javascript
Download
adapters/react/index.ts
text/typescript
Download
adapters/html/index.html
text/html
Download
adapters/html/styles.css
text/css
Download

All files (11)

DESIGN.mdtext/markdown
SKILL.mdtext/markdown
tokens/colors.jsonapplication/json
tokens/typography.jsonapplication/json
tokens/components.jsonapplication/json
adapters/tokens.csstext/css
adapters/shadcn-registry.jsonapplication/json
adapters/tailwind.config.jstext/javascript
adapters/react/index.tstext/typescript
adapters/html/index.htmltext/html
adapters/html/styles.csstext/css

Versions

v1.0.07/22/2026
Download