Typography
- Suisse Int'lcss: Suisse Intldisplay + body400 450 500 600100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Suisse Int'l | 60px | 400 | 1.05 | 0em |
| headline | Suisse Int'l | 30px | 600 | 1.2 | -0.015em |
| title | Suisse Int'l | 24px | 600 | 1.333 | 0em |
| label | Suisse Int'l | 14px | 400 | 1.429 | 0.011em |
Type scale
Aa12Aa13Aa14Aa15Aa16Aa18Aa20Aa24Aa30Aa52Aa60Aa72
- Body size
- n/a
- Display size
- 60px
- Display tracking
- 0em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 12.63:1
- Muted on bg
- 5.01:1
- Accent on bg
- 2.80:1
- Dark mode
- none
Declared accent tokens
- --sidebar-primary#1447E6not on page
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 14
- 16
- 20
- 24
- 32
- 40
- 48
- 64
- 96
Corner radii
8101434pill
Shadows (4)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
Open Krea
- backgroundColor
- #FFFFFF
- textColor
- #000000
- rounded
- 9999px
- padding
- 24px 40px
- height
- 48px
- fontFamily
- Suisse Int'l
- fontSize
- 16px
- fontWeight
- 450
button-secondary
Log in
- backgroundColor
- #262626
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 8px 16px
- height
- 36px
- fontFamily
- Suisse Int'l
- fontSize
- 14px
- fontWeight
- 450
Layout & motion
- Container
- 1312px
- Grid columns
- 16
- Hero
- centered-over-media
- Navigation
- top-static+transparent
- Page height
- 900px
- Easing
- cubic-bezier(0, 0, 0.2, 1)
- Durations
- 100ms 200ms 300ms 500ms
- Transitions
- 58
- Keyframes
- 1
- Stack
- tailwind, shadcn/ui, hubspot, posthog, google-tag-manager, cloudflare
Page sections (2)
01nav
02footerIn one subscription. models. AI Creative 3D Video Image Generative The industry's best
How Krea compares
- Largest heading
- 60px: larger than 48% of indexed sites (median 60px).
- Container
- 1312px: wider than 73% of indexed sites (median 1242px).
- Text contrast
- 12.6:1: lower than 86% of indexed sites (median 17.6:1).
- Page length
- 900px: shorter than 93% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Suisse Int'l
- One of 4 indexed sites that load Suisse Int'l (1%).
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Krea use?
Krea uses Suisse Int'l (loaded as "Suisse Intl") for headings and body text.
What are Krea's brand colors?
Krea's website uses a dark scheme: background #000000CC, surface #FFFFFF0B, text #FFFFFF, muted text #A3A3A3 and borders #FFFFFF26.
How is Krea's website laid out?
The most common corner radius is fully rounded (pill), body text is nullpx with null line height, and the page container is 1312px wide.
