Design teardown
Slack
A full-bleed plum stage opens the page, then the layout drops into a white, centered column. Actions are pills, headlines stay short, and a looping product frame sits in the middle of the first screen.
slack.com
Design character
Plum product stage
The first screen is a vertical plum gradient with white type, a centered two-line headline, one support sentence, and a pair of pill buttons. A framed product clip plays underneath, with a translucent chip row to change the scene. Below that, white bands hold a card row, a tabbed feature split, and a closing plum strip before a quiet multi-column footer.
Typography
Display and buttons use Salesforce Avant Garde at heavy weights with slight negative tracking. Interface text, navigation, cards, and badges use Salesforce Sans. Headlines are large and tight; body copy sits near 16–18px with comfortable line height.
Color system
The opening stage is a plum gradient from deep aubergine through a bright violet and back. The rest of the page is white with near-black text, a purple action color, and a pale lilac wash for badges and the top announcement bar.
Spacing and geometry
An 8px rhythm with roomy section padding and compact pill padding. The hero starts well below a slim announcement bar.
Layout
Full-bleed color bands with a centered 1230px column. The hero, a later feature band, and the closing strip are plum; the middle and the footer are white.
Motion
The hero product frame is a video that crossfades between scenes. A chip row and a pause control sit under it. Section tabs and a card row also swap content without a page change.
UI fingerprint
- Plum gradient The hero runs from #481a54 through #b340e3 and #730394, then returns to #481a54.
- Pill everything Buttons, scene chips, and status labels are fully rounded, with a 1.5px ring on the quiet action.
- Two type families Salesforce Avant Garde carries headlines and buttons; Salesforce Sans carries the interface.
- Product theater An 800px rounded video sits center stage, with chips to change the scene and a pause control.