Components · App chrome
Header
The product top bar — brand or page title on the left, actions and the theme switcher on the right. A 56px sticky bar on the header surface with a hairline underline. This very page sits below the real one; the preview below is a static instance.
Preview
The header bar across the three themes.
Light
Dark
Accessibility
Spec
Values and token references straight from the Zetta spec.
header
- backgroundColor
- {colors.surface-header}
- borderBottomColor
- {colors.hairline}
- borderBottomWidth
- 1px
- height
- 56px
- paddingX
- {spacing.page}
- display
- flex
- alignItems
- center
- justifyContent
- space-between
- position
- sticky
- top
- 0
- zIndex
- 100
header-title
- textColor
- {colors.ink}
- fontFamily
- Inter
- fontSize
- 18px
- fontWeight
- 600
- lineHeight
- 1.35
- letterSpacing
- -0.01em
header-actions
- display
- flex
- alignItems
- center
- gap
- {spacing.sm}
header-theme-button
- iconSize
- {icons.sizeMap.sm}
- iconColor
- {colors.muted}
header-theme-button-hover
- iconColor
- {colors.ink}
- backgroundColor
- {colors.surface-muted}
header-theme-button-active
- backgroundColor
- {colors.surface-pressed}
header-theme-button-focus
- outline
- 2px solid {colors.border-focus}
- outlineOffset
- 2px
Build with the skill
No package to install — hand this to your AI to generate the app header in your stack.
Implement the Zetta "Header" component in this project's stack using the zetta-design-md skill.
- Apply the `header` spec from the skill (variants: header, header-title, theme-button).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.Anatomy & rules
- 56px tall, header surface, 1px hairline bottom border, page padding; sticky to the top at
z-index: 100. Title is Inter 18/600 with a tight-0.01emtracking. - Action buttons are 32px ghost icon buttons (muted, ink on hover). Keep the right cluster short — search, theme, and account is plenty.
Accessibility
- Wrap it in a
<header>with the primary<nav>; give every icon-only action anaria-label. The theme switcher must be reachable and operable by keyboard.