Salt Glaze kit sheet

Look 15, the kit sheet

Salt Glaze

One dip, four depths. Everything the look is made of, on one page. Every block below is the real markup from sections/ and components/, so if a page built from the look disagrees with this sheet, this sheet wins.

Palette

The kiln room, one cobalt, the scale, and three status tiles.

Canvas and accent

--bg --surface --surface-2 --text --accent
--bg#E8E2D6
--surface#F7F3EB
--surface-2#D8D0C0
--text#101B33
--accent#2F5FBF
--accent-ink#F7F3EB
--accent-linergba(47, 95, 191, 0.45)
--accent-glowrgba(47, 95, 191, 0.20)
--accent-bglinear-gradient(180deg, #4D7ED4 0%, #2F5FBF 62%, #17357F 100%)
--accent-bg-uplinear-gradient(180deg, #6E9CDF 0%, #4D7ED4 55%, #2F5FBF 100%)
--accent-shadowinset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -10px 14px rgba(8, 26, 69, 0.34), 0 12px 22px -8px rgba(16, 27, 51, 0.40)
--accent-shadow-upinset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -10px 14px rgba(8, 26, 69, 0.30), 0 18px 28px -8px rgba(16, 27, 51, 0.45)
--ok#2F7A4F
--warn#9A6B12
--err#B23A2A

The scale and the halo

Decoration only. The four stops are four depths of one cobalt, from a kiss of glaze to a full dip, and the halo is the bloom the deepest one throws on the porcelain.

--deep#17357F
--mid#2F5FBF
--shallow#86AEE4
--kiss#EDF2F8
--ramplinear-gradient(90deg, #17357F 0%, #2F5FBF 34%, #86AEE4 67%, #EDF2F8 100%)
--haloradial-gradient(60% 55% at 50% 60%, rgba(47, 95, 191, 0.26), rgba(47, 95, 191, 0.07) 55%, rgba(47, 95, 191, 0) 78%)
--patternradial-gradient(120% 90% at 50% 40%, #F7F3EB 0%, #E8E2D6 55%, #D8D0C0 100%)
--grainurl("data:image/svg+xml

Type

Control Meter for display. Figtree for everything else.

Control Meter is the original face drawn for this look and ships in fonts/. The scale is closed: eyebrow, display, h2, lede, body, meta, price.

.bl-display

Everything at a depth.

.bl-h2

Four colours, one scale, nothing decorated.

.bl-price

$125one of fifty

.bl-lede

A look for sites built with Claude Code. Glazed stoneware you can press, bisque wells for everything chosen, four colours on porcelain, one cobalt per screen.

.bl-body

Raised is glazed stoneware: a hard gloss, the glaze pooling darker toward the bottom edge, one specular on top. Recessed is bisque, the matte well it sits in. There is no third material, and state is depth, never a colour.

.bl-eyebrow

Look 15, an edition of fifty

.bl-meta

Edition 07 of 50, archived when gone

.bl-label

Email

Materials

Two. Raised is glazed and can be pressed. Recessed is bisque.

.bl-raised
.bl-recessed

Icons

12 objects from the salt kiln. None is a variation of another.

24-unit grid, solid silhouettes, no strokes: each one dipped to its own depth, the bare clay at .38 of currentColor above the line and solid below. Use inline as <svg class="bl-icon"><use href="#i-name"/></svg> or as the files in assets/icons/.

chip
cone
dish
drip
fan
foot
glaze
kiln
ring
shelf
stack
tong

Motion

Drawn out.

Everything is drawn up out of the glaze: pieces rise the last few pixels into place, and headline words come up cobalt and drain to ink. Headlines rise word by word (.bl-words). Blocks fan in (.bl-reveal, staggered by .bl-stagger). Eyebrows and ledes follow (.bl-rise). The film comes up with the page (.bl-hero__film). A glazed surface lifts and deepens a stop on hover (.bl-hover-lift). Keys sink into bisque when pressed. Reduced motion lands everything instantly.

Word rise and reveal

.bl-reveal .bl-words .bl-rise .bl-rise--x .bl-rise--late .bl-hover-lift

Replay

Everything at a depth.

Click to play it again.

Loading

.bl-skeleton .bl-spinner .bl-progress
Installing the look

Components

Every state, drawn.

Helper classes (.is-hover, .is-focus, .is-active, .is-selected, .is-disabled, .is-loading, .is-invalid, .is-open, .is-checked) draw each state without a pointer. theme.css styles the helper and the real pseudo-class identically.

buttons

Buttons are glazed keys: a gloss on top, the glaze pooling darker at the bottom edge, a shadow under. The primary is the cobalt glaze with dark ink and is the one hit per screen. Hover lifts and deepens a stop; pressed sinks the key into bisque. Loading swaps the label for a spinner.

components/buttons.html

inputs

Fields are bisque wells. Focus lights the floor of the well cobalt; invalid draws an error line along it; disabled dims. The checkbox is a small well that fills with an cobalt disc when checked.

components/inputs.html

That does not look like an email.

No mailing list. We only write back.

cards

Cards are glazed tiles with a bisque window in them. Media is the halo, the dip or an icon on the pattern, never a photograph. Hover lifts and deepens; selected sinks the whole card into bisque.

components/cards.html

The dish

At rest. Deepens on hover.

Edition 15

The dip

Hover, drawn.

Live

The licence

Selected, sunk into bisque.

Chosen

badges

Badges are small bisque wells with a tile in them. The plain badge carries a dim disc; ok, warn and err colour it. They are the only place the status colours appear besides toasts and field errors.

components/badges.html
Chosen Edition 15 Edition open Twelve left Archived

tabs

Tabs are keys on a glazed strip. The active tab has been pressed into bisque. Hover darkens the ink, focus rings in the cobalt line, disabled dims.

components/tabs.html

accordion

The accordion is a stack of glazed tiles. The open item sinks into bisque and its plus becomes an cobalt minus.

components/accordion.html
Is it really mine?

Fifty sites get to wear Salt Glaze. Yours is one of them, with its own edition number and licence key.

Does Claude obey it?

CLAUDE.md is a set of rules with teeth. If a part does not exist, Claude stops and says so.

Why four colours?

Because a scale with more stops is a gradient, and a gradient is not a decision.

modal

The modal is a glazed panel over a scrim. The static modifier renders it inline on the sheet, in a bisque well with the halo behind it.

components/modal.html

toast

Toasts are small glazed slabs with a tile. Plain, ok, warn and err. The static modifier renders them inline.

components/toast.html
Saved.
Salt Glaze installed.Open
Twelve copies left.

table

The table is the shelf, set in a bisque well. Numbers are in Control Meter Regular and ranged right. Hover deepens a row; selected lifts it out of the well as a glazed strip.

components/table.html
LookStatusCopiesLeft
Aura GlowEdition open5043
RadioEdition open5050
Salt GlazeTwelve left5012
PlinthArchived500

Sections

Eleven sections, two variants each.

Variant A is what the demo uses. Variant B is the alternative for the same job. Page recipes are in CLAUDE.md.

nav

The top bar. A sits straight on the canvas: the cobalt tile beside the wordmark, links, the scheme toggle drawn as bisque with the ramp for a dot, and one glazed key. B adds a hairline for pages where the hero has no sleeve. The current link is recessed, a bisque well.

sections/nav.html

Variant A

Salt Glaze Get the look

Variant B

Salt Glaze Get the look

hero

The opening screen. A is the dip, full bleed: the film behind everything, the dip across the top of the screen, and the headline, lede, keys and the scale centred under it on a scrim. Until the film ships the video carries its poster alone, which is also what reduced motion shows; when it lands, a <source> for ../motion/salt-glaze-hero.mp4 goes inside the video. B is the split hero for inner pages: headline left, three bisque stats right, no film. Headlines use .bl-words so they rise word by word.

sections/hero.html

Variant A

Look 15 from Bandana

Everything at a depth.

One dip, four depths, and the porcelain they were cut from. Salt Glaze is a locked look for sites built with Claude Code: glazed stoneware you can press, bisque wells for everything chosen, one cobalt per screen. One folder, one prompt, fifty copies.

Get the look, $125 See the parts
The scale

Variant B

Look 15, inner page

One dip, four depths.

The split hero. Headline on the left, three bisque wells on the right, one cobalt key. For pricing, about and work pages.

Get the look, $125 See the parts
  • 50Copies
  • 4Colours
  • 2Materials

feature-grid

The parts of the look, one per glazed tile. A is six tiles in a grid, each with a dipped icon in a bisque well and a number; hover deeps the tile one stop. B is the same six as rows for a narrower page, icon left, text right.

sections/feature-grid.html

Variant A

The parts

Fired once, used everywhere.

A look is one folder. Everything in it obeys one file, and the file is not negotiable.

  • 01

    Two materials

    Glazed stoneware: a hard gloss, the glaze pooling darker toward the bottom edge, one specular on top. And bisque, the matte well it sits in. Keys are glazed, fields are bisque, and anything chosen sinks into bisque. State is depth, never a colour.

  • 02

    One scale

    Deep, mid, shallow, kiss. Four stops and nothing between them. The cobalt is the accent and lands once per screen, at the front of the dip.

  • 03

    Control Meter

    A condensed rounded monoline, drawn from scratch for Bandana and bundled with the look. Headlines, prices, big numbers. Never a paragraph.

  • 04

    Twelve icons

    Dipped: solid silhouettes, no strokes, and every line cut into the geometry. Dish, stack, fan, kiln, glaze, chip, ring, foot, tong, shelf, cone, drip. One drawing each.

  • 05

    Drawn out

    Everything is drawn up out of the glaze: pieces rise the last few pixels into place, and headline words come up cobalt and drain to ink. Headlines rise word by word. Nothing fades from nowhere and nothing slides in from off-screen. Presets only.

  • 06

    Both schemes

    Native is the salt kiln, porcelain. The other is the same tiles on porcelain stock in daylight. Only the colour tokens change; the film stays dark in both.

Variant B

The parts, as a list

Six things in the folder.

  • Glaze and bisque

    Raised and recessed. There is no third material.

  • The scale

    Four stops. The cobalt is the one hit per screen.

  • Control Meter

    Two cuts, display only, bundled.

  • Twelve icons

    Tiles only. None is a variation of another.

  • Drawn out

    From the stack, one stop deeper each.

  • Both schemes

    The kiln room, and the same tiles in daylight.

bento

The rules, made visible. A is six glazed tiles on a three-column grid: the keys and their states, the face, the dip drawn in CSS, the scale, the three status tiles, and the halo. B is four equal tiles for a shorter page.

sections/bento.html

Variant A

The rules, made visible

Glazed, bisque, and nothing else.

Glaze and bisque

A key is a glazed key: a gloss on top, the glaze pooling at the bottom edge. Press it and it sinks into bisque. Every field is bisque too, and the cobalt comes up along its floor on focus.

AaControl Meter, two cuts

The face

Regular for prices and stats, Bold for headlines and the mark.

The dip

Four tiles, cobalt in front. Drawn in CSS wherever a page needs the signature small.

The scale

The one gradient the look allows, and only as a bar: progress, the toggle dot, a bullet. Never on text, never behind a paragraph.

Edition open Twelve left Archived

Status, in three tiles

Ok, warn and err exist for badges, toasts and field errors, and nowhere else. They are never the accent.

The halo

The cobalt bloom under the dip. Hero and CTA backdrops, tile art, card media. Never behind a paragraph.

Variant B

Four rules

Short version.

One hit per screen

The cobalt lands on the primary key and nowhere else.

Chosen sinks

Selected, active, current: bisque, every time.

09Control Meter

Display for display

Headlines, prices, numbers. Body copy is Figtree.

Four colours

Nothing between the stops and nothing off the scale.

Variant A

Variant B

pricing

The editions. A is three glazed plans side by side; the chosen one has sunk into bisque and carries the one cobalt key. B is the same three as rows.

sections/pricing.html

Variant A

Editions

Fifty copies, then the kiln is cold.

Every look on the rack is sold fifty times and archived. No reprints, no free tier, no second firing.

One look

$125Salt Glaze

  • The whole folder, every part
  • Control Meter, both cuts
  • The film, the tile, twelve icons
  • One of fifty
Get one
Chosen

Three looks

$300any three

  • Any three looks on the rack
  • Seventy-five dollars off
  • Each one of its fifty
  • Switch a site between them in one line
Get three

Five looks

$425any five

  • Any five looks on the rack
  • Two hundred dollars off
  • Each one of its fifty
  • A studio's worth
Get five

Variant B

Editions, as rows

Pick a number.

One look

$125

The folder, the face, the film, one of fifty.

Get one

Three looks

$300

Any three on the rack, seventy-five dollars off.

Get three

Five looks

$425

Any five on the rack, two hundred dollars off.

Get five

testimonial

A rule, set large, on one glazed slab. Not a customer quote: the look speaks for itself. A is one centred slab. B is two side by side, ranged left.

sections/testimonial.html

Variant A

It refuses a fifth depth. Deep, mid, shallow, kiss, and the porcelain they are cut from.

Rule six, from the file the buyer's Claude obeys

Variant B

Nothing on the page is ever cold.

Rule one

State is depth. Chosen sinks into bisque.

Rule four

faq

Questions. A is the split: the head on the left, the accordion on the right; shut items are glazed, the open one has sunk into bisque and its plus has become an cobalt minus. B is a plain two-column definition list, no accordion.

sections/faq.html

Variant A

Questions

Before it goes in the kiln.

Short answers. The long ones are in the file.

What do I actually get?
One folder. A CLAUDE.md your Claude obeys, theme.css and motion.css, Control Meter in two cuts, eleven sections in two variants each, ten components with every state drawn, twelve icons, the tile, the film, and a kit sheet that shows all of it on one page.
Does it work on a site I already have?
Yes. Put the folder in the project, set data-look on the html element, link the two stylesheets, paste the starter prompt. Claude rebuilds every screen from the sections and components and stops when it needs a part that does not exist.
Can I add a colour?
No. The scale is four stops and the cobalt is the one hit per screen. If you want another colour, you want another look.
What happens after fifty?
The look is archived and a new one takes its place on the rack. The fifty owners keep it forever. Nobody else ever gets it.
Is the typeface mine?
Control Meter is licensed for sites wearing Salt Glaze, as many as you build. It is never sold apart and never redistributed on its own.
Is there a light version?
The same tiles on porcelain stock in daylight. Set data-scheme to light, or to auto to follow the system. Only the colour tokens change; the tiles stay as they are.

Variant B

Questions, flat

Six answers.

What do I get?
One folder: the file, two stylesheets, the face, eleven sections, ten components, twelve icons, the tile, the film, the kit sheet.
Does it fit an existing site?
Yes. Set data-look, link the stylesheets, paste the prompt.
Can I add a colour?
No. Four stops, one hit per screen.
After fifty?
Archived. The fifty keep it forever.
Is the typeface mine?
Licensed for sites wearing Salt Glaze, never sold apart.
A light version?
data-scheme="light", or auto. Only colours change.

cta

The close. A is one glazed slab with the halo under it, the headline left and the one cobalt key right. B is a full-width band, centred, for the foot of an inner page.

sections/cta.html

Variant A

Look 15

Take one before the kiln cools.

Fifty copies. When they are gone, Salt Glaze is archived and the rack moves on.

Get the look, $125

Variant B

Look 15

One dip, four depths.

One folder, one prompt, fifty copies.

Get the look, $125 See the parts

Variant A

Variant B

contact-form

Write to us. A is the split: the head on the left, the form on the right, every field a bisque well and the one cobalt key to send. B is the form alone on a glazed slab, for a contact page.

sections/contact-form.html

Variant A

Write to us

Ask before you buy.

Tell us what you are building and which looks you have your eye on. We answer within a day.

Variant B

Write to us

A sentence is enough.

Tokens

84 custom properties. Nothing else exists.

Native values first; the light scheme overrides only the colour tokens. The same list is in theme.json.

TokenGroupNativelight
--bgcanvas#E8E2D6#121A2B
--surfacecanvas#F7F3EB#1A2440
--surface-2canvas#D8D0C0#0C1220
--textcanvas#101B33#E7EDF7
--text-2canvasrgba(16, 27, 51, 0.70)rgba(231, 237, 247, 0.70)
--text-3canvasrgba(16, 27, 51, 0.46)rgba(231, 237, 247, 0.44)
--linecanvasrgba(16, 27, 51, 0.12)rgba(231, 237, 247, 0.12)
--accentaccent#2F5FBF#6E9CDF
--accent-inkaccent#F7F3EB#0C1220
--accent-lineaccentrgba(47, 95, 191, 0.45)rgba(110, 156, 223, 0.45)
--accent-glowaccentrgba(47, 95, 191, 0.20)rgba(110, 156, 223, 0.26)
--accent-bgaccentlinear-gradient(180deg, #4D7ED4 0%, #2F5FBF 62%, #17357F 100%)linear-gradient(180deg, #86AEE4 0%, #6E9CDF 62%, #3E6DC9 100%)
--accent-bg-upaccentlinear-gradient(180deg, #6E9CDF 0%, #4D7ED4 55%, #2F5FBF 100%)linear-gradient(180deg, #A8C6EE 0%, #86AEE4 55%, #6E9CDF 100%)
--accent-shadowaccentinset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -10px 14px rgba(8, 26, 69, 0.34), 0 12px 22px -8px rgba(16, 27, 51, 0.40)inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -10px 14px rgba(8, 26, 69, 0.34), 0 12px 22px -8px rgba(16, 27, 51, 0.40)
--accent-shadow-upaccentinset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -10px 14px rgba(8, 26, 69, 0.30), 0 18px 28px -8px rgba(16, 27, 51, 0.45)inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -10px 14px rgba(8, 26, 69, 0.30), 0 18px 28px -8px rgba(16, 27, 51, 0.45)
--deepaura#17357F#2F5FBF
--midaura#2F5FBF#5C8FD8
--shallowaura#86AEE4#A8C6EE
--kissaura#EDF2F8#E7EDF7
--rampauralinear-gradient(90deg, #17357F 0%, #2F5FBF 34%, #86AEE4 67%, #EDF2F8 100%)linear-gradient(90deg, #2F5FBF 0%, #5C8FD8 34%, #A8C6EE 67%, #E7EDF7 100%)
--haloauraradial-gradient(60% 55% at 50% 60%, rgba(47, 95, 191, 0.26), rgba(47, 95, 191, 0.07) 55%, rgba(47, 95, 191, 0) 78%)radial-gradient(60% 55% at 50% 60%, rgba(110, 156, 223, 0.34), rgba(110, 156, 223, 0.10) 55%, rgba(110, 156, 223, 0) 78%)
--patternauraradial-gradient(120% 90% at 50% 40%, #F7F3EB 0%, #E8E2D6 55%, #D8D0C0 100%)radial-gradient(120% 90% at 50% 40%, #1A2440 0%, #121A2B 55%, #0C1220 100%)
--grainauraurl("data:image/svg+xmlurl("data:image/svg+xml
--grain-opacityother0.050.07
--hero-textother#101B33#E7EDF7
--hero-text-2otherrgba(16, 27, 51, 0.72)rgba(231, 237, 247, 0.72)
--hero-scrimotherlinear-gradient(90deg, var(--bg) 0 24%, rgba(232, 226, 214, 0.84) 42%, rgba(232, 226, 214, 0.16) 58%, rgba(232, 226, 214, 0) 72%)linear-gradient(90deg, var(--bg) 0 28%, rgba(18, 26, 43, 0.92) 46%, rgba(18, 26, 43, 0.66) 66%, rgba(18, 26, 43, 0.52) 100%)
--okstatus#2F7A4F#7FC79A
--warnstatus#9A6B12#E0B15A
--errstatus#B23A2A#E8836F
--raised-bgmaterialslinear-gradient(180deg, #FFFFFF 0%, #F7F3EB 55%, #E9E2D5 100%)linear-gradient(180deg, #24304F 0%, #1B2540 55%, #151D34 100%)
--raised-bg-upmaterialslinear-gradient(180deg, #FFFFFF 0%, #FBF8F2 55%, #F0EADE 100%)linear-gradient(180deg, #2C3A5E 0%, #212C4B 55%, #1A2440 100%)
--raised-flatmaterials#F7F3EB#1B2540
--raised-inkmaterials#101B33#E7EDF7
--raised-ink-2materialsrgba(16, 27, 51, 0.70)rgba(231, 237, 247, 0.70)
--raised-shadowmaterialsinset 0 1px 0 #FFFFFF, inset 0 -12px 18px -8px rgba(16, 27, 51, 0.20), 0 1px 0 rgba(16, 27, 51, 0.12), 0 18px 30px -12px rgba(16, 27, 51, 0.32)inset 0 1px 0 rgba(231, 237, 247, 0.18), inset 0 -12px 18px -8px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(0, 0, 0, 0.4), 0 18px 30px -12px rgba(0, 0, 0, 0.6)
--raised-shadow-upmaterialsinset 0 1px 0 #FFFFFF, inset 0 -12px 18px -8px rgba(16, 27, 51, 0.16), 0 1px 0 rgba(16, 27, 51, 0.12), 0 26px 40px -14px rgba(16, 27, 51, 0.38)inset 0 1px 0 rgba(231, 237, 247, 0.26), inset 0 -12px 18px -8px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(0, 0, 0, 0.4), 0 26px 40px -14px rgba(0, 0, 0, 0.65)
--raised-hitmaterialsinset 0 1px 0 #FFFFFF, inset 0 -12px 18px -8px rgba(16, 27, 51, 0.20), 0 0 0 2px var(--accent-line), 0 18px 30px -12px rgba(16, 27, 51, 0.32)inset 0 1px 0 rgba(231, 237, 247, 0.18), inset 0 -12px 18px -8px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--accent-line), 0 18px 30px -12px rgba(0, 0, 0, 0.6)
--glossmaterialsradial-gradient(70% 60% at 30% 0%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 70%)radial-gradient(70% 60% at 30% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%)
--gloss-strongmaterialsradial-gradient(60% 50% at 35% 0%, rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0) 70%)radial-gradient(60% 50% at 35% 0%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%)
--recessed-bgmaterials#D7CFC0#0E1626
--recessed-shadowmaterialsinset 0 3px 6px rgba(16, 27, 51, 0.26), inset 0 1px 0 rgba(16, 27, 51, 0.16), inset 0 -1px 0 #FFFFFF, 0 1px 0 #FFFFFFinset 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(231, 237, 247, 0.10), 0 1px 0 rgba(231, 237, 247, 0.06)
--recessed-shadow-deepmaterialsinset 0 5px 10px rgba(16, 27, 51, 0.30), inset 0 1px 0 rgba(16, 27, 51, 0.20), inset 0 -1px 0 #FFFFFF, 0 1px 0 #FFFFFFinset 0 5px 10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(231, 237, 247, 0.12), 0 1px 0 rgba(231, 237, 247, 0.06)
--recessed-litmaterialsinset 0 3px 6px rgba(16, 27, 51, 0.26), inset 0 -1px 0 var(--accent), inset 0 -14px 24px -14px var(--accent-glow), 0 1px 0 #FFFFFFinset 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 -1px 0 var(--accent), inset 0 -14px 24px -14px var(--accent-glow), 0 1px 0 rgba(231, 237, 247, 0.06)
--scrimmaterialsrgba(247, 243, 235, 0.82)rgba(12, 18, 32, 0.80)
--chevronmaterialsurl("data:image/svg+xmlurl("data:image/svg+xml
--font-displaytype"Control Meter", "IBM Plex Sans Condensed", "Arial Narrow", sans-serif"Control Meter", "IBM Plex Sans Condensed", "Arial Narrow", sans-serif
--font-bodytype"Figtree", system-ui, sans-serif"Figtree", system-ui, sans-serif
--display-weighttype700700
--text-xstype.75rem.75rem
--text-smtype.875rem.875rem
--text-mdtype1.0625rem1.0625rem
--text-lgtype1.1875rem1.1875rem
--text-xltype1.5rem1.5rem
--text-h3type1.75rem1.75rem
--text-h2typeclamp(2.2rem, 4.4vw, 3.8rem)clamp(2.2rem, 4.4vw, 3.8rem)
--text-displaytypeclamp(3rem, 7vw, 6.4rem)clamp(3rem, 7vw, 6.4rem)
--text-pricetype3rem3rem
--track-capstype.16em.16em
--leading-tighttype.98.98
--leading-bodytype1.551.55
--radiusshape22px22px
--radius-smshape14px14px
--radius-pillshape999px999px
--ruleshape1px1px
--space-1space.25rem.25rem
--space-2space.5rem.5rem
--space-3space.75rem.75rem
--space-4space1rem1rem
--space-5space1.5rem1.5rem
--space-6space2rem2rem
--space-7space3rem3rem
--space-8space4.5rem4.5rem
--space-9space7rem7rem
--wrapspace1200px1200px
--controlspace50px50px
--control-smspace38px38px
--iconspace22px22px
--dur-fastmotion160ms160ms
--durmotion420ms420ms
--dur-slowmotion820ms820ms
--easemotioncubic-bezier(.2, .7, .2, 1)cubic-bezier(.2, .7, .2, 1)
--ease-fanmotioncubic-bezier(.16, 1, .3, 1)cubic-bezier(.16, 1, .3, 1)
--reveal-ymotion0px0px