Page Banner — GCash DS Assessment

KeepNeeds Refinement

A header variant with the title centered, optional leading and trailing actions on either side.

Keep — all findings resolved

Rebuilt on node 4368:12839 in the 2026 Working File as Page Banner, with Surface = Brand | Default replacing the old type = dark | light. Layer naming is now settled across both variants — Content wrapping Title and a SubtitleRow of Label and Value — which lets the title expose as a single text property and clears the legacy # prefix. The brand surface color and its alpha values are confirmed intentional, the remaining alignment difference is inert because the text node hugs its content, and an Alignment axis was decided against. All four DS Health traits pass; the only item still open is Code Connect, blocked until the native library exists.

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 — works at the top of any screen, modal or feature card. Nothing ties it to one surface.

Self-contained

Pass

Owns its typography, fills and border. Nothing external required to render.

Consistent

Pass

The Header prefix, the appearance-named property and the layer naming are all resolved. Surface = Brand | Default is PascalCase per §1 with Title Case values per §5, and the text layers map onto the §3 vocabulary as Title · Label · Value, identically in both variants.

Composable

Pass

Drops into any screen, modal or card as a page title, and composes nothing it should not.

Behavior

State	iOS	Android	Figma Property	Notes
Default (Brand)	Yes	Yes	Surface=Brand	White title on the brand surface.
Default (Default)	Yes	Yes	Surface=Default	Dark title on the default white surface.
Pressed	N/A	N/A	—	Banner is informational — no pressed state.
Disabled	N/A	N/A	—	Not interactive.

Issues

Code Connect mappings not registered. Blocked — no native library exists yet. The schema is small once one does: a single Surface enum over a title and a sub-row. C7 · Code Connect Linkability

Renamed to Page Banner. v2.0: Rebuilt on node 4368:12839 in the 2026 Working File. The name no longer sits in the Header namespace that four structurally different components were sharing, and it says what the component is — a full-width banner setting the title of the surface below it, not a navigation bar. (C1 · Rename) C1 · Layer Structure & Naming
type = dark | light replaced by Surface. v2.0: The axis now reads Surface = Brand | Default, naming the surface role rather than the appearance that follows from it — the same shape Brand App Bar landed on, so the two read consistently across the family. PascalCase property per §1, Title Case values per §5. (C2 · Rename) C2 · Variant & Property Naming
Layer names settled across both variants. v2.1: Verified on the live node. header → Content; the 22px title, previously #name in Brand and #label in Default, is now Title in both; text-container → SubtitleRow, holding Label and Value. Three problems closed at once: the cross-variant mismatch that stopped the title exposing as a single text property, the duplicate #label inside the Default variant, and the legacy # prefix. Names now follow the §3 vocabulary. (C1 · Rename) C1 · Layer Structure & Naming
Brand surface color and its alpha values confirmed intentional. v2.1: The brand fill #1972F9 differs from Brand App Bar’s #005CE5, and the brand sub-row key and border are #F6F9FD at 72% and 24%. Confirmed by the owner as bound to generic tokens and deliberate rather than local overrides — the two surfaces serve different jobs, and a banner sitting above content is not required to match the app bar’s blue. Attested rather than verified: variable bindings and opacity tokens are not readable through the review tooling, so this is recorded on the owner’s confirmation. (C3 · Token) C3 · Token Coverage
Sub-row alignment difference is inert. v2.1: The sub-row key still reads LEFT on Brand and CENTER on Default, but the text node hugs its content — 36px wide for “Label:” inside a 119px row — so horizontal alignment inside it has nothing to distribute and produces no visual difference on either surface. A leftover value rather than a behavioural one, and nothing a native implementation has to reproduce. (C4) C4 · Native Mappability
No Alignment property. v2.1: Decided against. A centered banner is what the component is for; a left-aligned title is a different component’s job, and adding the axis would double the set to serve a case nobody has asked for. Closed rather than carried forward a third time. (Property) C2 · Variant & Property Naming
Sub-row composition confirmed as intended. v2.1: The SubtitleRow is present in both live variants; the owner confirms the current composition is the intended one, closing the question left over from the old description = yes | no control. Attested rather than verified — component property definitions are not readable through the review tooling. (Docs) C2 · Variant & Property Naming
Place in the header family settled. v2.1: Page Banner is confirmed a distinct component, not a variant of another. It sets the title of the surface below it; Section Header labels a section inside a scroll, Brand App Bar carries the wordmark, and Title Bar - App carries navigation. Four different jobs, four components, none folding into another. Siblings: Section Header · Brand App Bar · Detail Hero. (Family) C4 · Native Mappability

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

EBCenteredHeader("Page title")
    .ebStyle(.brand)
    .ebDescription("Description body copy")

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

EBHeader(
    title: "Account",
    appearance: .light,
    centered: true
)

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

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 type=dark|light for surface=brand|default. Open

Naming

C7 — Code Connect — Trivial mapping once renamed. Open