KeepReady
Menu Grid Component link

A 2D grid of Service Item tiles used for top-level service navigation. Column (2–5) sets the tiles across, Row (1–5) the tiles down.

Ship as-is
All four traits pass. The rebuilt component set uses plain numeric variant values (Column=4, Row=2) — string values are the correct approach here, since Figma variant properties cannot be typed as integers. Interaction states are owned by the Service Item child and are assessed there, not on this layout container. Code Connect mappings are left open for engineering to register.

Contexts are illustrative. Final screens will reference actual GCash patterns. Menu Grid sits on the dashboard as the primary service shortcut surface — typically <code>Column=4, Row=2</code> (8 services) on the home screen.

GCash
LabelLabelLabelLabelLabelLabelLabelLabel
Properties
Column
Row
Service Item
OrientationVertical
Reusable
Pass
Used on dashboard surfaces and any screen needing a uniform service shortcut grid. 20 row/column combinations cover most layout needs from a single column list to a 5×5 grid.
Self-contained
Pass
The container is a fixed 336 wide and carries its own background, padding (8 vertical; 8 horizontal, tightening to 6.4 at Column=5), 4 row gap, and 6 radius.
Consistent
Pass
Both axes read the conventional way — Column counts tiles across, Row counts tiles down. Values are plain numbers across all 20 variants.
Composable
Pass
Composes Service Item instances and nothing else. Icons arrive through a Figma SLOT, so each cell is overridable without detaching.
State iOS Android Figma Property Notes
Default Yes Yes Column × Row Menu Grid is a layout container and has no interaction states of its own. Tap, pressed and disabled behaviour belong to the Service Item child.
  • Code Connect mappings not registered. Left open for engineering. The property surface is stable and linkable — Column and Row map straight onto a lazy grid's column count and item count. C7 · Code Connect Linkability
  • Variant values are plain numbers. The earlier set used pseudo-numeric strings (Row="by 4"). The rebuild uses Column=4, Row=2. String values are the correct and only option here — Figma variant properties cannot be typed as integers — so the prior recommendation to switch to integer props has been withdrawn. C2 · Variant & Property Naming
  • Service Item is a first-class DS component. Previously flagged as a child of Menu Grid only. It is now published standalone with its own State / Orientation / Badge / Action axes, and Menu Grid instances it rather than redefining tiles. C1 · Layer Structure & Naming
  • Container metrics are uniform across all 20 variants. Two Row=5 variants previously broke the shared metrics — Column=5, Row=5 was 352 wide against 336 everywhere else, and Column=2, Row=5 used 60-tall tiles against 64. Both were corrected in Figma. Every variant is now a 336-wide container at a 4 row gap, with 64-tall tiles at Column=2 and 72-tall tiles at Column=3–5. C1 · Layer Structure & Naming
  • Icons come through a slot. Each tile's icon is a Figma SLOT, not baked artwork, so cells are swappable without detaching the instance. C6 · Asset & Icon Quality
  • Document that Column=2 switches the tile to horizontal. At Column=2 the Service Item child renders at Orientation=Horizontal (158 × 64, icon left of the label); Column=3–5 render vertical. Menu Grid exposes no orientation property, so a native lazy grid will not reproduce the switch on its own — it has to be stated in the property mapping. No Figma change required. Docs
Styles
Row 2 × Column 4 — 8 services (most common)
DES DEV

The default dashboard layout — 2 rows × 4 columns = 8 services. Used on the home dashboard for primary service shortcuts.

LabelLabelLabelLabelLabelLabelLabelLabel
Properties
Column
Row
Properties
Row 2
Column 4
Grid 4-column
Colors
Container bg #FFFFFF
Border (weak) #E5EBF4
Layout
Cells 4 × 2 = 8
Item orientation Vertical
Tile size 77 × 72
Icon slot 48 × 48
Container width 336
Padding 8 horizontal · 8 vertical
Gap 4 × 4
Border radius radius/radius-2 (6px)
Typography
Label style Primary/Label/Fine
Label font Proxima Soft Bold · 12 / 12 · +0.5
Colors by State

Menu Grid owns only the container surface. Every colour inside a tile — icon, label, description — belongs to Service Item and is documented there.

Role Token Value
Container bg bg/color-bg-main #FFFFFF
Border (weak) border/color-border-weak #E5EBF4
Row 4 × Column 4 — 16 services
DES DEV

Expanded grid for "All Services" sheets — 4 rows × 4 columns = 16 services. Used on category pages or full-list views.

LabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabel
Properties
Column
Row
Properties
Row 4
Column 4
Grid 4-column
Colors
Container bg #FFFFFF
Border (weak) #E5EBF4
Layout
Cells 4 × 4 = 16
Item orientation Vertical
Tile size 77 × 72
Icon slot 48 × 48
Container width 336
Padding 8 horizontal · 8 vertical
Gap 4 × 4
Border radius radius/radius-2 (6px)
Typography
Label style Primary/Label/Fine
Label font Proxima Soft Bold · 12 / 12 · +0.5
Layout

Measured from the component set. Column=5 tightens the horizontal padding and column gap to fit five 64px tiles inside the same 336px container.

Role Token Value
Container width — 336px (fixed)
Padding (horizontal) space/space-8 8px · 6.4px at Column=5
Padding (vertical) space/space-8 8px
Row gap space/space-4 4px
Column gap space/space-4 4px · 0.8px at Column=5
Corner radius radius/radius-2 6px
Tile width — 158 · 104 · 77 · 64 by Column
Tile height — 64px at Column=2 · 72px at Column=3–5
Icon slot — 48 × 48
Row 5 × Column 5 — 25 services (max)
DES DEV

Maximum density — 5 rows × 5 columns = 25 services. Use sparingly; label legibility tightens at this density.

LabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabel
Properties
Column
Row
Properties
Row 5
Column 5
Grid 5-column
Colors
Container bg #FFFFFF
Border (weak) #E5EBF4
Layout
Cells 5 × 5 = 25
Item orientation Vertical
Tile size 64 × 72
Icon slot 48 × 48
Container width 336
Padding 6.4 horizontal · 8 vertical
Gap 0.8 × 4
Border radius radius/radius-2 (6px)
Typography
Label style Primary/Label/Fine
Label font Proxima Soft Bold · 12 / 12 · +0.5

iOS — Swift Package Manager

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

Android — Gradle (Kotlin DSL)

dependencies {
    implementation("com.eastblue.ds:menu-grid:1.0.0")
}
Figma PropertySwiftUICompose
Row="by N" rows: Int rows: Int
Column="by N" columns: Int columns: Int
Service Item (instance) items: [EBServiceItem] items: List<EBServiceItem>
SwiftUI
ios/Components/MenuGrid/EBMenuGrid.swift
Jetpack Compose
android/components/menugrid/EBMenuGrid.kt
// Default dashboard grid — 2 rows × 4 columns
EBMenuGrid(columns: 4, items: services)

// Service Item child
EBServiceItem(
    icon: Image("send-money"),
    label: "Send Money",
    action: { /* tap */ }
)
// Default dashboard grid — 2 rows × 4 columns
EBMenuGrid(
    columns = 4,
    items = services
)

// Service Item child
EBServiceItem(
    icon = painterResource(R.drawable.send_money),
    label = "Send Money",
    onClick = { /* tap */ }
)
RequirementiOSAndroid
Tap target Service Item is 64+ px wide × ~64 px tall — meets HIG 44pt minimum Meets Material 48dp minimum
Accessibility label .accessibilityLabel(label) on each item contentDescription = label
Grid semantics Container exposes grid traits via LazyVGrid LazyVerticalGrid announces row/column position
Disabled state Currently undefined — needs token + .disabled(true) handling Currently undefined — needs token + enabled = false

Do

Use Row=2 × Column=4 for the primary dashboard surface — 8 services is the established home pattern.

Don't

Use Row=5 × Column=5 unless density is essential — 25 cells reduces label legibility.

Do

Pair Menu Grid with a section heading or container card so users understand the grouping.

Don't

Mix icon styles within a single grid — keep all Service Item icons in the same vector style.

ID Criterion Status Notes
C1 Layer Structure & Naming Ready Every child is a named Service Item instance. No Frame/Group debris in the component set.
C2 Variant & Property Naming Ready Column = tiles across, Row = tiles down — the conventional reading. Values are plain numbers. Figma variant properties are string-only, so numeric strings are the correct representation.
C3 Token Coverage Not Applicable Menu Grid owns only the container surface and its spacing. Every tokenised colour inside a tile belongs to Service Item and is audited there — the same delegation as C5.
C4 Native Mappability Ready Maps to LazyVGrid / LazyVerticalGrid(GridCells.Fixed(Column)) with Column × Row items. The tile orientation switch at Column=2 must be carried in the API — see the Docs recommendation.
C5 Interaction State Coverage Not Applicable Menu Grid is a layout container with no states of its own. Tap and disabled behaviour is assessed on Service Item.
C6 Asset & Icon Quality Ready Icons are delivered through a Figma SLOT on each tile rather than baked artwork.
C7 Code Connect Linkability Not Mapped No CLI mappings registered yet — left open for engineering.

4 Column × 5 Row = 20 variants. Column counts tiles across, Row counts tiles down. Every variant is a 336-wide container of Service Item instances at a 4 row gap.

ColumnRow rangeTilesTile sizeItem orientationCount
Column = 21 – 52 – 10158 × 64Horizontal5
Column = 31 – 53 – 15104 × 72Vertical5
Column = 41 – 54 – 2077 × 72Vertical5
Column = 51 – 55 – 2564 × 72Vertical5
View full Column × Row breakdown (20 rows)
ColumnRowTilesContainerNode
Column = 2Row = 12336 × 805973:70192
Column = 2Row = 24336 × 1485973:70186
Column = 2Row = 36336 × 2165973:70177
Column = 2Row = 48336 × 2845973:70150
Column = 2Row = 510336 × 3525973:70162
Column = 3Row = 13336 × 885973:70202
Column = 3Row = 26336 × 1645973:70195
Column = 3Row = 39336 × 2405973:70342
Column = 3Row = 412336 × 3165973:70329
Column = 3Row = 515336 × 3925973:70313
Column = 4Row = 14336 × 885973:70282
Column = 4Row = 28336 × 1645973:70256
Column = 4Row = 312336 × 2405973:70227
Column = 4Row = 416336 × 3165973:70112
Column = 4Row = 520336 × 3925973:70129
Column = 5Row = 15336 × 885973:70276
Column = 5Row = 210336 × 1645973:70265
Column = 5Row = 315336 × 2405973:70240
Column = 5Row = 420336 × 3165973:70206
Column = 5Row = 525336 × 3925973:70287
Changes Applied via Figma · node 5973:70111
Row=5 dimensions corrected — Column=5, Row=5 (5973:70287) narrowed from 352 to 336 to match every sibling, and Column=2, Row=5 (5973:70162) moved from 60-tall to 64-tall tiles, taking the container from 332 to 352. All 20 variants now share the same container width and per-column tile height. Resolved
C1
C3 scoped to what Menu Grid owns — the container surface and its spacing. All tokenised colour inside a tile belongs to Service Item and is audited on that component, the same delegation already applied to C5. The Colors table no longer restates Service Item's icon and label tokens. Scoped
C3
Container padding corrected — the Layout table documented 10px top and 6px bottom. Measured values are 8px on both, and the icon slot is 48 × 48 rather than the 40 × 40 carried over from the v1 assessment. Resolved
C1
Revalidated against the v2 rebuild · node 5973:70111
Repointed to the 2026 Working File — assessment now tracks 5973:70111 in GCash Design System · 2026 Working File, replacing 18320:14332 in Sticker Sheets v2. Still 20 variants: 4 Column × 5 Row, all individually verified. Documented
Updated
Variant values are plain numbers — Column=4, Row=2 replaces the earlier Row="by 4" strings. The prior recommendation to move to integer props is withdrawn: Figma variant properties are string-only, so numeric strings are the correct representation. Resolved
C2
Interaction states reassigned to Service Item — Menu Grid is a layout container with no states of its own, so the earlier pressed/disabled token gap is assessed on Service Item instead. C5 is Not Applicable here. Reassigned
C5
Two Row=5 variants break the shared metrics — Column=5, Row=5 is 352 wide against 336 everywhere else, and Column=2, Row=5 uses 60-tall tiles against 64. Open
C1
Live preview rebuilt from measured geometry — controls now read Column 2–5 × Row 1–5 with plain numeric labels, the preview renders columns across instead of down, and a readout surfaces the Column=2 → Orientation=Horizontal switch. Documented
Docs
Initial Assessment · node 18320:14332
Component assessed — 20 variants formed by Row × Column (Row 2/3/4/5, Column 1/2/3/4/5). Layout container of Service Item children. 336px fixed width. Documented
Initial
Variant property values are strings, not integers — Row="by 4", Column="by 4". Native takes Int; the string prefix forces parsing. Open
C2 Open
Service Item missing pressed/disabled tokens — Only dashboard/service-item/color/active/{icon,label} defined. Other states must be improvised. Open
C5 Open
Code Connect mappings — No CLI mappings registered yet. Open
C7 Open