Card

In review

Live · web

Elevation ladder: same fill, deeper neutral shadow + top sheen

L12px

Inline rows, chips

L25px

Most cards

L39px

Popovers, input bar

L414px

Sheets, dialogs

Interactive: hover raises, press sinks, tab for the focus ring

Static

Borderless card

No hairline: depth reads from the shadow + catch-light alone. Not interactive.

Interactive card fired 0 times. The island is live.

Code

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform. Spec + live demo,
// not yet exported from @dizyx/nockerl-react; promotion is tracked.)

export function SessionList() {
  return (
    <>
      {/* Static container: the standard L2 plane. */}
      <Card elevation="l2">
        <h3>Nockerl design system</h3>
        <p>A lifted card: neutral shadow below, catch-light on top.</p>
      </Card>

      {/* Interactive. The whole surface is one tappable button. */}
      <Card elevation="l2" interactive ariaLabel="Open session nockerl-cli" onClick={openSession}>
        <span className="eyebrow">Session</span>
        <h3>nockerl-cli</h3>
      </Card>
    </>
  );
}

// Android (Jetpack Compose, canonical). com.nockerl.app.core.theme.NockerlCard
import com.nockerl.app.core.theme.NockerlCard
import com.nockerl.app.core.theme.NockerlElevation

// Static container: the standard L2 plane (tier-1 fill, hairline, lit material).
NockerlCard(modifier = Modifier.fillMaxWidth()) {
    Column(Modifier.padding(16.dp)) {
        Text("Nockerl design system")
        Text("A lifted card: tinted drop shadow below, catch-light on top.")
    }
}

// Interactive. There is no onClick param; compose clickable on the modifier.
NockerlCard(
    elevation = NockerlElevation.Level2,
    modifier = Modifier
        .fillMaxWidth()
        .clickable(onClickLabel = "Open session nockerl-cli") { openSession() },
) {
    Column(Modifier.padding(16.dp)) { Text("nockerl-cli") }
}

// macOS: SwiftUI (canonical). In NockerlVoice/UI, the lifted-card treatment is
// composed from the NockerlTheme tokens (no single Card view yet).
RoundedRectangle(cornerRadius: NockerlTheme.cardRadius)   // 14pt today; see drift
    .fill(NockerlTheme.card1)                             // #2C313A on dark
    .overlay(
        RoundedRectangle(cornerRadius: NockerlTheme.cardRadius)
            .strokeBorder(NockerlTheme.hairline, lineWidth: 1)   // white ~8%
    )
    .shadow(color: .black.opacity(0.5), radius: 10, y: 6)  // NEUTRAL drop shadow
    .overlay(alignment: .top) {                            // top catch-light sheen
        LinearGradient(colors: [.white.opacity(0.06), .clear],
                       startPoint: .top, endPoint: .bottom)
            .frame(height: 1)
    }
    .overlay { content.padding(16) }

Parameters

Prop	Type	Default	Description
`elevation`	`'l1' \| 'l2' \| 'l3' \| 'l4'`	`'l2'`	Elevation rung. Grows the neutral shadow, never the surface lightness.
`interactive`	`boolean`	`false`	Renders the surface as a `button`: hover raises, press sinks, focus shows the ring.
`borderless`	`boolean`	`false`	Drop the hairline border; depth then reads from shadow + catch-light alone.
`onClick`	`() => void`		Click handler. Only meaningful when `interactive`.
`ariaLabel`	`string`		Accessible name for an interactive card (required when its content is not a clear label).
`children`	`ReactNode`		Card content. Padded by the card; never bleeds to the edge.

Parameter	Type	Default	Description
`modifier`	`Modifier`	`Modifier`	External modifier (size, alignment, and `.clickable { }` to make the card a tap target).
`shape`	`Shape`	`NockerlCardShape`	Card silhouette. Defaults to the rounded card radius; pass a `ChamferedCornerShape` for the angled accent.
`color`	`Color`	`cardSurface1`	Solid surface fill. Ignored when `gradient` is set.
`gradient`	`Brush?`	`null`	Optional gradient fill (the agent / team-card top-lit sheen). Overrides `color`.
`elevation`	`Dp`	`NockerlElevation.Level2`	Drop-shadow elevation. Prefer a `NockerlElevation` preset (`Level1 · Level2 · Level3`).
`border`	`Color?`	`cardHairline`	Hairline border color. Pass `null` for no border.
`borderWidth`	`Dp`	`1.dp`	Border stroke width.
`content` *	`@Composable BoxScope.() -> Unit`		Card content, laid out inside the lifted surface.

No onClick parameter on NockerlCard

NockerlCard is a pure surface. To make it tappable you compose Modifier.clickable { } (with onClickLabel for the accessible name) onto the modifier, exactly as the shipped tool / agent cards do. This keeps the surface and the interaction concerns separate.

SwiftUI has no single Card view yet; the lifted-card treatment is composed from the NockerlTheme tokens (fill + hairline + neutral shadow + top sheen) at the call site. The parameters below are those tokens; a wrapper view is the planned reconciliation.

Style	Type	Default	Description
`NockerlTheme.card1`	`Color`		Base card fill (`#2C313A` dark / `#FFFFFF` light). `card2` / `card3` are the raised tiers.
`NockerlTheme.cardRadius`	`CGFloat`	`14`	Corner radius. 14pt today, but the token is 16 (see drift).
`NockerlTheme.hairline`	`Color`		Hairline border: white ~8% on dark, black ~7% on light.
`.shadow(color: .black…)`	`modifier`		The NEUTRAL drop shadow (black-tinted, never colored).
`top LinearGradient`	`overlay`		The ~1px top catch-light sheen (white → clear), the companion to the shadow.

Cross-platform drift (tracked for reconciliation)

The spec is approved; these are the real divergences between the shipped platforms, tracked in the Review queue:

Card radius: the token radius.card is 16px (unified across platforms), but Compose hardcodes NockerlCardRadius = 18dp and Swift NockerlTheme.cardRadius = 14pt. Both should consume the token; web keeps its sharper container override.
Elevation ladder: Compose ships L1 to L3 presets (NockerlElevation, no Level4); the L4 rung is the elevation.sheet token (14px) used by bottom sheets. Swift has no preset ladder; shadows are per-call. Web exposes the full L1 to L4 scale.
Interactive API (resolved): a tappable card is one declared interactive / onClick prop on the Card API on all three platforms (pressed = elevation dip + focus ring). Web already exposes interactive; natives may implement via clickable internally (Compose today) or a Button wrap (Swift), but the prop is the shared contract.
Card component: Swift has no Card view yet (composed from tokens inline). A wrapper to match Compose’s NockerlCard is the planned step.