Inline Message — GCash DS Assessment

FixNeeds Refinement

A subtle inline status message rendered alongside form fields or content — neutral, info, success, or error intent.

Asset bundling + token + slot cleanup

3D illustrations + Lottie animation require bundling as native assets. Replace the alpha-composited bg-subtle token with a solid color. Expose the body-content section as a Figma Slot so consumers can override the List with their own content (transaction breakdowns, shared-with lists, etc.).

In Context

Contexts are illustrative. Final screens will reference actual GCash patterns. Inline Message is the primary surface for transaction confirmations and error recovery flows.

Live Preview

Add your label here

Add your description here.
This is just a filler sentence.

Header

Content

Header

Content

Reference no.1234567890

Properties

type

assetSize

hasBodyContent

hasReferenceNumber

DS Health

Reusable

Pass

Covers confirm, processing, and error outcomes for transactions, logins, KYC, and any multi-step flow with a final status surface.

Self-contained

Warn

Carries its own bg, border, radius, and shadow. But illustrations are raster 3D renders bundled externally, and Loading likely uses a Lottie animation. Document both as required assets. C6

Consistent

Warn

Type enum values are clean (Success / Loading / Error). bg-subtle token bakes in 24% alpha — rendered color depends on what's behind it, which is unusual for a "bg" token. C3

Composable

Pass

Body content composes instances of the canonical List Item component. Changes to List Item propagate here ✓.

Behavior

State	iOS	Android	Figma Property	Notes
Success	Yes	Yes	type=Success	Blue palette. Completed action, positive outcome.
Loading	Yes	Yes	type=Loading	Lottie spinner animation. Processing state.
Error	Yes	Yes	type=Error	Red/negative palette. Failed or blocked action.
Asset Size	Yes	Yes	assetSize=Large/Small	Large: 106px illustration. Small: reduced illustration for denser layouts.

Open Issues

bg-subtle token bakes in alpha — rgba(246,249,253,0.24) composites against whatever sits behind it, so the actual rendered color varies by context. Should be a solid token (e.g. #F9FBFD) or use an explicit layering convention. C3
Illustrations are raster 3D renders — Success / Loading / Error illustrations must be bundled with the native package. Loading is almost certainly a Lottie animation (same pattern as Upload File). Document as required assets. C6
Body content not exposed as a slot — hasBodyContent is a boolean but the List inside is not overridable. Consumers doing transaction breakdowns, beneficiary lists, etc. need slot access. C2
Code Connect CLI mappings not registered. C7

Types

Default

DES DEV

Result-state notification card with 3D illustration, title, description, optional content body, and optional reference number. Flip Variant for Success / Loading / Error; toggle Body content + Reference no. independently.

Properties

Variant

Body content

Reference no.

Properties

Variant Success

Body content Show

Reference no. Show

Colors

Surface #FFFFFF

Border #E5EBF4

Header #0A2757

Title #005CE5

Description #445C85

Reference label #90A8D0

Layout

Card 360 × 664

Card radius 12 (no shadow)

Content section 360 × 284 · 48 top / 24 horiz / 24 bottom

Illustration 106 × 106 (24 spacer below)

Receipt → desc gap 16

Description 312 wide · 2 lines × 20

Download icon 24 × 24 overlay at top 16 / right 18

Body content 360 × 316 · border-top + bottom

Section title bar 44 · padding 12 vert · text x=48

Section container bg #F6F9FD @ 24% · 12 vert / 48 horiz

List rows List Item instances — see List Item component

Reference no. 360 × 64 · 24 top / 16 row / 24 bottom

Typography

Title Proxima Soft Bold · 22 / 26 · Primary/Headlines/Section

Description BarkAda Medium · 14 / 20 · Secondary/Default/Base

Reference no. Proxima Soft Semibold · 16 / 16 · +0.25

EBInlineMessage("Add your label here")
    .ebDescription("Add your description here.")
    .ebIntent(.success)
    .ebReferenceNumber("1234567890")

Colors by Type

Each type ships its own bg, border, bg-subtle, and label tokens. bg-subtle currently bakes in 24% alpha — flagged under C3.

Role	Token	Token	Value
Success	bg	main/inline-message/color/success/bg	#FFFFFF
—	border	main/inline-message/color/success/border	#E5EBF4
—	bg-subtle alpha baked	main/inline-message/color/success/bg-subtle	rgba(246,249,253,0.24)
—	title	main/inline-message/color/success/label-title	#005CE5
—	description	main/inline-message/color/success/label-description	#445C85
—	section header	main/inline-message/color/success/label-header	#0A2757
—	reference label	main/inline-message/color/success/label-reference	#90A8D0
—	reference number	main/inline-message/color/success/label-number	#0A2757

Installation Planned API

iOS — Swift Package Manager

// In Xcode: File → Add Package Dependencies
"https://github.com/AY-Org/eb-ds-ios"

// Requires: lottie-ios for loading animation
"https://github.com/airbnb/lottie-ios"

Android — Gradle (Kotlin DSL)

dependencies {
    implementation("com.eastblue.ds:inline-message:1.0.0")
    // Requires: lottie-compose for loading animation
    implementation("com.airbnb.android:lottie-compose:6.4.0")
}

Property Mapping

Figma Property	SwiftUI	Compose
type=Success/Loading/Error	.ebType(.success/.loading/.error)	type = EBInlineMessageType.*
assetSize=Large/Small	.assetSize(.large/.small)	assetSize = EBAssetSize.*
title / description	title: String · description: String	title: String · description: String
hasDownload	onDownload: (() -> Void)?	onDownload: (() -> Unit)?
hasBodyContent (proposed slot)	@ViewBuilder body	body: @Composable () -> Unit
hasReferenceNumber	referenceNumber: String?	referenceNumber: String?

SwiftUI

ios/Components/InlineMessage/EBInlineMessage.swift

Jetpack Compose

android/components/inlinemessage/EBInlineMessage.kt

Usage Snippets Planned API

Usage

// Success with body content + reference
EBInlineMessage(
    title: "Payment Successful",
    description: "Your transfer of ₱500 is complete.",
    referenceNumber: "1234567890"
) {
    EBListItem("Send amount: ₱500") { EBListMarker(variant: .check) }
    EBListItem("Fee: ₱0") { EBListMarker(variant: .check) }
}
.ebType(.success)

// Loading (Lottie spinner)
EBInlineMessage(
    title: "Processing your transaction",
    description: "This usually takes a few seconds."
)
.ebType(.loading)

// Error
EBInlineMessage(
    title: "Transfer Failed",
    description: "Insufficient balance. Please top up and try again."
)
.ebType(.error)

// Success with body content + reference
EBInlineMessage(
    type = EBInlineMessageType.Success,
    title = "Payment Successful",
    description = "Your transfer of ₱500 is complete.",
    referenceNumber = "1234567890"
) {
    EBListItem(content = "Send amount: ₱500") { EBListMarker(variant = EBListMarker.Check) }
    EBListItem(content = "Fee: ₱0") { EBListMarker(variant = EBListMarker.Check) }
}

// Loading (Lottie spinner)
EBInlineMessage(
    type = EBInlineMessageType.Loading,
    title = "Processing your transaction",
    description = "This usually takes a few seconds."
)

// Error
EBInlineMessage(
    type = EBInlineMessageType.Error,
    title = "Transfer Failed",
    description = "Insufficient balance. Please top up and try again."
)

Requirement	iOS	Android
Role	Group the card as a single accessibility element with combined label	`mergeDescendants = true` on the container
Live region	Announce on type change: `.accessibilityLiveRegion`	`liveRegion = LiveRegionMode.Polite`
Illustrations	Decorative: `.accessibilityHidden(true)`	`contentDescription = null`
Loading progress	Announce "Processing" via `.accessibilityValue`	`stateDescription = "Processing"`
Download action	Separate button with `.accessibilityLabel("Download receipt")`	`contentDescription = "Download receipt"`

Usage Guidelines

Do

Use Inline Message as the final surface of a transaction flow — confirm, failure recovery, or pending processing. Include the reference number so users can escalate if needed.

Don't

Use it for transient notifications — use Toast instead. Inline Message is persistent and occupies the screen.

Do

Let users tap the download icon to save a PDF receipt or share the reference number. Makes customer support escalations easier.

Don't

Include the download affordance on the Loading variant — there's nothing to download until the transaction completes.

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Ready	Semantic: `content`, `body-content`, `section-1`, `reference-number`, `Download Small`.
C2	Variant & Property Naming	Needs Refinement	Type values clean. Body content should be a slot, not a boolean-gated hardcoded List.
C3	Token Coverage	Requires Rework	`bg-subtle` uses alpha-composited value instead of a solid token.
C4	Native Mappability	Ready	Custom card composable — no standard native primitive but straightforward to build.
C5	Interaction State Coverage	Ready	Display surface — interactive states live on children (download button, list items).
C6	Asset & Icon Quality	Requires Rework	3D raster illustrations + Lottie animation — asset bundling required.
C7	Code Connect Linkability	Needs Refinement	Not mapped.

Variants Inventory (6 total)

type	assetSize	Node ID
Success	Large	27:168911
Success	Small	27:169118
Loading	Large	27:168980
Loading	Small	27:169187
Error	Large	27:169049
Error	Small	27:169256

1.0.0 — April 2026Major

Initial Assessment · node 27:168910

Component assessed — 6 variants (type × assetSize). Composes canonical List Item for body content. Documented

Initial

bg-subtle alpha token — 24% alpha baked in. Open

C3 Open

Raster illustrations + Lottie dependency. Open

C6 Open

Body content should be a slot. Open

C2 Open

Code Connect mappings — Not registered. Open

C7 Open