Brand App Bar — GCash DS Assessment

KeepNeeds Refinement

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

Properties

Surface

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

Confirmed as a standalone component, renamed Brand App Bar. v2.0: Rebuilt on node 4566:17590 in 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|light replaced by Surface. v2.0: The axis now reads Surface = Brand | Default, describing the surface the bar sits on rather than the asset sitting on it — #005CE5 with 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 Logo instance 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-container renamed. 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

Brand

Properties

Surface Brand

Colors

Background #005CE5

Logo wordmark and G #FFFFFF

Logo ring #002CB8

Logo arcs #6FBAF7

Typography

Layout

Height 90

Width 360

Radius 0

Padding H —

Padding V —

Gap —

Border 0

Alignment —

EBBrandAppBar()
    .ebSurface(.brand)

Colors by Surface

Role	Element	Token	Value
Brand	Background	—	#005CE5
Brand	Logo wordmark and G	—	#FFFFFF
Brand	Logo ring	—	#002CB8
Brand	Logo arcs	—	#6FBAF7
Default	Background	—	#FFFFFF
Default	Logo wordmark and G	—	#002CB8
Default	Logo ring	—	#007CFF
Default	Logo arcs	—	#6FBAF7

Default

Properties

Surface Default

Colors

Background #FFFFFF

Logo wordmark and G #002CB8

Logo ring #007CFF

Logo arcs #6FBAF7

Typography

Layout

Height 90

Width 360

Radius 0

Padding H —

Padding V —

Gap —

Border 0

Alignment —

EBBrandAppBar()
    .ebSurface(.default)

Installation Planned API

iOS — Swift Package Manager

.package(url: "https://github.com/AY-Org/eb-ds-ios", from: "1.0.0")

Android — Gradle (Kotlin DSL)

implementation("com.eastblue.ds:header:1.0.0")

Import

import EastBlueDS
import com.eastblue.ds.header.*

Property Mapping

Surface is the set’s only property. The GCash Logo is a nested instance, not a slot — the bar owns the background and the logo’s position; the logo owns its three colours.

Figma Property	SwiftUI	Compose
Surface — Brand, Default	`.ebSurface(.brand / .default)`	`surface = EBAppBarSurface.Brand / Default`
GCash Logo (nested instance)	Drawn by `EBBrandAppBar` — no parameter	Drawn by `EBBrandAppBar` — no parameter

Usage Snippets Planned API

Brand

EBBrandAppBar()
    .ebSurface(.brand)

EBBrandAppBar(
    surface = EBAppBarSurface.Brand
)

Default

EBBrandAppBar()
    .ebSurface(.default)

EBBrandAppBar(
    surface = EBAppBarSurface.Default
)

Requirement	iOS	Android
Logo label	`.accessibilityLabel("GCash")` on the logo image; `.accessibilityAddTraits(.isHeader)` on the bar.	`contentDescription = "GCash"` on the logo; `Modifier.semantics { heading() }` on the bar.
Not a button	No tap target — the bar carries no action, so no button trait.	No `clickable` modifier; the bar is decoration plus a heading.
Contrast	Brand: white wordmark on #005CE5 (4.6:1). Default: #002CB8 on white (11.9:1).	Same values — the surface colours are fixed, not themed.
Status bar	Brand surface needs `.preferredColorScheme(.dark)` for the status bar; Default keeps light content.	Set `isAppearanceLightStatusBars` to false on Brand, true on Default.

Usage Guidelines

Do

Use Brand on the home and launch screens where the app identity leads.

Don't

Don’t use Brand on screens that already have a blue hero — two blues stack.

Do

Use Default on white content screens that need the wordmark but no actions.

Don't

Don’t add actions or a back button — that is Title Bar - App.

Do

Keep the 90 px height; the logo sits 24 px from the top by design.

Don't

Don’t centre the logo vertically or resize it — 110 × 26 is the logo instance size.

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Ready	`LogoContainer` › `GCash Logo` on both variants — read on 4566:17591 and 4566:17726.
C2	Variant & Property Naming	Ready	`Surface` — Brand, Default; Title Case values.
C3	Token Coverage	Ready	No text layers. Colour variable bindings are not readable with the plugin — confirm the surface and logo fills in Dev Mode.
C4	Native Mappability	Ready	One enum, no slots — `EBBrandAppBar` with a single `surface` parameter.
C5	Interaction State Coverage	Not Applicable	Static bar with no tap target; no states to build.
C6	Asset & Icon Quality	Ready	The wordmark is one swappable `GCash Logo` vector instance; three fills, two of which swap by surface.

Variants Inventory (2 total)

1 Surface × 2 values = 2 variants

Surface	Node	Dimensions
Brand	`4566:17591`	360 × 90
Default	`4566:17726`	360 × 90

1.0.2 — September 2026Patch

Style and Code tabs re-read · node 4566:17590

Style tab rebuilt from the two live variants. One card per Surface value — Brand, Default — drawn from the GCash Logo paths read with get_svg; background and logo fills read off 4566:17591 and 4566:17726. Padding, gap, alignment and colour tokens are not readable with the plugin and stay —.

Docs

Code tab regrouped on the Surface schema. Property Mapping and Usage Snippets follow the DEV code, Guidelines added, Scorecard regraded from the logo=dark|light era, Variants Inventory moved to the two live nodes.

Docs

1.0.1 — September 2026Patch

Documentation backfill · node 4566:17590

Resolved issues recorded. 7 resolved issues on the Overview tab had no changelog row: Confirmed as a standalone component, renamed Brand App Bar; \"Header\" prefix released; logo=dark|light replaced by Surface; Logo is a single swappable instance; Fractional height corrected; logo-container renamed; Control-free by design — Title Bar - App covers screens needing actions.

Docs

1.0.0 — April 2026Major

Initial Assessment · node 18430:2875

Verdict: Consolidate — Merge into Title Bar as a leading = logo slot. Retire this file. Open

Architecture

If kept separate — Rename to Brand App Bar. Rename logo=dark|light to theme=dark|light. Open

Naming

C7 — Code Connect — Blocked on merge decision. Open