Blast TV Design system
Foundation 0.1 Approval stage Variant review

Blast TV · Consumer web

A shared language for every viewing state.

Foundations, components, and streaming patterns extracted from the three W6 directions. This page makes the current system visible without prematurely merging A, B, and C.

Foundation tokens
69
Primitive contracts
8
Content contracts
7
Target
WCAG 2.2 AA

Product principles

Familiar viewing paths, local editorial voice, explicit access states, and content-first composition.

  1. Paths

    Preserve proven viewing paths before changing them.

  2. Voice

    Let editorial rails carry a distinctly Filipino voice.

  3. States

    Explain live, free, locked, offline, and paid states before action.

  4. Reach

    Keep navigation familiar across web, mobile, and television.

Color

A restrained dark foundation lets content art lead. Magenta is reserved for action; status colors always carry a label.

Canvas#09070C
Surface 1#15111A
Surface 2#211A27
Surface 3#2B2233

Action#BF0096

Focus#FFD15C

Live#F04452

Success#38C98D

Warning#FFBD18

Error#FF6B76

Contrast is a gate. Body text reaches 4.5:1, large text reaches 3:1, and focus remains visible on canvas, surfaces, imagery, and review tools.

Typography

Gotham carries the interface at two weights. The compact scale keeps controls clear while titles retain broadcast confidence.

Display · 58 / 62

Live starts here.

Title · 38 / 42

Bakbakan Na!

Heading · 20 / 24

Continue watching

Body · 16 / 25

Watch free channels, films, series, and live events across your devices.

Label · 13 / 16

PREMIUM · 1H 42M

Caption · 12 / 16

Available until 18 August

Spacing & shape

A 4px base grid produces the dominant 8–64px rhythm. Radius stops at 16px for structural surfaces.

4
8
12
16
24
32
48
64
Small8px
Medium12px
Large16px
PillControls only

Components

Every control has a complete state contract. The specimens below use the candidate tokens directly.

Buttons

Primary, secondary, quiet, danger

Access states

Always label status; never rely on color

Live Free Locked Event pass Offline

Selection

Filter chips and explicit selected state

Fields

Labels, help, error, and disabled states

Feedback

Semantic notice with one clear action

Device activatedYou can continue watching on your TV.
Connection unstablePlayback quality may adjust automatically.

Streaming patterns

Product assemblies combine components without adding new primitive styles or embedding editorial content in the API.

Editorial rail

Bakbakan Na!

DoomsdayFree

Doomsday

Action · 1h 45m

Jason Bourne

Jason Bourne

Action · Premium

Duplicity

Duplicity

Thriller · Premium

SplitLocked

Split

Thriller · 1h 57m

DiscoveryHero · rails · search · filters
LiveChannel wall · schedule · live/upcoming
PlaybackControls · captions · ad · error · offline
EntitlementFree · premium · event pass · expired
AccountProfiles · subscription · settings · activation

Player

Brightcove can provide the playback engine and accessible HTML5 control system. Blast owns the skin, control order, labels, states, and entitlement experience.

Actual Brightcove render

This uses the public sample account and video from Brightcove’s official embed documentation. Replace both IDs with Blast media when account access is available.

EngineBrightcove Player 7

HTML5 playback, ABR, controls, APIs, accessibility, and player publishing.

Blast layerSkin and behavior

Control hierarchy, focus, captions, access states, analytics events, and branded presentation.

Account gateConfirm licensed features

DRM, SSAI, casting, quality selection, and analytics must be verified against Blast’s package.

Motion

Motion communicates feedback, state, and spatial change. It never delays entry into the product.

Press150ms
State260ms
Rail420ms
Current page160ms fade out
20ms
Next page240ms fade in

Reduced motion: remove movement and scaling, preserve the state change, and switch routes instantly.

Governance & adoption

Code owns behavior. Figma mirrors approved releases. Shared changes earn their place through real product use.

Component lifecycle

Candidate

One confirmed use case; API may change.

Stable

Two production surfaces and full state coverage.

Deprecated

Replacement named; no new usage.

Retired

Removed from production and Storybook.

  1. Now
    Approval foundation

    Select palette, density, shape, focus, and motion character.

  2. Next
    Production seed

    React, TypeScript, Storybook, Motion, Playwright, and axe.

  3. Then
    Streaming patterns

    Build discovery, live, playback, and access from shared contracts.

  4. Later
    Multi-platform tokens

    Add DTCG and generated outputs when a second platform begins.