Frame
design tools · saas · content · Dark
frame.ioPalette
- #fcfcfc
- main-font-color
- #eaeaff
- color-alpha-light-60
- #000000
- color-grey-00
- #6199f6
- color-turquoise-triumph
- #0d0d18
- color-grey-05
Typography
FrameGothicTimes New RomanHumanist sans
Frame vs Linear
Two references, one frame. Palette, typography and the curator verdict for Frame and Linear, read side by side.
Palette & spacing overlap
Palette
Shared (1)
#000000
Frame only
#fcfcfc#eaeaff#6199f6#0d0d18#f5f5f8
Linear only
#f7f8f8#62666d#d0d6e0#8a8f98#f79ce0#55cdff#ffc47c#00ff05#8fa4ff#89d196#0f1011#23252a#ff0000#6366f1#02b8cc#5e6ad2#383b3f#eb5757#8b5cf6
Spacing scale (px)
Shared (7)
4px6px8px10px12px16px24px
Frame only
18px20px28px32px40px
Linear only
2px14px19px22px26px
Linear
saas · productivity · Dark
linear.appPalette
- #f7f8f8
- background
- #62666d
- foreground
- #d0d6e0
- foreground
- #8a8f98
- foreground
- #f79ce0
- accent
Typography
Inter VariableBerkeley MonoGeometric sans
Typography
Side A · Dark
Frame
- Display
- FrameGothic
- Body
- Times New Roman
Weight ladder
400500600
Side B · Dark
Linear
- Display
- Inter Variable
- Body
- Berkeley Mono
- Mono
- Berkeley Mono
Weight ladder
400510590
Spacing scale
Side A · Dark
Frame
- Base unit
- 4 px
- Container
- 1440 px
4px
6px
8px
10px
12px
16px
18px
20px
Side B · Dark
Linear
- Base unit
- 4 px
- Container
- 1436 px
2px
4px
6px
8px
10px
12px
14px
16px
Motion vocabulary
Side A · Dark
Frame
- Level
- expressive
- Libraries
- -
Durations
150ms220ms300ms
Easings
cubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.16, 1, 0.3...
Side B · Dark
Linear
- Level
- expressive
- Libraries
- -
Durations
0.16s0.4s1.6s2.8s3.2s
Easings
cubic-bezier(0.25, 0.46, ...cubic-bezier(0.66, 0, 0, 1)ease-outease