Shape, depth and light

Radius, shadows, the sidebar sheen and the studio ground. Generated from phase-2/kit/tokens.css (kit v3); the full page is docs › Foundations.

Radius scale

Every corner in the admin is one of these.

Token	Value	Resolves to	Use	Direct refs
`--r-chip`	`4px`	—	square chips	51
`--r-control`	`6px`	—	buttons, inputs, menu items, filter chips	64
`--r-card`	`8px`	—	cards, table wrap, popovers (= radius + 2)	64
`--r-frame`	`15px`	—	panels, app frame, specimen cards	63
`--r-pill`	`999px`	—	switch, avatar	63
`--r-media`	`4px`	—	photos inside cards	17
`--r-card-inner`	`calc(var(--r-card) - 1px)`	`calc(8px - 1px)`	photo corners inside a 1px-bordered card (raised by cards-gallery)	7
`--radius`	`0.375rem`	—	6px (shadcn --radius)	0

--r-chip4px

--r-control6px

--r-card8px

--r-frame15px

--r-pill999px

--r-media4px

--r-card-innercalc(var(--r-card) - 1px)

--radius0.375rem

Uses--r-chip--r-control--r-card--r-frame--r-pill--r-media--r-card-inner--radius

Shadow scale

Navy-tinted, soft and low. Each one has one job.

Every shadow is tinted with the navy ink (RGB of --primary), never black. Use the token by name: box-shadow: var(--e-pop).

Token	Value	When	Direct refs
`--e-0`	`none`	flat: tables, rows, chips, inline content	0
`--e-1`	`0 1px 2px rgba(14,23,41,.04)`	card	37
`--e-btn`	`0 1px 2px rgba(14,23,41,.20)`	primary button	0
`--e-btn-2`	`0 1px 1px rgba(14,23,41,.05)`	secondary button	0
`--e-frame`	`0 0 0 1px rgba(14,23,41,.05), 0 16px 36px -24px rgba(14,23,41,.20)`	app frame	0
`--e-pop`	`0 12px 32px -10px rgba(14,23,41,.25)`	dropdown, combobox	63
`--e-toast`	`0 12px 28px -14px rgba(14,23,41,.35)`	toast	0
`--e-sheet`	`-24px 0 60px -20px rgba(14,23,41,.35)`	side sheet, help drawer	0
`--e-dialog`	`0 24px 64px -20px rgba(14,23,41,.40)`	dialog, confirm, guard	0
`--e-phone-sheet`	`0 -20px 50px -20px rgba(14,23,41,.50)`	phone bottom sheet	0
`--e-card-hover`	`0 10px 24px -14px rgba(14,23,41,.28)`	lifted card / kanban card (raised by cards-gallery + data-display)	12
`--e-rail`	`inset 2px 0 0 hsl(var(--primary))`	2px primary rail: selected row (.fc-cp-tbl)	0
`--e-rail-warning`	`inset 2px 0 0 hsl(var(--warning))`	2px warning rail (surfaces)	0
`--e-rail-strong`	`inset 3px 0 0 hsl(var(--primary))`	3px primary rail (surfaces)	0
`--e-rail-strong-info`	`inset 3px 0 0 hsl(var(--info))`	—	0
`--e-rail-strong-warning`	`inset 3px 0 0 hsl(var(--warning))`	stale card	0
`--e-rail-strong-destructive`	`inset 3px 0 0 hsl(var(--destructive))`	blocked card	0
`--e-row-focus`	`inset 0 1px 0 hsl(var(--ring)),inset 0 -1px 0 hsl(var(--ring))`	keyboard-focused table row cell	0
`--e-row-focus-first`	`inset 2px 0 0 hsl(var(--ring)),inset 0 1px 0 hsl(var(--ring)),inset 0 -1px 0 hsl(var(--ring))`	its first cell	0
`--e-sidebar-edge`	`inset -1px 0 0 rgba(201,206,218,.07)`	the sidebar's inner right edge	0
`--e-sidebar-item-on`	`inset 0 0 0 1px rgba(201,206,218,.09),0 6px 18px -12px rgba(110,140,210,.22)`	active menu item edge + soft glow	0
`--e-brand-mark`	`0 0 12px -4px rgba(150,175,225,.22)`	brand mark glow	0

--e-0flat: tables, rows, chips, inline content

--e-1card

--e-btnprimary button

--e-btn-2secondary button

--e-frameapp frame

--e-popdropdown, combobox

--e-toasttoast

--e-sheetside sheet, help drawer

--e-dialogdialog, confirm, guard

--e-phone-sheetphone bottom sheet

--e-card-hoverlifted card / kanban card (raised by cards-gallery + data-display)

--e-rail2px primary rail: selected row (.fc-cp-tbl)

--e-rail-warning2px warning rail (surfaces)

--e-rail-strong3px primary rail (surfaces)

--e-rail-strong-info—

--e-rail-strong-warningstale card

--e-rail-strong-destructiveblocked card

--e-row-focuskeyboard-focused table row cell

--e-row-focus-firstits first cell

--e-sidebar-edgethe sidebar's inner right edge

--e-sidebar-item-onactive menu item edge + soft glow

--e-brand-markbrand mark glow

Uses--e-0--e-1--e-btn--e-btn-2--e-frame--e-pop--e-toast--e-sheet--e-dialog--e-phone-sheet--e-card-hover--e-rail--e-rail-warning--e-rail-strong--e-rail-strong-info--e-rail-strong-warning--e-rail-strong-destructive--e-row-focus--e-row-focus-first--e-sidebar-edge--e-sidebar-item-on--e-brand-mark

The sidebar light

About a third of Silk Facing's glow, sidebar only.

The light sits top left: .sidebar::before paints --sidebar-sheen-light as an ellipse over --sidebar-sheen. The active item adds a faint inner edge, a soft blue under-light and a thin rail in --sidebar-primary.

Uses--sidebar-sheen--sidebar-sheen-light--sidebar-primary--sidebar-foreground

Layer by layer (quoted from base.css)

Selector	Property	Value	Source
`.sidebar`	`background`	`var(--sidebar-sheen)`	From tokens
`.sidebar`	`color`	`hsl(var(--sidebar-foreground))`	From tokens
`.sidebar`	`box-shadow`	`var(--e-sidebar-edge)`	From tokens
`.sidebar::before`	`background`	`var(--sidebar-sheen-light)`	From tokens
`.sb-item`	`color`	`inherit`	From tokens
`.sb-item:hover`	`background`	`hsl(var(--sidebar-foreground)/.06)`	From tokens
`.sb-item.on`	`background`	`var(--sidebar-item-on)`	From tokens
`.sb-item.on`	`color`	`hsl(var(--sidebar-accent-foreground))`	From tokens
`.sb-item.on`	`box-shadow`	`var(--e-sidebar-item-on)`	From tokens
`.sb-item.on::before`	`background`	`hsl(var(--sidebar-primary))`	From tokens
`.sb-item.on::before`	`opacity`	`.8`	From tokens
`.sb-item.on svg`	`color`	`var(--sidebar-item-on-icon)`	From tokens
`.sb-item.on svg`	`opacity`	`1`	From tokens
`.sb-item svg`	`opacity`	`.8`	From tokens
`.brand-mark`	`background`	`var(--brand-mark)`	From tokens
`.brand-mark`	`color`	`var(--brand-mark-foreground)`	From tokens
`.brand-mark`	`box-shadow`	`var(--e-brand-mark)`	From tokens

base.css · sidebar rules (quoted)

.sidebar {
  background: var(--sidebar-sheen);
  color: hsl(var(--sidebar-foreground));
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  position: relative;
  box-shadow: var(--e-sidebar-edge);
}
.sidebar::before {
  content: "";
  position: absolute;
  left: -40px;
  top: -60px;
  width: 300px;
  height: 260px;
  border-radius: 50%;
  background: var(--sidebar-sheen-light);
  pointer-events: none;
}
.sidebar>* {
  position: relative;
}
.title,.page-title,.btn,.sb-item,.sb-group,.sb-brand b,.lbl,.th,.kit-h1,.kit-h2,.spec-h,.sec-title,.tab,.seg-i {
  font-family: var(--font-voice);
  font-stretch: var(--font-stretch-title);
  font-variation-settings: normal;
}
.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-control);
  font-size: var(--text-card);
  font-weight: var(--w-medium);
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: background-color var(--motion-hover),color var(--motion-hover);
}
.sb-item:hover {
  background: hsl(var(--sidebar-foreground)/.06);
}
.sb-item.on {
  background: var(--sidebar-item-on);
  color: hsl(var(--sidebar-accent-foreground));
  box-shadow: var(--e-sidebar-item-on);
}
.sb-item.on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 2px;
  background: hsl(var(--sidebar-primary));
  opacity: .8;
}
.sb-item.on svg {
  color: var(--sidebar-item-on-icon);
  opacity: 1;
}
.sb-item svg {
  opacity: .8;
}
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: var(--r-control);
  display: grid;
  place-items: center;
  font: var(--w-bold) 12px/1 var(--font-voice);
  background: var(--brand-mark);
  color: var(--brand-mark-foreground);
  box-shadow: var(--e-brand-mark);
}
.sb-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 2px;
  font-size: var(--text-small);
  border-top: 1px solid hsl(var(--sidebar-foreground)/.12);
}

The brand mark gradient, its glow, the active item's white fill and under-light, the active icon tint and the sidebar's inner edge are written as hex and rgba in base.css. They render board 3 exactly; port them as written, or raise tokens (--sidebar-mark, --sidebar-item-on) in the build lane.

Studio ground

The photo ground for garments and cloth.

Garment photos sit on --studio, a soft radial ground, inside --r-media corners.

Uses--studio--r-media.thumb