A header variant with the title centered, optional leading and trailing actions on either side.
Restructure — rename and re-label the surface property
Rename to Page Banner — "Header" conflates with three structurally different components. Replace
type = dark | light with surface = brand | default — the current name describes appearance, not semantic intent. See the Header family restructure for the full plan.In Context
Page Banner sits at the top of a screen, modal, or feature card — centered, taking full width, setting the title of the surface below it.
Live Preview
Label
Label: Add Content
Properties
type
description
DS Health
Reusable
Pass
Generic page banner, reusable anywhere a centered title is needed.
Self-contained
Pass
Owns its typography, color tokens, and surface fill.
Consistent
Warn
Shares "Header" prefix with 3 structurally different components.
type=dark|light names appearance rather than semantic tone.Composable
Pass
Drops into any screen, modal, or card as a page title.
Behavior
| State | iOS | Android | Figma Property | Notes |
|---|---|---|---|---|
| Default (brand) | Yes | Yes | type=dark | White text on brand-blue surface. |
| Default (default) | Yes | Yes | type=light | Dark text on default surface. |
| Pressed | N/A | N/A | — | Banner is informational — no pressed state. |
| Disabled | N/A | N/A | — | Not interactive. |
Open Issues
- Rename to Page Banner. "Header" prefix shared with 3 structurally different components. C1 · Layer Structure & Naming
- Rename
type=dark|lighttosurface=brand|default. Current name describes appearance; convention is to name by semantic surface role. C2 · Variant & Property Naming - No Code Connect mapping. C7 · Code Connect Linkability
Design Recommendations
- Rename to Page Banner. Frees the "Header" namespace and signals semantic role clearly. Rename
- Use
surface = brand | defaultinstead oftype = dark | light. Matches how other DS components (Button appearance, Badge tone) describe surface variants. Property - Optional: expose
alignmentprop (center | leading) for teams that want a left-aligned variant without creating a new component. Property - See siblings: Header, Header - With Logo, Header - Transaction. Family
Styles
Dark / brand surface
DES DEV
White title on brand-blue surface. The "hero" variant — used for primary feature banners.
Label
Label: Add Content
Properties
type
description
Properties
type dark
description yes
Colors
Brand bg #1972F9
Brand title #FFFFFF
Brand preamble #FFFFFF
Brand label #F6F9FDB8 (72% alpha)
Brand border #F6F9FD3D (24% alpha)
Layout
Width Fill
Height 104 (hug)
Padding space/space-24 space/space-16
Gap space/space-4
Typography
Title Heading/L · Proxima Soft Bold 22
Description Body/S · BarkAda Semibold 14
Alignment center
Dark — Colors
Brand-blue centered header used at the top of branded screens.
| Role | Token | Default |
|---|---|---|
| Surface bg | main/header-centered/dark/bg | #1972F9 |
| Border | main/header-centered/dark/border | #F6F9FD @ 24% |
| Heading | main/header-centered/dark/heading | #FFFFFF |
| Description | main/header-centered/dark/description | #FFFFFF @ 80% |
Light / default surface
DES DEV
Dark title on default surface. Used for modal sheet titles and subdued banners.
Label
Label: Add Content
Properties
type
description
Properties
type light
description yes
Colors
Surface bg #FFFFFF
Title color #0A2757
Icon color #0A2757
Layout
Height 56
Padding (h) 16
Icon size 24 × 24
Title gap 8
Typography
Style Heading/Small · Bold
Font Proxima Soft
Size 18
Line-height 24
Light — Colors
White centered header used on neutral surfaces.
| Role | Token | Default |
|---|---|---|
| Surface bg | main/header-centered/light/bg | #FFFFFF |
| Border | main/header-centered/light/border | #E5EBF4 |
| Heading | text/primary/headline/section | #0A2757 |
| Description | text/primary/body/secondary | #6780A9 |
Property Mapping
| Figma Property | SwiftUI | Compose |
|---|---|---|
| (implicit) | title: String | title: String |
description: boolean | description?: String | description: String? |
type: dark | light | surface: brand | default | .ebSurface(.brand) modifier |
Accessibility
| Requirement | iOS | Android |
|---|---|---|
| Heading trait | .accessibilityAddTraits(.isHeader) on the title. | Modifier.semantics { heading() } on the title. |
| Contrast | Brand surface: white on #005CE5 = 8.5:1 ✓. Default surface: #0A2757 on #FFFFFF = 15.4:1 ✓. | Same contrast ratios apply. |
| Screen reader order | Title → Description. VoiceOver reads in DOM order. | Same — TalkBack follows composition order. |
Criteria Scorecard
| ID | Criterion | Status | Notes |
|---|---|---|---|
| C1 | Layer Structure & Naming | Requires Rework | Rename to Page Banner. |
| C2 | Variant & Property Naming | Requires Rework | Rename type=dark|light → surface=brand|default. |
| C3 | Token Coverage | Ready | Surface and text tokens bound. |
| C4 | Native Mappability | Ready | Maps cleanly to a EBPageBanner view/composable. |
| C5 | Interaction State Coverage | Not Applicable | Static — no interactive states. |
| C6 | Asset & Icon Quality | Not Applicable | No assets. |
| C7 | Code Connect Linkability | Not Mapped | Trivial once renamed. |
Variants Inventory (4 total)
type × description = 4 variants.
| # | Node | type | description | Dimensions |
|---|---|---|---|---|
| 1 | 18430:2859 | dark | yes | 360 × 104 |
| 2 | 18430:2865 | light | yes | 360 × 104 |
| 3 | 18430:2871 | dark | no | 360 × 84 |
| 4 | 18430:2873 | light | no | 360 × 84 |
1.0.0 — April 2026Major
Initial Assessment · node 18430:2858
Verdict: Restructure — Rename to Page Banner. Swap
Namingtype=dark|light for surface=brand|default. OpenC7 — Code Connect — Trivial mapping once renamed. Open
C7