East Blue Design System
Screen Design Guide — GCash Revamp
How to lay out a new GCash screen. The standard regions of a screen, the frame and safe areas, the spacing and type scale, which buttons to use, and the exact Figma setup. Component specs are grounded in the East Blue assessments; foundations follow iOS / Android / Material best practice.
At a Glance
The numbers behind every screen. If you remember nothing else, remember these.
390×844Design frame
16pxSide margins
4pxSpacing base unit
16pxDefault block gap
50pxDefault button
44ptMin touch target
16pxBase text size
1Primary button / screen
1 · Anatomy of a Screen
Every GCash screen is built from the same five vertical regions, top to bottom. Designing a new screen starts by placing these regions, then filling the content area with DS components.
Status bar
Header · 56px
Content area (scrolls)
Action dock
Home indicator
The five stacked regions of every screen, top to bottom.
| Region | Height | What it holds |
|---|---|---|
| Status bar | 44–54px (iOS) · 24–28dp (Android) | OS-owned. Time, signal, battery. Never draw content here — it sits inside the top safe area. |
| App bar / Header | 56px standard · up to 96px hero | Screen title, back / close, and up to two trailing actions. Use the Header family. One header per screen. |
| Content area | Fills remaining height (scrolls) | The scrollable body — lists, cards, fields, sections. Side margins 16px. This is where most of the design happens. |
| Action dock | Button height + 16px padding | Optional. Pinned primary CTA at the bottom. Sits above the home indicator on a surface/default bar, often with a top hairline or shadow. |
| Home indicator / nav bar | 34px (iOS) · 48dp (Android) | OS-owned bottom safe area. Keep tappable content clear of it; the action dock pads above it. |
Rule of thumb: one header, one primary action, one scroll region. If a screen needs two primary actions or two scroll areas, it's usually two screens.
2 · Frame & Safe Areas
Design at one baseline device, then verify the small and large bounds. GCash is portrait-only.
top safe area
390 × 84416px margins
bottom safe area
Baseline frame with safe-area insets and 16px side margins (dashed).
| Setting | Value | Note |
|---|---|---|
| Baseline frame | 390 × 844 | iPhone 14 / 13. Design here first. |
| Small bound | 360 × 640 | Smallest common Android. Check nothing clips or wraps badly. |
| Large bound | 430 × 932 | iPhone Pro Max. Content should grow, not stretch. |
| Side margins | 16px | The default content inset on both edges. Full-bleed media may go edge-to-edge. |
| Top safe area | ≈ 47px | Header sits below this. Use Figma's device frame to visualize. |
| Bottom safe area | ≈ 34px | Action dock and floating elements pad above this. |
3 · Layout Grid & Spacing
All spacing comes from the space/space-* token scale — a 4px base unit.
Pick a token. Never type a raw number.
space-44
space-88
space-1212
space-1616 · default
space-2424
space-3232
space-4848
| Token | Value | Typical use |
|---|---|---|
| space-4 | 4px | Icon-to-label, tight inline gaps. |
| space-8 | 8px | Within a component — chip padding, stacked label + caption. |
| space-12 | 12px | List row padding, gap between related fields. |
| space-16 | 16px | The default. Side margins, gap between cards, section inset. |
| space-20 / 24 | 20 / 24px | Gap between distinct content blocks. |
| space-32 / 48 | 32 / 48px | Gap between major sections, above a section header. |
Available steps: 0 · 2 · 4 · 6 · 8 · 10 · 12 · 16 · 20 · 24 · 28 · 32 · 36 · 48 · 56.
✓ Do
Gaps on the scale — 8 · 16 · 24 · 32. Every value is a token.
✗ Don't
Eyeballed values — 15 · 18 · 23. Off-grid, no token, drifts over time.
Min / max. Min gap between tappable elements:
space-8. Default block rhythm: space-16. Beyond space-48 you usually want a divider or a new section, not more whitespace.4 · Headers
The East Blue Header assessment found four distinct header roles collapsed into look-alike components. Use the right one for the job; don't mix roles on one screen.
Large Title
Section label
₱1,250
| Header type | Height | Title style | When to use |
|---|---|---|---|
| Title bar (app bar) | 56px | Heading / 18–20 | Default for almost every screen. Back / close on the left, title centered or leading, up to 2 trailing actions. |
| Large-title hero | 88–96px | Display / 24–28 | Top-level destinations (Home, a hub). Bigger title that collapses to a title bar on scroll. |
| Section header | Auto + space-32 above | Heading / 16 | Inside the content area to label a group. Not an app bar — no back button. |
| Transaction / detail hero | Auto | Display + amount | Receipt and detail screens — avatar, title, amount, divider. A card hero, not a navigation bar. |
Header title type uses the BarkAda / heading font; body and labels use Proxima Soft. Keep titles to one line — truncate with ellipsis rather than wrapping.
5 · Typography
The label scale below is the one shipped on the Button and shared across components.
Every text layer gets a named style — never a loose size.
Screen title
Section heading
Primary label
Default body text
Supporting text
Fine print
| Role | Text style | Size | Used for |
|---|---|---|---|
| Screen title | Display / Heading | 24–28px | Hero header titles. Heading font. |
| Section heading | Heading | 18–20px | Title bar, section labels. |
| Body / primary label | Primary/Label/Large | 18px | Primary actions, list titles. |
| Default text | Primary/Label/Base | 16px | Body copy, field labels, most UI text. |
| Small / supporting | Primary/Label/Small | 14px | Captions, secondary lines, helper text. |
| Fine print | Primary/Label/Fine | 12px | Legal, timestamps, badge text. |
Body font is Proxima Soft; headings use the brand heading face. Minimum on-screen text size is 12px — never smaller.
6 · Buttons — which to use
Three styles, one decision tree. Everything steps down from the main action.
Exactly one Filled button per screen.
Filled · primary
Outline · secondary
Text · tertiary
| Style | API | Use for |
|---|---|---|
| Filled (primary) | EBButton | The single main action — Continue, Send, Confirm. Brand blue #005CE5. |
| Outline (secondary) | EBOutlinedButton | Secondary action paired with a primary — Cancel, Back, Maybe later. |
| Text (tertiary) | EBTextButton | Low-emphasis / inline actions — Skip, Learn more, See all. |
✓ Do
ContinueCancel
One Filled primary + one Outline secondary. Clear hierarchy.
✗ Don't
SaveSend
Two Filled buttons compete — the user can't tell what's primary.
Size ladder
Large is the default for the GCash app — it's what fills the action dock. Smaller sizes are for inline and dense contexts.
Large
Medium
Small
Compact
XSmall
| Size | Height | Padding H / V | Text style |
|---|---|---|---|
| Large (default) | 50px | 20 / 16 | Primary/Label/Large · 18px |
| Medium | 48px | 16 / 12 | Primary/Label/Base · 16px |
| Small | 36px | 12 / 8 | Primary/Label/Base · 16px |
| Compact | 28px | 12 / 5 | Primary/Label/Small · 14px |
| XSmall | 24px | 10 / 4 | Primary/Label/Fine · 12px |
All sizes: pill radius 99px, font Proxima Soft Bold, tracking 0.25px. Use the Destructive appearance for irreversible actions (delete, remove); White / Subtle appearances are for colored or media backgrounds.
Docked CTA pattern. When a screen has one clear action, pin a Large Filled button full-width in the action dock: button height +
16px padding on all sides, on a surface/default bar above the home indicator. Pair with an Outline button stacked above or beside it when a secondary action is needed.7 · Color & Surfaces
Screens are built on the surface scale; intent colors carry meaning.
Every color resolves to a token — no raw hex.
surface/default
surface/content
surface/pressed
surface/disabled
brand · #005CE5
pressed · #2340A9
| Role | Token | Use |
|---|---|---|
| Page background | surface/default | The base canvas of the screen. |
| Card / content surface | surface/content | Raised cards, sheets, grouped rows. |
| Pressed surface | surface/pressed | Tap feedback on rows and tiles. |
| Disabled surface | surface/disabled | Inactive controls. |
| Brand | #005CE5 | Primary actions, links, selected states. Pressed → #2340A9. |
Intent colors (Information, Positive, Notice, Negative) come from the Badge / Alert palettes — use them for status, never for decoration. Radius scale: radius-1 → radius-4 for cards (≈ 4–16px), radius-round (pill) for buttons and chips.
8 · Touch Targets & States
Native readiness depends on real interaction states. A screen built only in its resting state is incomplete.
44pt
Default
Pressed
Disabled
| Rule | Spec |
|---|---|
| Minimum touch target | 44 × 44pt (iOS) · 48 × 48dp (Android) |
| Min gap between targets | 8px (space-8) |
| Required states per control | Default · Pressed · Disabled (+ Selected / Error where relevant) |
| Focus / loading | Model loading as a skeleton or spinner state, not a blank gap |
A control smaller than the minimum target (e.g. a 24px icon button) still needs a 44pt hit area — pad the tappable region even if the glyph is small.
9 · Figma Setup Spec
The exact settings for a new screen frame in Figma so it stays on-system and hands off cleanly to native.
1 stretch column
Layout grid: one stretch column, 16px margins (highlighted).
Frame
390 × 844, Auto layout vertical
Top-to-bottom auto layout. Header pinned top, action dock pinned bottom, content set to Fill and scroll. Use a device frame to show safe areas.
Layout grid
16px margins, 4px baseline
Add a column grid:
1 stretch column, 16px margins. Optionally a 4px row grid to keep vertical spacing on the space-* scale.Spacing
Tokens only
Set every auto-layout gap and padding from
space/space-* variables — not typed numbers. Default gap space-16.Color & type
Bound variables & styles
Fills bound to
surface/* and brand variables; every text layer assigned a named text style. No raw hex, no loose sizes.Composition
Instances, not redraws
Build from DS component instances (Header, Button, List Item, Field…). Don't redraw a component on the canvas — instance-swap and use slots.
Naming
Semantic layer names
Name frames by role (
header, content, action-dock) — never Frame 42 / Group 7. Clean names map straight to native code.10 · Screen-Build Checklist
Step 1
Place the regions
390×844 frame, vertical auto layout. Drop in the header, the scrollable content area, and (if needed) the action dock.
Step 2
Set margins & spacing
16px side margins. Every gap from a
space-* token. Default block rhythm space-16.Step 3
Compose content from DS components
Instances only. Pick the right Header type and the right List / Card / Field. Use slots for content.
Step 4
Define the one primary action
One Large Filled button. Dock it if it's the screen's main action; pair an Outline secondary if needed.
Step 5
Bind tokens & name layers
All color/type/spacing bound to variables and styles. Semantic layer names. Then verify at the 360 and 430 width bounds.