Typography
scale ratio 1.266- Oraclecss: oracledisplay + body400 50074%
- Interother400 500 60025%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Oracle | 32px | 400 | 1.2 | -0.02em |
| headline | Oracle | 24px | 400 | 1.2 | -0.02em |
| title | Oracle | 16px | 400 | 1.5 | -0.02em |
| body | Oracle | 16px | 400 | 1.5 | -0.02em |
| body-sm | Inter | 12px | 500 | 1.375 | 0em |
| label | Oracle | 15px | 400 | 1.5 | -0.02em |
Type scale
Aa8Aa9Aa10Aa11Aa12Aa13Aa15Aa16Aa18Aa20Aa24Aa32Aa52
- Body size
- 16px / 1.5
- Display size
- 32px
- Display tracking
- -0.02em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 18.56:1
- Muted on bg
- 3.53:1
- Accent on bg
- 5.15:1
- Dark mode
- none
Declared accent tokens
- --primary#4F46E5not on page
- --color-view-primary-DEFAULT#6366F1painted
Space, shape & depth
Spacing scale
- 2
- 4
- 6
- 7
- 8
- 10
- 12
- 16
- 18
- 20
- 24
- 32
- 64
Corner radii
268121420.52832pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 208px
Components
exact computed valuesbutton-primary
Sign up
- backgroundColor
- #5E51F8
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 4px 24px
- height
- 30.5px
- fontFamily
- Oracle
- fontSize
- 15px
- fontWeight
- 500
button-secondary
Download
- textColor
- #1C1917
- rounded
- 14px
- padding
- 4px 8px
- height
- 29.5px
- fontFamily
- Inter
- fontSize
- 13px
- fontWeight
- 500
- border
- 1px solid #E7E5E4
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0
card
- rounded
- 28px
- padding
- 0px
- backgroundColor
- #FFFFFF
- border
- 1px solid #E7E5E4
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0
input
- rounded
- 14px
- height
- 30.4px
- padding
- 8px 12px
- backgroundColor
- #FFFFFF
- border
- 1px solid #E7E5E4
Layout & motion
- Container
- 1300px
- Grid columns
- 6
- Hero
- left-aligned
- Navigation
- top-sticky+transparent
- Page height
- 10,710px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 220ms 300ms
- Transitions
- 277
- Keyframes
- 6
- Stack
- next.js, tailwind, posthog, vercel
Page sections (9)
section labels are heuristic
01nav
02heroAll-in-one video creation
04feature detail?Download
05features?Video Analytics in Tella 📈
06logosMore videos. Less subscriptions.
07feature detail?Frequently asked questions
08feature detail?Record better videos, faster
09footerCompany
How Tella compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 32px: smaller than 85% of indexed sites (median 60px).
- Type scale
- 1.27×: flatter than 57% of indexed sites (median 1.28×).
- Container
- 1300px: wider than 70% of indexed sites (median 1242px).
- Text contrast
- 18.6:1: higher than 59% of indexed sites (median 17.6:1).
- Page length
- 10,710px: longer than 72% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Oracle
- The only site in the index that loads Oracle.
- Inter
- One of 58 indexed sites that load Inter (21%).
- 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 Tella use?
Tella uses Oracle (loaded as "oracle") for headings and body text. Inter is used for other.
What are Tella's brand colors?
Tella's website uses a light scheme: background #FDFDFD, surface #FFFFFF99, text #111111, muted text #11111180 and borders #11111114.
How is Tella'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 1300px wide.
