Typography
scale ratio 1.403- Interbody400 500 600 70060%
- Degulardisplay70027%
- Bricolage Grotesqueother600 7007%
- JetBrains Monomono400 6006%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Bricolage Grotesque | 62px | 700 | 1.02 | -0.028em |
| headline | Degular | 60px | 700 | 0.98 | -0.02em |
| title | Inter | 24px | 600 | 1.333 | -0.02em |
| body | Inter | 16px | 400 | 1.5 | -0.011em |
| body-sm | Inter | 14px | 400 | 1.429 | 0em |
| label | Inter | 14px | 500 | 1.5 | 0em |
| mono | JetBrains Mono | 10px | 600 | 1.5 | 0em |
Type scale
Aa8Aa8.5Aa9Aa9.5Aa10Aa11Aa12Aa13Aa14Aa16Aa18Aa24Aa60Aa62
- Body size
- 16px / 1.5
- Display size
- 62px
- Display tracking
- -0.028em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 16.32:1
- Muted on bg
- 10.52:1
- Accent on bg
- 3.67:1
- Dark mode
- none
Declared accent tokens
- --chakra-colors-bg-accentTwo-primary#8004E2not on page
- --chakra-colors-bg-accentOne-primary#146EFEpainted
- --chakra-colors-bg-accentOne-secondary#A6C8FFnot on page
- --chakra-colors-bg-accentTwo-secondary#C782FDnot on page
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 7
- 8
- 12
- 16
- 24
- 32
- 48
- 96
Corner radii
610122432pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 80px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #3481FE
- textColor
- #FFFFFFF5
- rounded
- 10px
- padding
- 6px 12px
- height
- 33px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 600
- shadow
- rgba(15, 102, 189, 0.2) 0px -1px 0px 0px inset, rgba(161, 204, 247, 0.2) 0px 1px 0px 0px inset, rgba(57, 148, 239, 0.16)
card
- rounded
- 24px
- padding
- 16px
- border
- 1px solid #DDE4EE
Layout & motion
- Container
- 1248px
- Grid columns
- 6
- Hero
- centered+media-below
- Navigation
- top-fixed+transparent
- Page height
- 8,790px
- Easing
- ease
- Durations
- 120ms 180ms 200ms 240ms
- Transitions
- 89
- Keyframes
- 8
- Stack
- next.js, posthog, google-tag-manager, cloudfront
Page sections (9)
section labels are heuristic
01heroagents humans The open data workspace built for
02features?Models
03features?From quick explorations to powerful data apps
04features?Collaborate with the whole team
05features?100s of integrations
06features?Improve your data security with Deepnote
07testimonialsLoved by a community of 600,000+ data pros
08cta?Try Deepnote now
09footerFooter
How Deepnote compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 62px: larger than 54% of indexed sites (median 60px).
- Type scale
- 1.40×: steeper than 80% of indexed sites (median 1.28×).
- Container
- 1248px: wider than 51% of indexed sites (median 1242px).
- Text contrast
- 16.3:1: lower than 65% of indexed sites (median 17.6:1).
- Page length
- 8,790px: longer than 56% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Degular
- The only site in the index that loads Degular.
- 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 Deepnote use?
Deepnote uses Inter for body text. Degular is used for headings. Bricolage Grotesque is used for other.
What are Deepnote's brand colors?
Deepnote's website uses a light scheme: background #FFFFFF, text #1A202C, muted text #334052 and borders #DDE4EE.
How is Deepnote's website laid out?
The most common corner radius is fully rounded (pill), body text is 16px with 1.5 line height, and the page container is 1248px wide.
Similar to Deepnote
Inter / JetBrains Mono#FFFFFF
Expoexpo.dev
Inter / Inter Display / Tiempos Text#FFFFFF
Attioattio.com
SF Pro (system-ui) / Inter / JetBrains Mono#FFFFFF
Capacitiescapacities.io
Inter / JetBrains Mono / Departure Mono#FFFFFF
Pipedreampipedream.com
Inter / Inter Tight / JetBrains Mono#F5F5F5
Upstashupstash.com