Shape and elevation

CSS names use the nesra namespace. Commas in source names become hyphens.

export function SurfaceExample() {
  return (
    <div className="rounded-nesra-md border-nesra-stroke-1 border-nesra-stroke-border bg-nesra-surface-card-bg-neutral p-nesra-padding-2xl shadow-nesra-xs">
      Account details
    </div>
  );
}

Border Radius variables

Figma variable	CSS token	Resolved value
radius-none	--nesra-radius-none	0px
radius-xs	--nesra-radius-xs	4px
radius-sm	--nesra-radius-sm	8px
radius-md	--nesra-radius-md	10px
radius-xl	--nesra-radius-xl	12px
radius-2xl	--nesra-radius-2xl	16px
radius-3xl	--nesra-radius-3xl	24px
radius-4xl	--nesra-radius-4xl	32px
radius-5xl	--nesra-radius-5xl	40px
radius-full	--nesra-radius-full	999px

Figma does not define a radius-lg variable.

Stroke variables

These are stroke widths. Stroke colors are under Colors.

Figma variable	CSS token	Value
stroke-0,5	--nesra-stroke-width-0-5	0.5px
stroke-0,75	--nesra-stroke-width-0-75	0.75px
stroke-1	--nesra-stroke-width-1	1px
stroke-1,5	--nesra-stroke-width-1-5	1.5px
stroke-2	--nesra-stroke-width-2	2px
stroke-2,5	--nesra-stroke-width-2-5	2.5px
stroke-4	--nesra-stroke-width-4	4px

Box Shadow effect styles

Each token contains a complete shadow value. The Shadow/* color variables are listed under Colors. Box Shadow/Focus ring binds its color to Figma’s Colors/Brand/primary/primary-200 variable, which currently resolves to #e5e7eb.

Figma effect style	CSS token	CSS value
Box Shadow/shadow-2xs	--nesra-box-shadow-2xs	0 1px 0 0 rgb(0 0 0 / 5%)
Box Shadow/shadow-xs	--nesra-box-shadow-xs	0 1px 2px 0 rgb(0 0 0 / 10%)
Box Shadow/shadow-sm	--nesra-box-shadow-sm	0 1px 3px 0 rgb(0 0 0 / 10%)
Box Shadow/shadow-md	--nesra-box-shadow-md	0 2px 4px -2px rgb(0 0 0 / 10%), 0 4px 6px -1px rgb(0 0 0 / 10%)
Box Shadow/shadow-lg	--nesra-box-shadow-lg	0 4px 6px -4px rgb(0 0 0 / 2%), 0 10px 15px -3px rgb(0 0 0 / 8%)
Box Shadow/shadow-xl	--nesra-box-shadow-xl	0 8px 40px -6px rgb(0 0 0 / 6%), 0 20px 25px -5px rgb(0 0 0 / 6%)
Box Shadow/shadow-2xl	--nesra-box-shadow-2xl	0 25px 50px -12px rgb(0 0 0 / 15%)
Box Shadow/shadow-inner	--nesra-box-shadow-inner	inset 0 2px 4px 0 rgb(0 0 0 / 6%)
Box Shadow/shadow-none	--nesra-box-shadow-none	none
Box Shadow/Focus ring	--nesra-box-shadow-focus-ring	0 0 0 3px var(--nesra-brand-primary-200)
Box Shadow/Destructive	--nesra-box-shadow-destructive	0 0 0 3px rgb(220 38 38 / 20%)
Box Shadow/shadow-xs-skeuomorphic	--nesra-box-shadow-xs-skeuomorphic	0 1px 2px 0 rgb(0 0 0 / 5%), inset 0 -2px 0 0 rgb(0 0 0 / 5%), inset 0 0 0 1px rgb(0 0 0 / 18%)