C2C UI Forge · Visual asset library
Sign in

Tooling

Design token contract

The visual language every asset resolves through: reference scales, semantic roles, and a small set of component aliases. Switching theme or density here changes the specimen, not the Studio chrome.

Contract

Theme & density

data-theme and data-density on a root element

Theme
Density
draftMuted caption on the default theme, comfortable density.

Semantic

Color roles

Intent-based aliases. Products theme these, never the reference palette.

RoleSwatchdefault valueReference
#f6f5f3gray.50
#1c1917gray.900
#ffffffwhite.base
#1c1917gray.900
#efeee9gray.100
#efeee9gray.100
#57534egray.500
#d7d3ccgray.200
#b8b2a9gray.300
#1f3a5fnavy.600
#182e4cnavy.700
#ffffffwhite.base
#b42318red.600
#ffffffwhite.base
#17663agreen.700
#ffffffwhite.base
#7a3e09amber.800
#ffffffwhite.base
#1f3a5fnavy.600
#8a847cgray.400

Contrast evidence

Shipped pairs measured at WCAG AA 4.5:1 for normal text. Evidence for these pairs only, not a full audit.

ForegroundBackgroundSampleRatioAA
foregroundbackgroundAa16.05:1pass
surface-foregroundsurfaceAa17.49:1pass
primary-foregroundprimaryAa11.48:1pass
danger-foregrounddangerAa6.57:1pass
success-foregroundsuccessAa7.00:1pass
warning-foregroundwarningAa8.33:1pass

Reference palette

Foundation scale. Assets and products should not read these directly except through documented asset-level aliases.

white.base#ffffff
gray.50#f6f5f3
gray.100#efeee9
gray.200#d7d3cc
gray.300#b8b2a9
gray.400#8a847c
gray.500#57534e
gray.700#3f3b37
gray.800#292524
gray.900#1c1917
gray.950#0c0b0a
navy.400#8ba4c7
navy.600#1f3a5f
navy.700#182e4c
red.400#f0a49e
red.600#b42318
green.400#7dcea0
green.700#17663a
amber.400#e8b86d
amber.800#7a3e09

Reference

Palette library

Attributed combinations from design research, exposed as --c2c-palette-* variables. Atmosphere for showcase work, not semantic roles.

Kind

Deep Teal Silk

gradient · dark · no AA text pair

Dark, cool, luxe.

  • Deep Teal Silk start#134E5E
  • Deep Teal Silk end#0B3138

Brand Builder Tips (Instagram), "Deep" gradient series

Deep Navy Blue

gradient · dark · no AA text pair

Dark, corporate, steady.

  • Deep Navy Blue start#1E2C42
  • Deep Navy Blue end#2F4E70

Brand Builder Tips (Instagram), "Deep" gradient series

Coral Pink

gradient · mixed · no AA text pair

Warm, energetic, sunset.

  • Coral Pink start#FE716D
  • Coral Pink end#FFA970

Brand Builder Tips (Instagram), "Deep" gradient series

Deep Plum

gradient · dark · no AA text pair

Dark, warm, luxe.

  • Deep Plum start#332035
  • Deep Plum end#432144

Brand Builder Tips (Instagram), "Deep" gradient series

Deep Brick

gradient · dark · no AA text pair

Dark, warm, bold.

  • Deep Brick start#371514
  • Deep Brick end#C94B4C

Brand Builder Tips (Instagram), "Deep" gradient series

Deep Purple

gradient · dark · no AA text pair

Vivid, playful, nightlife.

  • Deep Purple start#783071
  • Deep Purple end#C1426F

Brand Builder Tips (Instagram), "Deep" gradient series

Deep Midnight Blue

gradient · mixed · Deep Midnight Blue start on Deep Midnight Blue end 4.59:1 AA

Dark, tech, electric.

  • Deep Midnight Blue start#082C6C
  • Deep Midnight Blue end#1AA4D2

Brand Builder Tips (Instagram), "Deep" gradient series

Fresh Sky / Blood Red

duo · mixed · Blood Red on Fresh Sky 7.73:1 AA

Bold, high-contrast, sky against oxblood.

  • Fresh Sky#86CDE9
  • Blood Red#640000

Brand Builder Tips (Instagram), COMBO series

Fresh Lime / Azure Blue

duo · mixed · Azure Blue on Fresh Lime 6.11:1 AA

Fresh, energetic, sporty.

  • Fresh Lime#DDF3A3
  • Azure Blue#0055A6

Brand Builder Tips (Instagram), COMBO series

Wine Mauve / Vanilla Beige

duo · mixed · Vanilla Beige on Wine Mauve 6.47:1 AA

Muted, vintage, editorial.

  • Wine Mauve#66444F
  • Vanilla Beige#EFE0CC

Brand Builder Tips (Instagram), COMBO series

Deep Indigo / Frost White

duo · mixed · Deep Indigo on Frost White 13.02:1 AA

Clean, cool, confident.

  • Deep Indigo#27187D
  • Frost White#F7F7FF

Brand Builder Tips (Instagram), COMBO series

Black Green / Ruby Red

duo · mixed · Black Green on Ruby Red 5.32:1 AA

Dark ground with one vivid accent.

  • Black Green#000F08
  • Ruby Red ?#FB3640

Brand Builder Tips (Instagram), COMBO series

Dark Plum / Earthy Khaki

duo · dark · no AA text pair

Earthy, warm, muted.

  • Dark Plum#421407
  • Earthy Khaki#6D542E

Brand Builder Tips (Instagram), COMBO series

Warm Apricot / Royal Plum

duo · mixed · Royal Plum on Warm Apricot 8.22:1 AA

Warm and regal complementary pair.

  • Warm Apricot#FAAE62
  • Royal Plum#3E0856

Brand Builder Tips (Instagram), COMBO series

Midnight Teal / Ocean Mist

duo · mixed · Midnight Teal on Ocean Mist 10.09:1 AA

Calm, aquatic, tonal.

  • Midnight Teal#05354C
  • Ocean Mist#B1EDF8

Brand Builder Tips (Instagram), COMBO series

Machine Red / Glacier Blue

duo · mixed · no AA text pair

Punchy, alert, cool surface.

  • Machine Red#FF2E3A
  • Glacier Blue#DBF6FF

janm_ux (Instagram), UI color combinations

Hyper Cobalt / Powder Sky

duo · mixed · Hyper Cobalt on Powder Sky 5.41:1 AA

Vivid tech blue on a soft sky tint.

  • Hyper Cobalt#0038FF
  • Powder Sky#D6E3FF

janm_ux (Instagram), UI color combinations

Dark Aubergine / Electric Pink

duo · mixed · Dark Aubergine on Electric Pink 7.69:1 AA

Neon nightlife.

  • Dark Aubergine#2E0F35
  • Electric Pink#FF7FEC

janm_ux (Instagram), UI color combinations

Zero Black / Ghost Green

duo · mixed · Ghost Green on Zero Black 18.70:1 AA

Minimal, techy, near-black with a mint ghost.

  • Zero Black#050505
  • Ghost Green#D7FFE0

janm_ux (Instagram), UI color combinations

Neon Orange / Charcoal

duo · mixed · Charcoal on Neon Orange 7.84:1 AA

Bold, energetic, dark-mode accent.

  • Neon Orange#FF9030
  • Charcoal#111827

janm_ux (Instagram), UI color combinations

Royal Iris / Mint Frost

duo · mixed · Mint Frost on Royal Iris 9.01:1 AA

Cool, fresh contrast.

  • Royal Iris#4C1D95
  • Mint Frost#B7F7D4

janm_ux (Instagram), UI color combinations

Chrome Black / Digital Lilac

duo · mixed · Chrome Black on Digital Lilac 11.34:1 AA

Dark mode with a pastel accent.

  • Chrome Black#0D0D0D
  • Digital Lilac#D9B8FF

janm_ux (Instagram), UI color combinations

Nordic Indigo / Vanilla Mist

duo · mixed · Nordic Indigo on Vanilla Mist 8.37:1 AA

Classic warm-cool pairing.

  • Nordic Indigo#263BAA
  • Vanilla Mist#FFF4D6

janm_ux (Instagram), UI color combinations

Slate Ocean / Cloud Mint

duo · mixed · Cloud Mint on Slate Ocean 8.74:1 AA

Calm, professional.

  • Slate Ocean#2F4858
  • Cloud Mint#DDFBEF

janm_ux (Instagram), UI color combinations

Dark Olive / Fresh Lemon

duo · mixed · Dark Olive on Fresh Lemon 12.58:1 AA

Organic, high-energy.

  • Dark Olive#283113
  • Fresh Lemon#F3FF74

janm_ux (Instagram), UI color combinations

Ink Teal / Warm Sand

duo · mixed · Ink Teal on Warm Sand 9.70:1 AA

Rich, natural, premium.

  • Ink Teal#053D3A
  • Warm Sand#FFE2B8

janm_ux (Instagram), UI color combinations

Midnight Navy / Lime Glow

duo · mixed · Lime Glow on Midnight Navy 13.51:1 AA

Sporty high contrast.

  • Midnight Navy#071A52
  • Lime Glow#A7FF83

janm_ux (Instagram), UI color combinations

Deep Teal / Soft Sage

duo · mixed · Deep Teal on Soft Sage 11.55:1 AA

Calm, natural.

  • Deep Teal#152D35
  • Soft Sage#D4ECDD

janm_ux (Instagram), UI color combinations

Ultra Purple / Seafoam

duo · mixed · Seafoam on Ultra Purple 5.05:1 AA

Playful, vivid.

  • Ultra Purple#6D28D9
  • Seafoam#98E8DE

janm_ux (Instagram), UI color combinations

Signal Red / Almond White

duo · mixed · no AA text pair

Crisp, editorial.

  • Signal Red#F62440
  • Almond White#FFFAF3

janm_ux (Instagram), UI color combinations

Cosmic Navy / Pastel Violet

duo · mixed · Cosmic Navy on Pastel Violet 9.15:1 AA

Dreamy, cosmic.

  • Cosmic Navy#0C134F
  • Pastel Violet#D4ADFC

janm_ux (Instagram), UI color combinations

Vivid Azure / Cloud Violet

duo · mixed · Cloud Violet on Vivid Azure 4.82:1 AA

Friendly, vivid tech.

  • Vivid Azure#1B4EF5
  • Cloud Violet#F7DCFF

janm_ux (Instagram), UI color combinations

Signal Blue / Porcelain

duo · mixed · Porcelain on Signal Blue 5.15:1 AA

Clean tech on warm white.

  • Signal Blue#0057FF
  • Porcelain#F8F7F4

janm_ux (Instagram), UI color combinations

Ultra Violet / Soft Apricot

duo · mixed · Soft Apricot on Ultra Violet 5.28:1 AA

Playful, warm accent.

  • Ultra Violet#6A00F4
  • Soft Apricot#FFD6A5

janm_ux (Instagram), UI color combinations

Dragonfruit / Night Violet

duo · mixed · Dragonfruit on Night Violet 5.58:1 AA

Nightlife, neon pink on deep violet.

  • Dragonfruit#FF4696
  • Night Violet#1E1033

janm_ux (Instagram), UI color combinations

Emerald Ink / Champagne

duo · mixed · Champagne on Emerald Ink 7.99:1 AA

Premium, natural.

  • Emerald Ink#064E3B
  • Champagne#F8E7C9

janm_ux (Instagram), UI color combinations

Butter Yellow / Royal Iris

duo · mixed · Butter Yellow on Royal Iris 10.34:1 AA

Bold, playful complementary pair.

  • Butter Yellow#FFF275
  • Royal Iris#3A0CA3

janm_ux (Instagram), UI color combinations

Pink Rose / Citron / Black Bean

triad · mixed · Black Bean on Citron 8.70:1 AA

Retro, warm, seventies interior.

  • Pink Rose#ED809D
  • Citron#C9C769
  • Black Bean#461312

UIUXMaestro (Instagram), three-color palettes

Moss / Mustard / Eggshell

triad · mixed · Eggshell on Moss 5.46:1 AA

Natural, earthy, botanical.

  • Moss#576238
  • Mustard#FFD95D
  • Eggshell#F0EADC

UIUXMaestro (Instagram), three-color palettes

Orange / Jet / Moonstone

triad · mixed · Jet on Moonstone 5.70:1 AA

Urban, high-contrast.

  • Orange#EE6C29
  • Jet#282B2B
  • Moonstone ?#7AACB3

UIUXMaestro (Instagram), three-color palettes

Royal Blue / Powder Blue / Bone

triad · mixed · Bone on Royal Blue 11.32:1 AA

Corporate, clean, navy and ice.

  • Royal Blue#162660
  • Powder Blue#D0E6FD
  • Bone ?#F1E4D1

UIUXMaestro (Instagram), three-color palettes

Lake Blue / Flame / Saffron

triad · mixed · no AA text pair

Mediterranean, periwinkle against burnt orange.

  • Lake Blue#6D8EC5
  • Flame#D3622C
  • Saffron ?#F0C845

UIUXMaestro (Instagram), three-color palettes

Black Olive / Pearl / Lilac

triad · mixed · Black Olive on Pearl 9.98:1 AA

Moody botanical.

  • Black Olive#3D402F
  • Pearl#FCF9D8
  • Lilac ?#C99FCD

UIUXMaestro (Instagram), three-color palettes

Mint / White Smoke / Claret

triad · mixed · Claret on White Smoke 8.44:1 AA

Retro, green with off-white and wine.

  • Mint#69A481
  • White Smoke#E7EDEB
  • Claret ?#7C1F31

UIUXMaestro (Instagram), three-color palettes

Persian Orange / Platinum / Dark Moss

triad · mixed · Dark Moss on Platinum 6.42:1 AA

Earthy Scandinavian interior.

  • Persian Orange#CF8852
  • Platinum#E8E7E3
  • Dark Moss ?#525333

UIUXMaestro (Instagram), three-color palettes

Olive / Ecru / Champagne

triad · mixed · Champagne on Olive 5.03:1 AA

Warm, earthy neutral.

  • Olive#6F6134
  • Ecru#E1C68F
  • Champagne ?#F8E7C9

UIUXMaestro (Instagram), three-color palettes

Arctic Morning Sky / Smouldering Brick Red / Dry Desert Sand

triad · mixed · Dry Desert Sand on Smouldering Brick Red 5.00:1 AA

Soft editorial complementary with a cream neutral.

  • Arctic Morning Sky#ADC2F6
  • Smouldering Brick Red#B3311C
  • Dry Desert Sand#EDE6D3

Lorem Ipsum Design Agency (TikTok), Everyday Brand Design Tips

Blue alternatives

set · mixed · Royal Cobalt on Sky Cyan 4.63:1 AA

Five blues that read as designed rather than default: cyan, electric, royal, sapphire, periwinkle.

  • Sky Cyan#41C0F2
  • Electric Cobalt#0B4FD9
  • Royal Cobalt#08428C
  • Deep Sapphire#0D518C
  • Slate Periwinkle#5C6795

Marcelo Design X (TikTok), "Stop using blue"

Semantic

Typography

RoleSpecimenSize · weight · leading
The interface stays readable.md · regular · normal
The interface stays readable.xl · semibold · tight
The interface stays readable.sm · regular · normal
The interface stays readable.sm · medium · tight
The interface stays readable.sm · regular · normal

Size scale

Aa0.75rem
Aa0.875rem
Aa1rem
Aa1.125rem
Aa1.5rem

Reference

Type pairings

Named faces from design research with availability and the --c2c-font-* token that stands in when a face is not loaded.

PairingHeadingBody / accentFallbackMood
Helvetica Neue + TWK EverettHelvetica Neuegrotesk · commercialTWK Everettgrotesk · commercialNeutral grotesk on grotesk; quiet and Swiss.
Champion Gothic + PoppinsChampion Gothicdisplay-sans · commercialPoppinsgeometric-sans · google-fontsCondensed poster headline over a friendly geometric body.
Avenir + PT SerifAvenirgeometric-sans · commercialPT Serifserif · google-fontsHeavy geometric headline with a classic reading serif.
Integral CF + Adobe Garamond ProIntegral CFdisplay-sans · commercialAdobe Garamond Proserif · commercialWide brutalist headline against an old-style serif.
Apoc Revelations Italic + HelveticaApoc Revelationsdisplay-serif · commercialHelveticagrotesk · systemHigh-contrast italic serif with a neutral grotesk.
Rosnoc + PanchangRosnocdisplay-sans · unknownPanchanggeometric-sans · fontshareSci-fi geometric display with an extended bold secondary.
Bierika + InterBierikadisplay-sans · unknownIntergrotesk · google-fontsQuirky wide display over the most neutral UI body.
Neofolia + Sk-ModernistNeofoliadisplay-sans · unknownSk-Modernistgeometric-sans · unknownMonoline techno display with a light modernist body.
FrauncesFrauncesdisplay-serif · google-fontsFrauncesserif · google-fontsWarm, premium editorial serif used for headline and body.
Instrument Serif + neutral sansInstrument Serifdisplay-serif · google-fontsNeutral sans (unnamed)grotesk · systemFashion editorial: condensed display serif over quiet sans.
GeistGeistgrotesk · google-fontsGeistgrotesk · google-fontsMoody, filmic, all-caps product UI.
Space MonoSpace Monomono · google-fontsSpace Monomono · google-fontsTechnical craft; monospace throughout.
Space GroteskSpace Groteskgrotesk · google-fontsSpace Groteskgrotesk · google-fontsDark portfolio, geometric grotesk.
Orliet Pro + Luxurious ScriptOrliet Prodisplay-serif · unknownLuxurious Scriptscript · google-fonts · accentOld-money luxury heritage.
Rush Driver + RockybillyRush Driverdisplay-sans · unknownRockybillyscript · unknown · accentEnergetic sport, loud.
Thunder + CarattereThunderdisplay-sans · unknownCaratterescript · google-fonts · accentBold retro poster.
Perandory + Birds of ParadisePerandorydisplay-serif · unknownBirds of Paradisescript · unknown · accentWarm beauty editorial.
Symphony Pro + SanchezSymphony Proscript · unknownSanchezslab · unknownClassic, formal, botanical.

Foundation

Spacing

0px
4px
8px
12px
16px
24px
32px
48px

Foundation

Radius & elevation

0px
4px
6px
8px
none
0 1px 2px rgba(28, 25, 23, 0.06)
0 8px 24px rgba(28, 25, 23, 0.08)

Foundation

Motion

prefers-reduced-motion zeros the duration tokens in generated CSS

0ms
120ms
200ms
320ms
cubic-bezier(0.2, 0, 0, 1)
cubic-bezier(0.16, 1, 0.3, 1)

Foundation

Breakpoints

narrow below md · medium md to lg · wide lg and up

NameMin widthMedia
0px(min-width: 0px)
480px(min-width: 480px)
768px(min-width: 768px)
1024px(min-width: 1024px)
1280px(min-width: 1280px)

Component

Component aliases

Density-aware control metrics and editor-sidebar widths. Not a per-component catalog.

Aliascomfortable
2.5rem
var(--c2c-space-4)
var(--c2c-space-5)
var(--c2c-space-4)
20rem
16rem
28rem