Yuno — Font Pairing & Color Palette Design Toolkit

Preview

Weight: 400 / 400

Playfair Display+Inter

Design System

02 / Typography

Typography

DisplayPlayfair Display · 34px / 400

Heading 1Playfair Display · 26px / 400

Heading 2Playfair Display · 21px / 400

Heading 3Playfair Display · 17px / 400

Heading 4Playfair Display · 14px / 400

Body Large — The typefaces we choose shape how ideas land.Inter · 15px / 400

Body — The typefaces we choose shape how ideas land.Inter · 13px / 400

Body Small — The typefaces we choose shape how ideas land.Inter · 11px / 400

Label — The typefaces we choose shape how ideas land.Inter · 10px / 600

Caption — The typefaces we choose shape how ideas land.Inter · 9px / 400

SECTION LABEL · OVERLINEInter · 8px / 600

"The best typeface is the one that gets out of the way of the idea."
— Robert Bringhurst

background: linear-gradient(to right, #3B82F6, #8B5CF6);

Browse gradients

Abyss

oceanlinear

Black · Navy · Blue

linear-gradient(90deg,#000000,#000080,#0000FF)

Amber Glow

sunsetlinear

Dark Orange · Gold · Cornsilk

linear-gradient(0deg,#FF8C00,#FFD700,#FFF8DC)

Amethyst

royallinear

Amethyst · Purple · Lavender

linear-gradient(90deg,#9966CC,#800080,#E6E6FA)

Apricot Nectar

sunsetlinear

Peach Puff · Moccasin · Cornsilk

linear-gradient(90deg,#FFDAB9,#FFE4B5,#FFF8DC)

Aqua Marine

teallinear

Aquamarine · Light Sea Green · Cyan

linear-gradient(90deg,#7FFFD4,#20B2AA,#00FFFF)

Arctic Ice

oceanlinear

Cyan · Light Cyan · White

linear-gradient(90deg,#00FFFF,#E0FFFF,#FFFFFF)

Arctic Waters

teallinear

Sky Blue · Powder Blue · Light Cyan

linear-gradient(135deg,#87CEEB,#B0E0E6,#E0FFFF)

Aurora

speciallinear

Forest Green · Cyan · Blue Violet

linear-gradient(0deg,#228B22,#00FFFF,#8A2BE2)

Autumn Earth

earthlinear

Sienna · Chocolate · Gold

linear-gradient(90deg,#A0522D,#D2691E,#FFD700)

Autumn Leaf

sunsetlinear

Sienna · Chocolate · Gold

linear-gradient(0deg,#A0522D,#D2691E,#FFD700)

Azure Blue

teallinear

Azure · Steel Blue · Light Steel Blue

linear-gradient(135deg,#007FFF,#4682B4,#B0C4DE)

Blush

pinklinear

Light Pink · Pink · Lavender Blush

linear-gradient(0deg,#FFB6C1,#FFC0CB,#FFF0F5)

Bubblegum

pinklinear

Hot Pink · Peach Puff · Pink

linear-gradient(90deg,#FF69B4,#FFDAB9,#FFC0CB)

Candy Shop

speciallinear

Hot Pink · Green Yellow · Pale Green

linear-gradient(0deg,#FF69B4,#ADFF2F,#98FB98)

Charcoal Embers

earthlinear

Dark Slate Gray · Dim Gray · Silver

linear-gradient(0deg,#2F4F4F,#696969,#C0C0C0)

Cherry Blossom

speciallinear

Light Pink · Pink · White

linear-gradient(90deg,#FFB6C1,#FFC0CB,#FFFFFF)

Clay

earthlinear

Sienna · Peru · Chocolate

linear-gradient(135deg,#A0522D,#CD853F,#D2691E)

Clover

forestlinear

Forest Green · Emerald · Teal

linear-gradient(135deg,#228B22,#50C878,#008080)

Cobalt Sky

teallinear

Cobalt · Dodger Blue · Sky Blue

linear-gradient(0deg,#0047AB,#1E90FF,#87CEEB)

Cocoa

earthlinear

Chocolate · Sienna · Saddle Brown

linear-gradient(90deg,#D2691E,#A0522D,#8B4513)

Copper

speciallinear

Copper · Peru · Sienna

linear-gradient(90deg,#B87333,#CD853F,#A0522D)

Coral Pink

pinklinear

Coral · Hot Pink · Light Pink

linear-gradient(135deg,#FF7F50,#FF69B4,#FFB6C1)

Coral Reef

sunsetlinear

Coral · Salmon · Peach Puff

linear-gradient(135deg,#FF7F50,#FA8072,#FFDAB9)

Cotton Candy

pinklinear

Pink · Light Pink · White

linear-gradient(0deg,#FFC0CB,#FFB6C1,#FFFFFF)

Deep Sea

oceanlinear

Navy · Midnight Blue · Dark Slate Gray

linear-gradient(0deg,#000080,#191970,#2F4F4F)

Denim

teallinear

Denim · Royal Blue · Cornflower Blue

linear-gradient(0deg,#1560BD,#4169E1,#6495ED)

Desert Dusk

sunsetlinear

Tomato · Coral · Moccasin

linear-gradient(0deg,#FF6347,#FF7F50,#FFE4B5)

Desert Sand

earthlinear

Tan · Wheat · Cornsilk

linear-gradient(0deg,#D2B48C,#F5DEB3,#FFF8DC)

Dusk

royallinear

Indigo · Purple · Midnight Blue

linear-gradient(90deg,#4B0082,#800080,#191970)

Earthy Brown

earthlinear

Sienna · Chocolate · Sandy Brown

linear-gradient(45deg,#A0522D,#D2691E,#F4A460)

Ember Glow

sunsetlinear

Firebrick · Orange Red · Dark Orange

linear-gradient(90deg,#B22222,#FF4500,#FF8C00)

Emerald City

forestlinear

Emerald · Forest Green · Pale Green

linear-gradient(135deg,#50C878,#228B22,#98FB98)

Evergreen

forestlinear

Dark Green · Sea Green · Forest Green

linear-gradient(45deg,#006400,#2E8B57,#228B22)

Fern

forestlinear

Emerald · Forest Green · Dark Olive Green

linear-gradient(90deg,#50C878,#228B22,#556B2F)

Fjord

oceanlinear

Midnight Blue · Sea Green · Teal

linear-gradient(135deg,#191970,#2E8B57,#008080)

Forest Canopy

forestlinear

Forest Green · Dark Green · Dark Olive Green

linear-gradient(0deg,#228B22,#006400,#556B2F)

Fuchsia

pinklinear

Magenta · Medium Violet Red · Hot Pink

linear-gradient(0deg,#FF00FF,#C71585,#FF69B4)

Galaxy

speciallinear

Navy · Purple · Medium Violet Red · Black

linear-gradient(45deg,#000080,#800080,#C71585,#000000)

Glacier

oceanlinear

Powder Blue · Light Cyan · White

linear-gradient(45deg,#B0E0E6,#E0FFFF,#FFFFFF)

Golden Hour

sunsetlinear

Gold · Orange · Lemon Chiffon

linear-gradient(45deg,#FFD700,#FFA500,#FFFACD)