Skip to content
AstraFoundry

Materials

Radii, hairlines, warm shadows and the surfaces content sits on.

Radii

Seven steps in pixels. Pills are fully rounded; tile grids use 28 and large backdrop cards 40.

  • xs2px
  • sm4px
  • md6px
  • lg10px
  • xl14px
  • 2xl18px
  • 3xl24px

Concentric corners

Nested corners share a center: inner radius = outer radius − inset. Drag both, or compare with equal radii.

inner 20 = outer 28 − inset 8

Shadows

Two layers each, a crisp contact line and a soft warm spread.

  • shadow-1Controls, chips, cards at rest.
  • shadow-2Popovers and menus.
  • shadow-3Raised cards.
  • shadow-4Dialogs.
  • shadow-5A window or the focus surface on a photograph.

Surfaces

Where content sits. Tint is the only translucent surface, and it never blurs what is behind it.

  • BackgroundThe page.
  • CardSolid content and mock product UI.
  • FocusThe one solid surface on a photograph, white in both modes.
  • MutedWells and hover fills.
  • SubstrateDark backstage for demos and code.
  • TintSecondary chips on a photograph.

Rules

  1. 1Separate cells with a 1px gap over the border color, not per-cell borders.
  2. 2No backdrop-filter glass, outer glows or colored shadows.
  3. 3The only gradient is the ink scrim under text on a photograph, at most 55%.