UI Kit

Design system reference for the Jucca theme: typography, colors, and interactive elements.

Colors

Core palette used across the site. Cream is the default page background.

cream #F9F7ED --color-cream

black #000000 --color-black

white #FFFFFF --color-white

Inter variable font. Base size is 12px at the 1440px design width; all rem values scale proportionally on viewports wider than 1440px.

Inter

Abcdefghijklmnopqrstuvwxyz
0123456789

Regular 400

Medium 500

.type-body · 12px · lh 1.5

Body text used across pages, blocks, and navigation. The quick brown fox jumps over the lazy dog.

.type-label · uppercase · ls 0.12em

Section label

.type-link · underline

.type-block-text · lh 1.6

Block paragraph text for image splits and content blocks. Supports multiple paragraphs with spacing.

Second paragraph example.

h1 – h6 · weight 400 · lh 1.2

Minimal button styles aligned with editorial UI: text links, navigation, and icon controls.

Text button

Link

Nav button

Collections Active

Icon button