A header variant featuring the GCash wordmark instead of a title; trailing actions optional.
Consolidate — merge into Title Bar
This component solves the same problem as Title Bar (
23:175148) but swaps the title text for a logo. Rather than maintain two app-bar components, add a leading = title | logo slot to Title Bar and retire this file. One app bar primitive, two behaviours. See Header family restructure for the full plan.In Context
Brand app bar appears on splash, login, onboarding, and home screens — anywhere the brand identity should lead before page-specific navigation takes over.
Live Preview
GCash
Properties
logo
DS Health
Reusable
Partial
Serves a narrow role that overlaps entirely with Title Bar. Two components for "top app bar" is one too many.
Self-contained
Pass
Owns its surface, logo asset, and layout.
Consistent
Warn
Duplicates Title Bar's scope. "Header" prefix conflates with 3 structurally different components.
Composable
Warn
No leading/trailing action slots (back button, profile avatar, etc.) — only a logo. If the screen needs navigation, consumers must switch to Title Bar, losing the logo.
Behavior
| State | iOS | Android | Figma Property | Notes |
|---|---|---|---|---|
| Dark logo | Yes | Yes | logo=dark | Dark GCash mark on lighter brand surface. |
| Light logo | Yes | Yes | logo=light | Light GCash mark on brand surface. |
| Pressed | N/A | N/A | — | Not interactive. |
Open Issues
- Consolidate into Title Bar. Duplicates app-bar scope. Add
leading = title | logoslot to Title Bar and retire this file. C4 · Native Mappability - "Header" prefix conflates with 3 structurally different components. If kept as a separate component, rename to Brand App Bar. C1 · Layer Structure & Naming
-
logo=dark|lightnames the asset, not the surface. Should betheme = dark | lightor tied to the surrounding surface token. C2 · Variant & Property Naming - No Code Connect mapping. C7 · Code Connect Linkability
Design Recommendations
- Merge into Title Bar. Add a
leadingslot to Title Bar that accepts either a title string or a logo instance. One app bar component, two behaviours. Eliminates "which component do I use?" friction. Family - If kept separate, rename to Brand App Bar. Frees the "Header" namespace and signals the narrow branded-surface role. Rename
- Use a single Logo component as the visual — don't bake dark/light as a Header-level property. The Logo component should own its theme variants and be instance-swapped inside the app bar. Composition
- See siblings: Header, Header - Centered, Header - Transaction, Title Bar (merge target). Family
Styles
Dark logo variant
DES DEV
Dark GCash mark on brand surface. Used where extra contrast is needed or on lighter brand tints.
GCash
Properties
logo
Properties
logo dark
Colors
Surface #FFFFFF
Title #0A2757
Description #6780A9
Border #E5EBF4
Layout
Width Fill
Height 88 (hug)
Logo size ~120 × 32
Alignment center
Typography
N/A Logo is SVG/vector, not text
Dark Logo — Colors
GCash logo placed inside a dark logo container — used on light surfaces.
| Role | Token | Default |
|---|---|---|
| Surface bg | main/header-with-logo/light/bg | #FFFFFF |
| Logo container | main/header-with-logo/dark/logo-bg | #0A2757 |
| Logo mark | main/header-with-logo/dark/logo-mark | #FFFFFF |
Light logo variant
DES DEV
Light GCash mark on brand surface. The default variant for most branded screens.
GCash
Properties
logo
Properties
logo light
Colors
Surface bg #FFFFFF
Logo color #005CE5
Icon color #0A2757
Layout
Height 56
Padding (h) 16
Logo size 88 × 24
Icon size 24 × 24
Typography
N/A Logo only — no text
Light Logo — Colors
GCash logo placed inside a light logo container — used on brand-blue surfaces.
| Role | Token | Default |
|---|---|---|
| Surface bg | main/header-with-logo/dark/bg | #1972F9 |
| Logo container | main/header-with-logo/light/logo-bg | #FFFFFF |
| Logo mark | main/header-with-logo/light/logo-mark | #1972F9 |
Property Mapping
| Figma Property | SwiftUI | Compose |
|---|---|---|
| (standalone component) | Title Bar / leading = logo | EBTitleBar { EBLogo() } |
logo: dark | light | EBLogo.theme: dark | light | EBLogo(theme: .light) |
Accessibility
| Requirement | iOS | Android |
|---|---|---|
| Logo a11y label | Logo carries .accessibilityLabel("GCash") — identify as brand, not decorative. | Logo carries contentDescription = "GCash". |
| Not a button | The logo is not tappable by default; no button trait. | No clickable modifier unless a screen wires one up. |
| Heading role | App bar owns heading trait on its overall container. | Same — semantics { heading() } on the bar. |
Criteria Scorecard
| ID | Criterion | Status | Notes |
|---|---|---|---|
| C1 | Layer Structure & Naming | Requires Rework | "Header" prefix conflates with 3 other components. If kept, rename to Brand App Bar. |
| C2 | Variant & Property Naming | Needs Refinement | logo=dark|light names the asset, not the surface. Prefer theme. |
| C3 | Token Coverage | Ready | Surface bound to brand token. |
| C4 | Native Mappability | Requires Rework | Duplicates Title Bar scope. Merge rather than create a second app bar primitive. |
| C5 | Interaction State Coverage | Not Applicable | Static bar. |
| C6 | Asset & Icon Quality | Ready | Logo is a vector instance. |
| C7 | Code Connect Linkability | Not Mapped | Blocked on merge-vs-rename decision. |
Variants Inventory (2 total)
| # | Node | logo | Dimensions |
|---|---|---|---|
| 1 | 18430:2876 | dark | 360 × 88 |
| 2 | 18430:2887 | light | 360 × 88 |
1.0.0 — April 2026Major
Initial Assessment · node 18430:2875
Verdict: Consolidate — Merge into Title Bar as a
Architectureleading = logo slot. Retire this file. OpenIf kept separate — Rename to Brand App Bar. Rename
Naminglogo=dark|light to theme=dark|light. OpenC7 — Code Connect — Blocked on merge decision. Open
C7