Typography
scale ratio 1.289- Salesforce Avant Gardecss: Salesforce-Avant-Gardedisplay400 600 70061%
- Salesforce Sanscss: Salesforce-Sansbody300 400 70039%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Salesforce Avant Garde | 64px | 700 | 1.063 | -0.012em |
| headline | Salesforce Avant Garde | 32px | 700 | 1.25 | -0.012em |
| title | Salesforce Avant Garde | 24px | 700 | 1.25 | -0.004em |
| body | Salesforce Sans | 18px | 400 | 1.555 | -0.001em |
| body-sm | Salesforce Sans | 16px | 400 | 1.555 | -0.001em |
| label | Salesforce Sans | 16px | 700 | 1.5 | 0em |
Type scale
Aa12Aa14Aa15Aa16Aa18Aa22Aa24Aa32Aa50Aa64
- Body size
- 18px / 1.555
- Display size
- 64px
- Display tracking
- -0.012em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 17.76:1
- Accent on bg
- 9.68:1
- Dark mode
- none
Declared accent tokens
- --article-theme-primary#481A54painted
Space, shape & depth
Spacing scale
- 4
- 6
- 7
- 8
- 10
- 12
- 16
- 18
- 20
- 24
- 32
- 40
- 96
- 105
Corner radii
416pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 56px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #730394
- textColor
- #FFFFFF
- rounded
- 4px
- padding
- 12px 16px
- height
- 42px
- fontFamily
- Salesforce Sans
- fontSize
- 14px
- fontWeight
- 700
card
- rounded
- 16px
- padding
- 0px
- backgroundColor
- #FFFFFF
- border
- 1px solid #F3F3F3
Layout & motion
- Container
- 1230px
- Grid columns
- 5
- Hero
- centered+media-below
- Navigation
- top-fixed+transparent
- Page height
- 10,996px
- Easing
- cubic-bezier(0.165, 0.84, 0.44, 1)
- Durations
- 200ms 420ms 500ms 4000ms
- Transitions
- 34
- Keyframes
- 1
- Stack
- jquery, google-tag-manager
Page sections (10)
01nav
04testimonials
05logosThe most innovative companies run their business in Slack
06feature detailWe’re in the business of growing businesses
07statsMillions of people love working in Slack
08testimonialsYour Slack deep dive starts here
09footerSee all you can accomplish in Slack
10footer
How Slack compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 64px: larger than 56% of indexed sites (median 60px).
- Type scale
- 1.29×: steeper than 52% of indexed sites (median 1.28×).
- Container
- 1230px: narrower than 53% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 10,996px: longer than 74% of indexed sites (median 8,217px).
- Corner radius
- Mostly 16px, shared by 11 of 274 indexed sites (4%).
- Salesforce Avant Garde
- The only site in the index that loads Salesforce Avant Garde.
- Salesforce Sans
- The only site in the index that loads Salesforce Sans.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Slack use?
Slack uses Salesforce Avant Garde (loaded as "Salesforce-Avant-Garde") for headings. Salesforce Sans (loaded as "Salesforce-Sans") is used for body text.
What are Slack's brand colors?
Slack's website uses a light scheme: background #FFFFFF, text #000000, muted text #181818 and borders #F3F3F3.
How is Slack's website laid out?
The most common corner radius is 16px, body text is 18px with 1.555 line height, and the page container is 1230px wide.
