A page-bottom region containing partner logos, regulatory disclaimers, and helper links.
Restructure — rename props, collapse partner axes, slot partner logos
The current 6-axis boolean model invites ~96 invalid combinations for only 7 real shapes. Three of those axes (
gcash x partner, with partner, grouped logos) all describe the same thing: which partner logo(s) sit next to GCash. Collapse them into one partnerLogos enum, rename the remaining props to camelCase, and expose a Slot so consumers can instance-swap any partner logo instead of shipping a new variant per brand (CIMB, Fuse, PDAX, Bayad…).In Context
The Footer sits at the bottom of lending/savings/investment flows — carrying regulatory disclosures, partner attribution, and a link to more information on the Help Center.
Live Preview
Properties
Variant
Alignment
Description
Partner Logos
DS Health
Reusable
Warn
Works only for products that match one of the seven hardcoded shapes (GLoan, GCredit, GSave, PDAX, Bayad). Any new product or partner requires a new variant rather than an instance swap.
Self-contained
Partial
Carries its own bg, typography, and spacing tokens — but disclaimer copy is baked per variant instead of accepting a text prop.
Consistent
Warn
Property names mix spaces and verbose phrasing ("gcash x partner", "with partner", "grouped logos"). Three axes describe the same concept (which partner logo).
alignment is a layout concern the consumer should own.Composable
Warn
Disclaimer + link render as drawn text rather than instances of Inline Text / Callout. Partner logos are baked raster fills, not a Slot accepting Logo instances.
Behavior
| State | iOS | Android | Figma Property | Notes |
|---|---|---|---|---|
| Default | Yes | Yes | 7 variants | The only modeled state — footer is informational. |
| Link pressed | N/A | N/A | Not modeled | "GLoan/GCredit/GSave on Help Center" should be a Text Button / Link instance with its own pressed state. |
| Link disabled | N/A | N/A | Not modeled | Informational link — rarely disabled in practice. |
Open Issues
- Variant names carry the full property matrix. Every variant is literally named
description=…, label=…, gcash x partner=…, alignment=…, with partner=…, grouped logos=…. Cumbersome to read and includes spaces inside values. C1 · Layer Structure & Naming - Property names contain spaces and jargon.
gcash x partner,with partner,grouped logosare invalid identifiers for code generation and Code Connect, and three of them all describe "which partner logo is shown". C2 · Variant & Property Naming - Sparse 6-axis cartesian. 2 × 2 × 2 × 2 × 2 × 3 (counting
descriptionas 3-value) ≈ 96 theoretical combos, only 7 built. Boolean model promises invalid combinations. C2 · Variant & Property Naming - Alignment is a layout concern, not a component prop. The consumer's parent frame should control centering — not a footer variant. Forces two full variant trees for the same content. C4 · Native Mappability
- Disclaimer copy is baked into each variant. "Fuse Lending, Inc. SEC Reg. No. CS201617622…" and "I acknowledge receipt of this statement…" live inside the component. Any copy change requires reshipping the variant. Should be a
disclaimer: Stringprop. C4 · Native Mappability - Help-center link is drawn, not an instance. "GLoan on Help Center" / "GCredit on Help Center" / "Find GSave in the Help Center" are styled text spans, not Text Button instances. No pressed state, no underline affordance, no tap target. C5 · Interaction State Coverage
- Partner logos are baked raster. CIMB, Fuse, PDAX, and Bayad ship as
<img>tags with remote asset URLs. No vector source, no slot for consumers to instance-swap. Adding a new partner requires a new variant. C6 · Asset & Icon Quality - No Code Connect mapping. Cannot map until property names normalize and drawn text becomes slots. C7 · Code Connect Linkability
Design Recommendations
- Collapse three partner axes into one enum. Replace
gcash x partner+with partner+grouped logoswith a singlepartnerLogos: .none | .single | .grouped | .gcashX. Removes ~40 invalid combos and makes the design space legible. Property - Rename all property names to camelCase.
gcash x partner→partnerLogos,with partner→ absorbed intopartnerLogos,grouped logos→ absorbed,label→poweredByLabel. No spaces, no ambiguity. Rename - Expose partner logos as a Slot. Instead of shipping a variant per brand (CIMB, Fuse, PDAX, Bayad), adopt a Figma Slot that accepts any Logo instance. New partner = new instance, not new variant. Slot
- Move
alignmentto the consumer. Parent screen/frame owns centering. Removes one full axis and halves the variant count. Property - Expose disclaimer + help link as slots, not baked copy. Disclaimer becomes an instance of Inline Text or Callout. "…on Help Center" becomes a Text Button instance. Both inherit their component's state + accessibility. Composition
- Provide vector source for partner logos. Swap raster fills for vector Logo instances in a dedicated Partner Logos set. Fixes C6 and unlocks the Slot recommendation above. Asset
- Consider whether Footer is a component at all. Once alignment moves to the consumer and disclaimer/link/logos become slot-filled instances, Footer is essentially a layout primitive (VStack with padding + white bg). It may be cheaper to document the recipe than ship a 7-variant component. Composition
- Family context. Footer lives with Header siblings in the Figma Pages panel. Keep them grouped in the sidebar but treat restructure independently. Family
Types
Default
DES DEV
Page-bottom region. Flip the Variant control to walk through every shipped layout (1–7), then override Alignment / Description / Partner Logos to compose your own.
Properties
Variant
Alignment
Description
Partner Logos
Properties
Variant 1
Alignment left
Description none
Partner logos powered-by
Colors
Surface #FFFFFF
Label #90A8D0
Description #6780A9
Link #005CE5
Layout
Width 360
Padding 24 all sides
Row gap (V1/V6) 16
Logo→logo gap 16
Logo size 18 tall (asset)
Typography
Label (Powered by) Proxima Soft Bold · 12 / 12 · +0.5 · #90A8D0
Disclaimer BarkAda Semibold · 12 / 18 · #6780A9
Link BarkAda Semibold · 12 / 18 · #005CE5
EBFooter("Powered by Fuse")
.ebDisclaimer("Regulatory disclaimer copy")
.ebHelpLink("Help center", destination: url) Variant 1 — Colors
Footer chrome palette: white surface with muted helper labels and an accent link.
| Role | Token | Default |
|---|---|---|
| Surface | footer/color/bg | #FFFFFF |
| Label | footer/color/label | #90A8D0 |
| Description | footer/color/description | #6780A9 |
| Link | footer/color/label-link | #005CE5 |
Property Mapping
| Figma Property | SwiftUI | Compose |
|---|---|---|
label: yes | no | poweredByLabel?: String | poweredByLabel: String? |
gcash x partner + with partner + grouped logos | partnerLogos?: .none | .single | .grouped | .gcashX | partnerLogos: EBPartnerLogos? |
| (baked in each variant) | partnerLogo slot | partnerLogo: Image? |
description: none | default | with link | disclaimer?: String | disclaimer: String? |
| (baked in each variant) | helpLink?: { label, action } | helpLink: EBHelpLink? |
alignment: left | center | (removed — consumer owns layout) | (n/a) |
Accessibility
| Requirement | iOS | Android |
|---|---|---|
| Logo alt text | Each partner logo must carry .accessibilityLabel("GCash") / .accessibilityLabel("CIMB"). | Each logo Image must supply contentDescription. |
| Help link role | Expose as Button with accessibility hint "Opens help center". | Wrap in Modifier.clickable with Role.Button semantics. |
| Minimum touch target | Help-link hit area ≥44×44pt. | Help-link hit area ≥48×48dp. |
| Reading order | Label → logos → disclaimer → help link. VoiceOver follows DOM order. | Same order — TalkBack follows composition order. |
| Disclaimer readability | Ensure Dynamic Type scales disclaimer text; do not clip at large sizes. | Support fontScale; wrap rather than truncate. |
Criteria Scorecard
| ID | Criterion | Status | Notes |
|---|---|---|---|
| C1 | Layer Structure & Naming | Requires Rework | Variant names spell out all 6 axes verbatim; layer names default-hug groups like "Logos - Footer Group" repeat across variants. |
| C2 | Variant & Property Naming | Requires Rework | Property names contain spaces (gcash x partner, grouped logos, with partner). Three axes describe the same thing. |
| C3 | Token Coverage | Ready | Spacing, bg, label, description, and link-label are all bound to main/footer/color/* and space/space-* tokens. Typography pulls Primary/Label/Fine, Secondary/Bold/Caption, and Secondary/Bold/Small Caption. |
| C4 | Native Mappability | Requires Rework | Disclaimer copy + help link live inside variants — not props. Alignment is a consumer concern. Partner logos are baked assets, not a slot. |
| C5 | Interaction State Coverage | Requires Rework | Help-center link is styled text, not a Text Button instance — no pressed/focused/disabled states. |
| C6 | Asset & Icon Quality | Requires Rework | CIMB, Fuse, PDAX, Bayad logos ship as raster <img> fills. Need vector source + a Partner Logos set. |
| C7 | Code Connect Linkability | Not Mapped | Cannot map until property names normalize, drawn text becomes slots, and partner logos resolve via a Slot. |
Variants Inventory (7 total)
Six boolean-ish axes combine to ~96 theoretical shapes — only 7 built. Each shipped variant solves a specific product flow (GLoan, GCredit, GSave, PDAX, Bayad).
| # | Node | description | label | gcash x partner | alignment | with partner | grouped logos | Use case |
|---|---|---|---|---|---|---|---|---|
| 1 | 21:215191 | none | no | no | left | yes | no | GLoan — Powered-by Fuse + disclaimer + link |
| 2 | 21:215193 | default | no | yes | left | no | no | Credit acknowledgement + GCash × CIMB |
| 3 | 21:215195 | with link | no | no | center | no | no | GSave — centered help-link only |
| 4 | 21:215197 | none | no | yes | center | no | no | GCash × CIMB logos, centered, no text |
| 5 | 21:215199 | with link | no | yes | left | no | no | GCredit — link + GCash × CIMB |
| 6 | 21:215201 | with link | no | no | left | yes | no | Powered-by Bayad row + link |
| 7 | 21:215203 | none | yes | no | center | no | yes | "In partnership with" · GCash + PDAX grouped |
1.0.0 — April 2026Major
Initial Assessment · node 21:215190
Verdict: Restructure — Rename 6 axes to camelCase, collapse three partner booleans into one
ArchitecturepartnerLogos enum, expose partner-logo Slot, remove alignment axis (consumer owns layout). OpenDisclaimer + help link should be slots, not baked copy — Disclaimer becomes
C4 · C5disclaimer: String (or Inline Text instance). Help link becomes a Text Button instance with its own state coverage. OpenPartner logos are raster — Provide vector source in a Partner Logos set; swap raster fills for Logo instances. Open
C6C7 — Code Connect — Blocked until property names normalize and content slots are introduced. Open
C7