%20--%3e%3csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%201352.5%201009.7'%20style='enable-background:new%200%200%201352.5%201009.7;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{filter:url(%23Adobe_OpacityMaskFilter);}%20.st1{fill:%23FFFFFF;}%20.st2{mask:url(%23SVGID_1_);}%20.st3{fill:%23F5F4F2;}%20.st4{filter:url(%23Adobe_OpacityMaskFilter_00000097472521746504274130000014852600418532344220_);}%20.st5{mask:url(%23SVGID_00000147177853427394068880000012582303111022255541_);}%20.st6{fill:%230E0D0C;}%20%3c/style%3e%3cg%3e%3cg%3e%3cdefs%3e%3cfilter%20id='Adobe_OpacityMaskFilter'%20filterUnits='userSpaceOnUse'%20x='219.4'%20y='216.1'%20width='918.6'%20height='577'%3e%3cfeColorMatrix%20type='matrix'%20values='1%200%200%200%200%200%201%200%200%200%200%200%201%200%200%200%200%200%201%200'/%3e%3c/filter%3e%3c/defs%3e%3cmask%20maskUnits='userSpaceOnUse'%20x='219.4'%20y='216.1'%20width='918.6'%20height='577'%20id='SVGID_1_'%3e%3cg%20class='st0'%3e%3cpath%20class='st1'%20d='M753.2,792.8L684.9,723l70.6-302.2l68.1,70.5L753.2,792.8z%20M293.7,729.3l-74.3-75.1l104-438.1l74.3,75%20l-21,88.6l110.3-145.2l10.4,11.1l0.1-0.2l67.2,69.5l-54.9,207.9l110.9-149.5l0.1-0.4l0.1,0.1l0.1-0.1l5.7,6.3l61,64l-53.3,228.8%20l-67.1-70.3l15.3-65.3L464.8,693.1l-0.2,0.6l-0.2-0.2l-0.1,0.2L461,690l-60.3-62.4l54.2-214.2L329,580.4L293.7,729.3%20M820.5,396.1c-29,0-52.5-24.2-52.5-54.1c0-29.9,23.5-54,52.5-54c29,0,52.5,24.2,52.5,54C873,371.9,849.5,396.1,820.5,396.1%20M1115.9,793.1L957.3,628.5l-121.2,71.2l24.8-107.2l39.4-23.1L873,541.1l22.8-92.9l76.9,78.6l153.1-90L1101.1,544l-70.8,41.6%20l107.7,110L1115.9,793.1'/%3e%3c/g%3e%3c/mask%3e%3cg%20class='st2'%3e%3cg%3e%3cpath%20class='st6'%20d='M753.2,792.8L684.9,723l70.6-302.2l68.1,70.5L753.2,792.8z%20M293.7,729.3l-74.3-75.1l104-438.1l74.3,75%20l-21,88.6l110.3-145.2l10.4,11.1l0.1-0.2l67.2,69.5l-54.9,207.9l110.9-149.5l0.1-0.4l0.1,0.1l0.1-0.1l5.7,6.3l61,64l-53.3,228.8%20l-67.1-70.3l15.3-65.3L464.8,693.1l-0.2,0.6l-0.2-0.2l-0.1,0.2L461,690l-60.3-62.4l54.2-214.2L329,580.4L293.7,729.3%20M820.5,396.1c-29,0-52.5-24.2-52.5-54.1c0-29.9,23.5-54,52.5-54c29,0,52.5,24.2,52.5,54C873,371.9,849.5,396.1,820.5,396.1%20M1115.9,793.1L957.3,628.5l-121.2,71.2l24.8-107.2l39.4-23.1L873,541.1l22.8-92.9l76.9,78.6l153.1-90L1101.1,544l-70.8,41.6%20l107.7,110L1115.9,793.1'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
Foundations
Typography
Playfair Display sets the editorial tone. DM Sans does the work. Used together, they feel timeless and unmistakably Mix.
Display — Playfair Display
Headings, hero text, pull quotes. Weight 400–600. Slight negative letter-spacing.
Aa Bb Cc
A timeless serif.
Set in italic for emphasis.
The quick brown fox jumps over the lazy dog.
Body — DM Sans
UI labels, paragraphs, captions. Weights 300, 400, 500, 600, 700.
DM Sans is clean, modern, and friendly.
Body text is set in DM Sans at 16px with a comfortable line height. It carries the voice of every Mix product — quiet, confident, never shouty.
Caption / muted text uses the muted-foreground token for hierarchy.
Accents
Use sparingly — for personality, not decoration.
font-script · Caveat
a personal touch
font-condensed · Bebas Neue
BOLD STATEMENT
Type scale
Extra small · 12pxtext-xs
Small · 14pxtext-sm
Base · 16pxtext-base
Large · 18pxtext-lg
XL · 20pxtext-xl
2XL display · 24pxtext-2xl font-display
4XL display · 36pxtext-4xl font-display
6XL display · 60pxtext-6xl font-display tracking-tight