Skip to content

Search

Start typing to search.

Show all pages

05 Skins

Skin gallery

One card, dressed by every skin that ships with Calaca UI. The HTML is identical in each; switch the appearance in the header to see light and dark, or wear a skin to dress the whole site.

Base skin

Neutral grayscale starting point; product skins extend it and change what differs.

LightDark
Pageoklch(98.5% 0 0)oklch(14.5% 0 0)
Cardoklch(100% 0 0)oklch(20% 0 0)
Textoklch(15% 0 0)oklch(100% 0 0)
Primaryoklch(15% 0 0)oklch(100% 0 0)
Strong borderoklch(55% 0 0)oklch(60% 0 0)

New project

Draft

Give it a name now. You can invite your team later.

Everyone you invite sees this name.

Calaca skin

The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.

LightDark
Pageoklch(97.73% 0.0102 81.8)oklch(23.38% 0.0383 294.75)
Cardoklch(100% 0 0)oklch(28.11% 0.051 292.66)
Textoklch(23.38% 0.0383 294.75)oklch(95.41% 0.0188 83.06)
Primaryoklch(73.49% 0.1613 58.77)oklch(73.49% 0.1613 58.77)
Strong borderoklch(23.38% 0.0383 294.75)oklch(95.41% 0.0188 83.06)

New project

Draft

Give it a name now. You can invite your team later.

Everyone you invite sees this name.

Proof skin

Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.

LightDark
Pageoklch(98.5% 0 0)oklch(14.5% 0 0)
Cardoklch(100% 0 0)oklch(20% 0 0)
Textoklch(15% 0 0)oklch(100% 0 0)
Primaryoklch(15% 0 0)oklch(100% 0 0)
Strong borderoklch(55% 0 0)oklch(60% 0 0)

New project

Draft

Give it a name now. You can invite your team later.

Everyone you invite sees this name.

Crossview skin

The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.

LightDark
Pageoklch(97.2% 0.003 247.9)#10151B
Cardoklch(100% 0 0)#181F28
Textoklch(18.8% 0.013 248.5)#EDF1F5
Primaryoklch(66.2% 0.225 28.5)#FF5240
Strong borderoklch(83.6% 0.014 251.6)#435163

New project

Draft

Give it a name now. You can invite your team later.

Everyone you invite sees this name.

Skeleton (core only)

The skeleton itself: structure, states and hit areas, with nothing dressed yet.

No tokens and no clothes: the skeleton takes its colors from the page around it.

New project

Draft

Give it a name now. You can invite your team later.

Everyone you invite sees this name.

Your product, your skin

Extend the neutral base skin and change only what makes your product different, or start from the bare skeleton.

Write your own skin