GlobeOne App Feature 01 / Design System

New Gen Design System

Built once,
used
everywhere

One library behind every GlobeOne screen — colour, type and components that teams assemble instead of redraw.

Design System
Approach

Atomic System

  • Brad Frost’s atomic methodology structures the library, building larger components from smaller, simpler ones.

  • I implemented a three-tiered design token approach so base, semantic and component values stay separable.

  • My goal was to ensure consistent, reusable, and easily maintainable components.

  • This makes the system flexible, scalable, and ready for any GlobeOne surface.

Three Tiered
Design Tokens

Structure

The three-tiered token approach organizes design values into three layers — base, semantic and component tokens — creating a clear hierarchy between design foundations and UI components.

This structure makes the system scalable, easy to maintain, and consistent across all components.

  • Tier 01

    Atoms

    The smallest building blocks: colour, type, spacing, radii and single controls. Nothing here depends on anything else.

    Tokens · button · input · chip · icon
  • Tier 02

    Molecules

    Atoms combined into working groups that carry a single job — a labelled field, a status row, a card header.

    Form field · account card · semantic message
  • Tier 03

    Templates

    Whole layouts assembled from molecules, defining page structure before any real content lands in it.

    Dashboard · bill summary · checkout flow

Benefits of atomic design

Atomic Design gives us valuable insights and helps us in creating a more effective design system. So, what are the key advantages of it?

  • Consistency in your design

    When applying the atomic design principles, all atoms and molecules must be created before the site is built. This will allow consistency across your website or product.

  • Fewer components in your design system

    When it comes to building blocks, atomic design is very measured and calculated. As a result, you’ll have fewer components at the end of the project.

  • Sections of a webpage are easier to remove or change

    Any modifications to a component will automatically update throughout the entire site.

  • Great for developers

    As it makes coding easier, avoiding confusion when building your product.

Colour

Weighted 60-30-10, so the dominant blue actually dominates. Every step carries its measured contrast rating.

  • #D9E7FC
  • #AAC9F8
  • #7BABF4
  • #2E71D6
  • #0964EC
  • #074FBB
  • #053A8A
  • Success
  • Warning
  • Error
  • Info

Type

Roboto in four weights, plus Condensed SemiBold where headers get tight. Styles are named, so 14 Medium is a token rather than a guess.

Roboto
  • H1 44
    Bold / 52
  • H2 32
    Bold / 38
  • H5 20 Condensed
    SemiBold / 24
  • B1 16 Medium · body copy runs here at its published line height.
    Medium / 24

Foundations

The primitives every component inherits: a pill radius by default, and spacing that counts in fours.

  • Roboto, four weights

    Regular to Bold, plus Condensed SemiBold for tight headers.

  • Pill by default

    Buttons and chips use the circle radius; cards use 8, 12 or 16.

  • Spacing in fours

    A five-step scale from 4 to 24 keeps rhythm predictable.

  • Contrast on the swatch

    Each ramp step ships with its measured ratio and rating.

Border radius

  • xsmall 4
  • small 8
  • medium 12
  • large 24
  • xlarge 32
  • circle 1000

Spacing

  • xsmall 4
  • small 8
  • medium 12
  • large 16
  • xlarge 24

Components

Each family carries its own definition, variant axes and usage rules from the library, next to a working specimen.

Avatar

Avatar

An avatar in UI is a graphical representation of a user, typically shown as an image, icon, or initials, used in profiles, chat applications, and dashboards to personalize the user experience.

He × Avatar × Brand × Active · 36px · ring 2px #016AE5 BRAND 6 × STATES 3 × CHARACTERS 0–10 · 80px · ring 2.667px #FFFFFF
Brand avatar 36px · Active yes / no
Brand avatar 80px · BRAND · GFP / HPW / GAH 5G / Platinum shown as Selected exports
  • Postpaid
  • Prepaid
  • GFP
  • HPW
  • GAH 5G
  • Platinum
Brand avatar · STATES
  • Default
  • Selected
  • Unselected
Juan Dela Cruz
Globe Postpaid · Active

Action button

Button

Buttons in a UI design system are interactive elements that enable users to take actions, designed with clear labels, distinct shapes, and responsive states to ensure accessibility and guide user flow.

Shape
Use a border-radius of 9999px for a fully rounded (pill-shaped) button style.
Height
Use a button height of 44px as the standard, with 52px for larger actions and 32px for compact layouts.
Label
Use 16px font size for buttons 44px or taller, and 14px for buttons 32px high.
Type 3 × Format 5 × State 5 × Size 3
State · Active / Hover / Pressed / Focused / Inactive
Primary ActiveHoverPressedFocusedInactive
Secondary ActiveHoverFocusedInactive
Tertiary ActiveHoverPressedInactive

Chips & badge

Chips

Chips in UI are small, interactive elements that represent inputs, selections, or filters, allowing users to manage and organize content efficiently.

Badges in UI are small visual indicators that convey status, notifications, or counts, providing users with quick, contextual feedback.

Display usage

if account is active = SCR check will display only. if account is inactive = Inactive chip only, SCR is removed *SCR and Active chip shouldn’t be displayed together. if account is up for renewal (Renew Now state) = SCR check will be hidden

State × Style
Success Warning Error Info Non-Actionable
Status
Paid Due Soon Due Now Unpaid
Badge
Count and dot forms

Input

Text field

A text field in a UI design system is an interactive element that allows users to input and edit text, designed for clarity, accessibility, and seamless data entry across forms and interfaces.

State: Default / Focused / Error · h44 · radius 8

Accordion

Accordion

A collapsible component that allows users to expand and hide sections of content, revealing information only when the section headers are clicked.

State: Open / Close × Device 2 · padding 12/10

In a modal, the top button has to be Primary and the priority decreases as the button position goes down.

Stepper

Stepper

Pagination in a UI design system is a navigation control that divides content into manageable sections or pages, enabling users to browse large datasets or lists efficiently while maintaining performance and usability.

State: Default / Progress / Success · Steps 6 × Label 2
  1. 1
  2. 2
  3. 3
  4. 4
Confirm the number
Double-check the recipient before continuing.

Messages

Semantic message

Semantic messages in a UI design system are contextual notifications that use text, icons, and colors to convey the status or outcome of an action, such as success, error, warning, or informational updates, ensuring clear and intuitive communication with users.

  • Actions are optional, you may change the button type to secondary/tertiary
  • Subcopy — Max 55 – 140 characters (To use if needed for extra context)
  • Payment posted
    Your promo activates once your SIM connects to a partner network on the chosen date.
  • SIM registration required
    The SIM Registration Act requires mobile numbers to be registered before it can make calls, send texts, and use data.
  • Too many attempts
    For your safety and security, we'll temporarily protect your account. Please try again in 24 hours.
  • Need help?
    You may call our hotline : 211, chat us on FB Messenger, or visit the nearest Globe Store for your needs.

Cards

Account card

One card per brand, carrying the brand mark, an Active or verified chip, the account name and number, and a circular View chevron. The bill summary below shows the same parts composed with a status chip and the primary pill.

Brand 9 · Globe Postpaid / Prepaid · GFiber Plan / Prepaid · GAH 5G · HPW · Platinum · TM · Skeleton
  • Globe Postpaid
  • Globe Prepaid
  • GFiber Plan
  • GFiber Prepaid
  • Globe At Home 5G
  • Home Prepaid WiFi
  • Platinum
  • TM
  • Skeleton
Composed with chip + primary button
Total amount due Due Now
₱1,299.00
Due on 28 September 2026

Iconography

One family, two states and three sizes. Every glyph sits on a square frame so alignment never depends on the drawing inside it.

  • magnifyingglass
  • gearshape
  • message
  • phone
  • laptop
  • display
  • sim
  • battery
  • camera
  • video
  • headphones
  • clock
  • airplane
  • printer
  • credit-card
  • calendar
  • receipt
  • discount
  • delivery
  • download
  • shipping
  • pay-bills
  • infinity
  • xmark

Size · 16 / 24 / 32

  • 16
  • 24
  • 32

State · Outline / Solid

Outline
Solid

Outline for navigation and passive states; solid to carry semantic colour.

Brand

Brand marks in UI carry product identity into the interface. Each family ships at 32, 24 and 16 so a logo never gets scaled by hand.

  • Globe

    • 32
    • 24
    • 16
    • 32
    • 24
    • 16

  • GFiber Plan

    • 32
    • 24
    • 16
    • 32
    • 24
    • 16

  • GFiber Prepaid

    • 32
    • 24
    • 16
    • 32
    • 24
    • 16

  • TM

    • 32
    • 24
    • 16

  • Globe At Home 5G

    • 32
    • 24
    • 16
    • 32
    • 24
    • 16

  • TM Fun Rewards

    • 32
    • 24
    • 16

Templates

Whole screens assembled from the parts above — 375×812, radius 28, nothing drawn from scratch.

  • Splash

    iOS status bar · GlobeOne logomark · button primary / secondary · text link · pagination dots

  • Log In

    GlobeOne logomark · pill field · Biometric / Keypad keys · text links

  • Create MPIN

    Stepper 4-step · PIN slots · Show Hide PIN · Keypad · Arrow Left
  • 01

    Atomic structure

    Atoms, molecules, organisms and templates map onto the library pages, so a screen is assembled rather than drawn.

  • 02

    Named axes, not copies

    Families declare their variant properties, keeping every button state inside one component instead of scattered duplicates.

  • 03

    Documented in place

    Usage notes and accessibility minimums sit beside the component, where the decision actually gets made.