Typography
scale ratio 1.343- system-uidisplay + body400 600 700 800100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | system-ui | 78px | 700 | 1.15 | 0em |
| headline | system-ui | 54px | 700 | 0em | |
| title | system-ui | 48px | 800 | 1.15 | 0em |
| body | system-ui | 24px | 400 | 1.2 | 0em |
| body-sm | system-ui | 12.8px | 400 | 1.15 | 0em |
| label | system-ui | 16px | 400 | 1.15 | 0em |
Type scale
Aa13Aa16Aa18Aa21Aa24Aa36Aa48Aa54Aa78
- Body size
- 24px / 1.2
- Display size
- 78px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 15.08:1
- Muted on bg
- 2.85:1
- Accent on bg
- 3.40:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 12
- 14
- 16
- 20
- 22
- 24
- 36
- 40
- 48
- 80
- 160
Corner radii
48pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 160px
Components
exact computed valuesbutton-primary
Download Origami Studio
- backgroundColor
- #008EF4
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 14px 22px
- height
- 46.4px
- fontFamily
- system-ui
- fontSize
- 16px
- fontWeight
- 600
button-secondary
Watch Tutorial
- textColor
- #008EF4
- rounded
- 8px
- padding
- 14px 22px
- height
- 48.4px
- fontFamily
- system-ui
- fontSize
- 16px
- fontWeight
- 600
- border
- 1px solid #008EF4
card
- rounded
- 8px
- padding
- 48px
- backgroundColor
- #ECECEC
Layout & motion
- Container
- 1080px
- Grid columns
- 3
- Hero
- centered+media-below
- Navigation
- top-fixed+transparent
- Page height
- 8,820px
- Easing
- ease
- Durations
- 150ms 250ms
- Transitions
- 5
- Keyframes
- 7
- Stack
- gsap, jquery, google-tag-manager, netlify, cloudflare
Page sections (7)
section labels are heuristic
01heroDesign, animate, and prototype. All-in-one.
02features?A new way to visually layout your Origami prototypes with freeform drawing tools
03gallery?Expand the potential of your prototypes with patches that unlock hardware capabi
04features?even easier to share.
05feature detail?Share Nearby with Origami Live.
06stats?Faster patch editor, faster viewer, faster everything.
07footer
How Origami compares
- Body text
- 24px: larger than 98% of indexed sites (median 16px).
- Largest heading
- 78px: larger than 79% of indexed sites (median 60px).
- Type scale
- 1.34×: steeper than 67% of indexed sites (median 1.28×).
- Container
- 1080px: narrower than 78% of indexed sites (median 1242px).
- Text contrast
- 15.1:1: lower than 75% of indexed sites (median 17.6:1).
- Page length
- 8,820px: longer than 57% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- 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 Origami use?
Origami uses system-ui for headings and body text.
What are Origami's brand colors?
Origami's website uses a light scheme: background #FFFFFF, surface #ECECEC, text #000000D9, muted text #999999.
How is Origami's website laid out?
The most common corner radius is 8px, body text is 24px with 1.2 line height, and the page container is 1080px wide.
