A wordmark-only app bar in brand and default surfaces, used where a screen needs identity rather than navigation.
Keep — confirmed standalone
Rebuilt on node
4566:17590 in the 2026 Working File and renamed Brand App Bar, which settles the original either/or in favour of keeping it separate from Title Bar. Surface = Brand | Default replaces the old logo=dark|light axis, the wordmark is a single swappable instance rather than two baked assets, and both variants are a clean 90px. All four DS Health traits pass; the only item still open is Code Connect, blocked until the native library exists.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
Pass
Drops onto any screen that needs brand identity rather than navigation — onboarding, splash, marketing surfaces. Two surfaces cover the light and dark contexts it appears on.
Self-contained
Pass
Owns its surface fill and the logo instance. Nothing external required to render.
Consistent
Pass
Surface = Brand | Default is PascalCase per §1 with Title Case values, and LogoContainer matches the naming convention the rest of the system uses. Dimensions are whole pixels.Composable
Pass
Composes the shared
GCash Logo instance so a wordmark change propagates from one source, and sits as the top element on any screen. Its lack of action slots is deliberate — screens needing controls use Title Bar - App.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. |
Issues
- Code Connect mappings not registered. Blocked — no native library exists yet. The schema is trivial once one does: a single
Surfaceenum over a logo instance. C7 · Code Connect Linkability
- Confirmed as a standalone component, renamed Brand App Bar. v2.0: Rebuilt on node
4566:17590in the 2026 Working File. The original assessment framed this as either/or — merge into Title Bar, or keep it separate and rename to Brand App Bar. The rename has shipped, which settles it: this stays its own component. A brand bar showing only the wordmark has a different job from a title bar carrying navigation, and folding it in would have meant a Title Bar variant that hides every control it exists to provide. (Family) C4 · Native Mappability - "Header" prefix released. v2.0: The name no longer collides with the three structurally different components that shared the prefix. Section Header keeps the generic name; this one says what it is. (C1 · Rename) C1 · Layer Structure & Naming
-
logo=dark|lightreplaced bySurface. v2.0: The axis now readsSurface = Brand | Default, describing the surface the bar sits on rather than the asset sitting on it —#005CE5with the light wordmark, or white with the blue one. That is the better of the two options the original assessment offered, since the logo treatment follows from the surface rather than being set independently of it. (C2 · Rename) C2 · Variant & Property Naming - Logo is a single swappable instance. v2.0: Both variants carry a
GCash Logoinstance that changes appearance with the surface, rather than baking a dark and a light asset into the component. A wordmark update propagates from one source. (C6 · Composition) C6 · Asset & Icon Quality - Fractional height corrected. v2.1: Both variants went 89.7466 →
90. The stray sub-pixel value came from the logo instance driving the frame height; it now maps cleanly to a native layout value. (C4) C4 · Native Mappability -
logo-containerrenamed. v2.1: →LogoContainer, matching the PascalCase convention the rest of the system settled on. It is also now the surface wrapper rather than just a logo holder, which the name reflects. (C1) C1 · Layer Structure & Naming - Control-free by design — Title Bar - App covers screens needing actions. Confirmed intentional. The bar carries only a wordmark: no back control, no avatar, no trailing action. That is the point of a brand bar — an uncluttered mark, not a navigation surface. Any screen that needs a control reaches for Title Bar - App instead, which exists precisely to carry them. Recorded here so the absence of slots reads as a decision rather than an unfinished component, and so a designer who needs a control switches components rather than detaching this one. (C4 · Docs) C4 · Native Mappability
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