East Blue v0.1.0
Component Assessment
Overview
Components
Accordion
Action List
Action List - with Counter
Action List - with Description
Ad
Ad Space
Alert
DM LM
Avatar
Avatar Group
Label Label
Badge
Banner
Bottom Sheet
Button
Callout
Generic Card
Generic Transaction Card
Carousel - Discount Card
Carousel - Item
Carousel Card
Chat Field
Checkbox
Chip
Countdown
Counter
Date Picker
Date Picker - Group
Date Picker - Item
Month and Year Picker - Item
Dropdown
Dropdown Item
Dropdown Item Group
Empty State
Amount Text Field
Input Field
Labeled Field
Recipient Field
Search Field
Select Field
Text Area
Upload File
View Only Field
Footer
Header
Header - Centered
Header - Transaction
Header - With Logo
Inline Message
Inline Text
List
List Item
List Item Asset
Menu Grid
Modal
Overlay
Progress Bar
Radio Button
Radio Button with Label
Service Item
Slider
Stepper - Bullet
Stepper - Circular
Stepper - Dash
Subtext Message
Table
Table - Scheduling
Table - Transaction
Tab Item
Tabs
Title Header
Title Bar
Toast
Toast - With Button
Segmented Control - Group
Toggle
Toggle - Segmented Control
Toggle - With Label
Onboarding - Tooltip
Tooltip Blurred and Transparent
Tooltip V2
Visual Popup
35%
Horizontal Voucher
Terms & Conditions Accordion
35%
Vertical Voucher
35%
Voucher Asset
Voucher Card Horizontal
Voucher Details
Icons Styles
RestructureRequires Rework
Footer Component link

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 logos are 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 description as 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: String prop. 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 logos with a single partnerLogos: .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 into partnerLogos, 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 alignment to 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 PropertySwiftUICompose
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
RequirementiOSAndroid
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).

#Nodedescriptionlabelgcash x partneralignmentwith partnergrouped logosUse case
121:215191nonenonoleftyesnoGLoan — Powered-by Fuse + disclaimer + link
221:215193defaultnoyesleftnonoCredit acknowledgement + GCash × CIMB
321:215195with linknonocenternonoGSave — centered help-link only
421:215197nonenoyescenternonoGCash × CIMB logos, centered, no text
521:215199with linknoyesleftnonoGCredit — link + GCash × CIMB
621:215201with linknonoleftyesnoPowered-by Bayad row + link
721:215203noneyesnocenternoyes"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 partnerLogos enum, expose partner-logo Slot, remove alignment axis (consumer owns layout). Open
Architecture
Disclaimer + help link should be slots, not baked copy — Disclaimer becomes disclaimer: String (or Inline Text instance). Help link becomes a Text Button instance with its own state coverage. Open
C4 · C5
Partner logos are raster — Provide vector source in a Partner Logos set; swap raster fills for Logo instances. Open
C6
C7 — Code Connect — Blocked until property names normalize and content slots are introduced. Open
C7
On this page
Are you looking for Components?
esc