Typography
scale ratio 1.341- Focalcss: Focal Webdisplay400 50069%
- Focal Textbody400 50018%
- Hal Timezoneother40012%
- Hal Timezone Monomono4002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Focal | 96px | 500 | 0.9 | -0.04em |
| headline | Focal | 59.14px | 500 | 0.9 | -0.02em |
| title | Focal | 16.29px | 500 | 0.96 | -0.02em |
| body | Focal Text | 16.29px | 400 | 1.1 | 0em |
| label | Focal | 15.2px | 400 | 0.9 | 0em |
| mono | Hal Timezone Mono | 9px | 400 | 1.22 | 0em |
Type scale
Aa9Aa12Aa13.5Aa14Aa14.5Aa15Aa16.5Aa24Aa27.5Aa41Aa49.5Aa59Aa96
- Body size
- 16.5px / 1.2
- Display size
- 96px
- Display tracking
- -0.04em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- undefined:1
- Accent on bg
- 1.23:1
- Dark mode
- none
Declared accent tokens
- --brand-colors--red#EC0648painted
- --brand-colors--cyan#99EDFFpainted
- --brand-colors--blue#115EF3painted
- --brand-colors--neon#ADFF00painted
Space, shape & depth
Spacing scale
- 3.5
- 4
- 5
- 5.5
- 6
- 7
- 8
- 8.5
- 9.5
- 10
- 10.5
- 12
- 13.5
- 17
Corner radii
1.523.54pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 86px
Components
exact computed valuesbutton-primary
Get Started
- backgroundColor
- #ADFF00
- textColor
- #403700
- rounded
- 2px
- padding
- 13.7px 22.3px
- height
- 44px
- fontFamily
- Focal
- fontSize
- 16.29px
- fontWeight
- 500
- border
- 1px solid #ADFF00
button-secondary
Contact Sales
- backgroundColor
- #FFFFFF
- textColor
- #000000
- rounded
- 2px
- padding
- 13.7px 22.3px
- height
- 44px
- fontFamily
- Focal
- fontSize
- 16.29px
- fontWeight
- 500
- border
- 1px solid #FFFFFF
Layout & motion
- Container
- 1303px
- Grid columns
- 2
- Hero
- left-aligned
- Navigation
- none-detected
- Page height
- 7,184px
- Easing
- cubic-bezier(0.25, 0.46, 0.45, 0.94)
- Durations
- 100ms 200ms 300ms 500ms
- Transitions
- 25
- Keyframes
- 4
- Stack
- webflow, gsap, jquery, vercel, cloudflare
Page sections (6)
section labels are heuristic
01heroYour full stack for generative media
02feature detail?Access, deploy and train generative media models.
03code sample?Explore 1500+ state of the art generative media models
04testimonialsBuilt for enterprise scale
05cta?Build, deploy, and train on fal.
06footer
How Fal compares
- Body text
- 16.5px: larger than 64% of indexed sites (median 16px).
- Largest heading
- 96px: larger than 89% of indexed sites (median 60px).
- Type scale
- 1.34×: steeper than 67% of indexed sites (median 1.28×).
- Container
- 1303px: wider than 73% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 7,184px: shorter than 59% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- Focal
- The only site in the index that loads Focal.
- Focal Text
- The only site in the index that loads Focal Text.
- 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 Fal use?
Fal uses Focal (loaded as "Focal Web") for headings. Focal Text is used for body text. Hal Timezone is used for other.
What are Fal's brand colors?
Fal's website uses a light scheme: background #FFFFFF, text #000000 and borders #FFFFFF.
How is Fal's website laid out?
The most common corner radius is 3.5px, body text is 16.5px with 1.2 line height, and the page container is 1303px wide.
