Typography
scale ratio 1.294- Inter Tightbody400 500 60047%
- Faculty Glyphicdisplay400 50037%
- Interother400 6005%
- Spratother400 5003%
- JetBrains Monomono400 6003%
- Departure Monoother4002%
- Overused Groteskother400 5001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Faculty Glyphic | 74.8px | 400 | 1 | -0.03em |
| headline | Faculty Glyphic | 44px | 500 | 1.08 | -0.035em |
| title | Inter Tight | 18px | 600 | 1.45 | 0em |
| body | Inter Tight | 16px | 400 | 1.35 | 0em |
| body-sm | Inter | 12px | 400 | 1.4 | 0em |
| mono | JetBrains Mono | 13px | 400 | 1.385 | 0em |
Type scale
Aa6Aa7Aa7.5Aa11Aa12Aa13Aa14Aa16Aa18Aa19Aa24Aa44Aa49.5Aa75
- Body size
- 16px / 1.45
- Display size
- 74.8px
- Display tracking
- -0.03em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 14.28:1
- Muted on bg
- 6.93:1
- Accent on bg
- 2.97:1
- Dark mode
- none
Declared accent tokens
- --primary-color#614FB3painted
Space, shape & depth
Spacing scale
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 10
- 12
- 15
- 16
- 20
- 24
- 32
Corner radii
23468pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 278px
Components
exact computed valuesbutton-primary
Start creating for free
- backgroundColor
- #FFFFFFB3
- textColor
- #181818
- rounded
- 3px
- padding
- 10px 20px
- height
- 40px
- fontFamily
- Inter Tight
- fontSize
- 16px
- fontWeight
- 600
- shadow
- rgb(255, 255, 255) 0px 0px 0px 1px inset
card
- rounded
- 4px
- padding
- 32px
- backgroundColor
- #181818
input
- rounded
- 2px
- height
- 24px
- padding
- 0px 0px
Layout & motion
- Container
- 1240px
- Grid columns
- 2
- Hero
- centered+media-below
- Navigation
- none-detected
- Page height
- 15,328px
- Easing
- ease
- Durations
- 150ms 250ms 1000ms 600000000ms
- Transitions
- 67
- Keyframes
- 4
- Stack
- vue, posthog, vercel
Page sections (12)
section labels are heuristic
01nav
02hero
03testimonialsA design studio for graphics that move, respond, and ship.
04content?
05content?
06gallery?Made with Unicorn
07features?Direct every detail, by hand or with your agent.
08testimonialsBuild a visual language you can keep using.
09testimonialsWhat you see is what you ship.
10features?Built for the whole workflow.
11content?
12footerSupport
How Unicorn Studio compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 74.8px: larger than 77% of indexed sites (median 60px).
- Type scale
- 1.29×: steeper than 53% of indexed sites (median 1.28×).
- Container
- 1240px: narrower than 50% of indexed sites (median 1242px).
- Text contrast
- 14.3:1: lower than 80% of indexed sites (median 17.6:1).
- Page length
- 15,328px: longer than 92% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- Inter Tight
- One of 2 indexed sites that load Inter Tight (1%).
- Faculty Glyphic
- The only site in the index that loads Faculty Glyphic.
- 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 Unicorn Studio use?
Unicorn Studio uses Inter Tight for body text. Faculty Glyphic is used for headings. Inter is used for other.
What are Unicorn Studio's brand colors?
Unicorn Studio's website uses a dark scheme: background #101010, surface #242424, text #DFDFDF, muted text #9C9C9C.
How is Unicorn Studio's website laid out?
The most common corner radius is 4px, body text is 16px with 1.45 line height, and the page container is 1240px wide.
Similar to Unicorn Studio
Inter / JetBrains Mono / Departure Mono#FFFFFF
Pipedreampipedream.com
Inter / Menlo / JetBrains Mono#13111C
Railwayrailway.com
Inter / Inter Tight / JetBrains Mono#F5F5F5
Upstashupstash.com
SF Pro (system-ui) / Inter / JetBrains Mono#FFFFFF
Capacitiescapacities.io
Inter / Degular / Bricolage Grotesque#FFFFFF
Deepnotedeepnote.com