Surfaces

The surface= attribute sets the visual material of an element — controlling background, blur, and border treatment. Combine with tone= to tint any surface.

glass

Frosted glass with a subtle blur and low-opacity white background.

Glass surface

Backdrop blur + transparent fill

<div surface="glass" density="spacious" radius="xl">
  Glass surface
</div>

solid

Filled background using the active tone color. Defaults to a subtle white fill when no tone is set.

Solid + primary

Solid (no tone)

<div surface="solid" tone="primary" density="spacious" radius="xl">
  Solid + primary
</div>

<div surface="solid" density="spacious" radius="xl">
  Solid (no tone)
</div>

matte

No border, minimal fill. Great for content sections and wrappers.

Matte surface

Subtle fill, no border

<div surface="matte" density="spacious" radius="xl">
  Matte surface
</div>

ghost

Border-only. Transparent background with a tinted border when a tone is applied.

Ghost (no tone)

Ghost + primary

<div surface="ghost" density="spacious" radius="xl">
  Ghost (no tone)
</div>

<div surface="ghost" tone="primary" density="spacious" radius="xl">
  Ghost + primary
</div>

frosted

Heavy blur with a high-opacity background. Suitable for modals and sidebars.

Frosted surface

High-opacity backdrop blur

<div surface="frosted" density="spacious" radius="xl">
  Frosted surface
</div>

neon

Glowing border effect driven by the active tone color. Best with tone= applied.

Neon + primary

Neon + accent

<div surface="neon" tone="primary" density="spacious" radius="xl">
  Neon + primary
</div>

<div surface="neon" tone="accent" density="spacious" radius="xl">
  Neon + accent
</div>

Density & Radius

density= controls internal padding. radius= controls border-radius. Both work independently of surface.

density

compact

default

spacious

<div surface="matte" density="compact"  radius="md">compact</div>
<div surface="matte" density="default"  radius="md">default</div>
<div surface="matte" density="spacious" radius="md">spacious</div>

radius

none

full

<div surface="solid" tone="primary" density="default" radius="none">none</div>
<div surface="solid" tone="primary" density="default" radius="sm">sm</div>
<div surface="solid" tone="primary" density="default" radius="md">md</div>
<div surface="solid" tone="primary" density="default" radius="lg">lg</div>
<div surface="solid" tone="primary" density="default" radius="xl">xl</div>
<div surface="solid" tone="primary" density="default" radius="full">full</div>