Playground

Surface

layout

container

Consistent frame/container styling: tone + radius + border + shadow + padding

Replace ad-hoc div wrappers for cards, panels, callouts

Interactive surfaces for clickable cards and linked containers

import { Surface } from "@everydayos/ui";

Usage

Surface with built-in padding — no manual p-surface-padding needed

Surface Card

Use Surface for consistent radius/tone/border/shadow decisions.

API

tone

Default: default

defaultmutedelevatedglassdark

defaultpreferredrare

radius

Default: sm

nonesmmdlgxl2xl

defaultpreferredrare

shadow

Default: none

nonesmmdlgxl

padding

Default: false

smmdlgxl

defaultpreferredrare

Prop	Type	Default
`as`	`React.ElementType`	`"div"`
`border`	`boolean`	`false`
`interactive`	`boolean`	`false`
`className`	`string`	—
`children`*	`React.ReactNode`	—

Examples

Interactive Surface

Clickable surface with hover lift and press feedback

Default

Bordered, clean background

Muted

Subtle fill, no border

Dark

Ink background for contrast

Glass

Frosted blur on imagery

Dark Surface

Ink-dark surface for contrast sections

<Surface tone="dark" radius="sm" padding="lg">
  <Stack spacing="sm">
    <Heading as="h3" size="m" className="text-white">Dark Card</Heading>
    <Text className="text-white/60">White text on ink background.</Text>
  </Stack>
</Surface>

Glass Surface

Frosted glass with backdrop blur — use on images or dark backgrounds

<div className="relative rounded-sm overflow-hidden">
  <Image src="/texture.jpg" fill className="object-cover" alt="" />
  <Surface tone="glass" radius="sm" padding="md" className="relative">
    <Stack spacing="xs">
      <Text className="text-white" weight="semibold">Glass</Text>
      <Text size="s" className="text-white/60">Frosted blur on imagery</Text>
    </Stack>
  </Surface>
</div>

Composition

Pairs well with

Stack

Heading

Text

Button

When to avoid

Only need spacing — use Stack instead
Need full-bleed background — use Section
Need structured header/content/footer — use Card instead

Patterns

Card

Surface

Stack

Heading

Text

Button

Grouped content block with title, body, and optional actions

<Surface tone="muted" radius="sm" padding>
  <Stack spacing="sm">
    <Heading as="h3" size="m">Card Title</Heading>
    <Text variant="muted">Card description text</Text>
    <Button size="sm" className="w-fit">Action</Button>
  </Stack>
</Surface>