UI/UX INTERNSHIP · OPPO

ColorOS 17

ColorOS 17

Core UI Design

Core UI Design

COMPANY

oppo/ColorOS

DURATION

Sep 2025 - Jan 2026

TEAM

Common Components

ROLE

UI/UX Designer

01 OVERVIEW

A NEW SYSTEM DESIGN LANGUAGE

Embedded in OPPO's ColorOS 17 Common Components team, I helped define and ship a translucent, light - driven design language across foundational system components — shaping the visual and interaction foundation for the next major OS release.

Embedded in OPPO's ColorOS 17 Common Components team, I helped define and ship a translucent, light - driven design language across foundational system components — shaping the visual and interaction foundation for the next major OS release.

THE CHALLENGE

ColorOS 17 demanded a new visual paradigm: semi-transparent materials with depth, light physics, and layered elevation — all implementable at OS-level fidelity without sacrificing performance.

MY CONTRIBUTION

From early material exploration through to engineering spec handoff, I owned key components of the system — building frameworks, defining rules, and calibrating rendered builds to achieve pixel-accurate results.

SCOPE

Navigation bars, tab bars, dialogs, title bars, quick actions, system elevation — the full stack of ColorOS 17 core common components.

02 ROLE & RESPONSIBILITIES

WHAT I OWNED

01

01

Visual Direction & Material Studies

Visual Direction & Material Studies

Early explorations into material behavior and light physics — studying how light-edge strokes, caustic-like bottom highlights, and diffused glow could define a coherent translucent language for the OS.

Early explorations into material behavior and light physics — studying how light-edge strokes, caustic-like bottom highlights, and diffused glow could define a coherent translucent language for the OS.

MATERIAL DESIGN

MATERIAL DESIGN

EXPLORATION

EXPLORATION

VISUAL DIRECTION

VISUAL DIRECTION

02

02

5-level shadow hierarchy system.

5-level shadow hierarchy system.

Defined and documented a structured 5-tier elevation and shadow system for semi-transparent UI — establishing consistent opacity, blur, stroke, and glow values per tier, enabling systematic application across all components.

Defined and documented a structured 5-tier elevation and shadow system for semi-transparent UI — establishing consistent opacity, blur, stroke, and glow values per tier, enabling systematic application across all components.

SYSTEMS DESIGN

SYSTEMS DESIGN

ELEVATION

ELEVATION

SHADOW

SHADOW

03

03

Interaction Design & Quick Actions

Interaction Design & Quick Actions

Redesigned interaction paradigms aligned with the new translucent paradigm — including press-and-hold Quick Action behaviors and comprehensive placement and reachability rules across device form factors.

Redesigned interaction paradigms aligned with the new translucent paradigm — including press-and-hold Quick Action behaviors and comprehensive placement and reachability rules across device form factors.

INTERACTION DESIGN

INTERACTION DESIGN

QUICK ACTIONS

QUICK ACTIONS

REACHABILITY

REACHABILITY

04

04

Engineering Collaboration & Build QA

Engineering Collaboration & Build QA

Partnered with engineers to translate complex rendering effects (light-edge strokes, diffused glow, blur layers, caustic-like bottom light) into precise implementable specs. Calibrated production builds to achieve high-fidelity matches to design intent.

Partnered with engineers to translate complex rendering effects (light-edge strokes, diffused glow, blur layers, caustic-like bottom light) into precise implementable specs. Calibrated production builds to achieve high-fidelity matches to design intent.

COLLABORATION

COLLABORATION

RENDERING EFFECTS

RENDERING EFFECTS

SPEC HANDOFF

SPEC HANDOFF

03 KEY DELIVERABLES

WHAT SHIPPED

01

System Design Language Doc

A full written + visual specification covering the translucent material grammar — light-edge stroke values, diffused glow parameters, blur radii, and caustic bottom light rules — ready for OS-wide adoption by other component teams.

02

Elevation Token Library

A structured Figma token set encoding all 5 elevation tiers: named shadow styles, opacity values, blur radii, and stroke weights — directly consumable by designers and referenced in engineering handoff.

03

Annotated Component Specs

Fully annotated Figma files for navigation bars, tab bars, system dialogs, and title bars — covering all states, edge cases, and rendering parameters needed for engineering implementation.

04

Quick Actions Guideline

A standalone interaction guideline doc covering trigger thresholds, animation curves, haptic timing, placement grids, and reachability zones — applicable across all ColorOS 17 device form factors.

05

Render Calibration Reports

Side-by-side design-vs-build comparison reports used across multiple QA rounds — documenting delta values and approved calibration targets for light effects implemented in production.

04 ITERATION

CURRENT PROBLEM

PROBLEM 1 — MISSING SCENE

The current shadow hierarchy cannot be flexibly applied to all scenarios; in some cases, it is difficult to find a shadow hierarchy with a high degree of compatibility, which can easily result in a disjointed appearance.

PROBLEM 2 — USE CASE FOR SHADOW

There is a significant disparity in the visual effects between the different shadow levels, which can create a disjointed experience for users.

PROBLEM 3 — SHADOW AND LIGHT EFFECT

The shadow effects on some layers are too heavy and lack sufficient diffusion; when combined with the new materials, the texture lacks transparency, resulting in a less visually pleasing appearance.

05 OUTCOME

DESIGN LANGUAGE

WHAT WE DO

We settled on a translucent system appearance with a frosted texture called “Luminous Sea Stone.” While ensuring readability, this approach made the entire ColorOS interface more sophisticated and elegant

DESIGN 01 — LIGHT-EDGE STROKE

Light striking a dense edge doesn't stop at it — it gathers. The stroke is that gathering: a bright rim where the material ends, strongest where the light lands most directly. A rim like this only happens on something solid and translucent, so the surface reads as a substance rather than a fill.

The rim is adative, not fixed. Its brightness is taken from the wallpaper behind it, so the edge holds the same separation against a white photograph and a black one — a single fixed value would have vanished into the first and shouted on the second. That is what makes it a rule rather than a look: the boundary of a panel is never in question, whatever the user has set behind it.

DESIGN 02 — DIFFUSED GLOW

Light that gets into the material doesn't stay at the rim. It travels inward and gives out — bright just inside the edge, gone by the center. That falloff is what stops a large panel reading as a flat sheet of tint.

It also does the structural work, paired with the material blur behind it. The blur dissolves whatever sits behind the panel and buys the contrast; the glow lifts the interior so the result still reads as Condensed Light rather than a grey box. Content stays legible over anything, without the surface going dead.

DESIGN 03 — CAUSTIC BOTTOM LIGHT

Put polished stone on a table under a lamp and look underneath: there is a shadow, but there is also light — a pale bloom the stone returns to the surface, sitting on top of its own shadow.

Condensed Light does the same under every component. The shadow says the panel is above the surface; the returned light says it is above the surface and made of something that transmits. Shadow alone reads as a sticker. Shadow plus returned light reads as an object resting in space — which is what the elevation system is later built on.

DESIGN 04 — SHADOW LAYER

Re-sorted every component in the system into five elevation tiers, so each one has a shadow defined for it rather than the nearest approximation. Tuned strength and material tier by tier — light enough to sit comfortably over long sessions, distinct enough that the hierarchy still reads at a glance.

06 DESIGN SHOWCASE

FINAL DESIGN

NEXT PROJECT
Bluebono
CASE / 2026
UI/UX INTERNSHIP · OPPO

ColorOS 17

Core UI Design
ColorOS 17
COMPANY
oppo / ColorOS
DURATION
Sep 2025 — Jan 2026
TEAM
Common Components
ROLE
UI/UX Designer
01 — Overview

A new system design language

Embedded in OPPO's ColorOS 17 Common Components team, I helped define and ship a translucent, light-driven design language across foundational system components — shaping the visual and interaction foundation for the next major OS release.

THE CHALLENGE

ColorOS 17 demanded a new visual paradigm: semi-transparent materials with depth, light physics, and layered elevation — all implementable at OS-level fidelity without sacrificing performance.

MY CONTRIBUTION

From early material exploration through to engineering spec handoff, I owned key components of the system — building frameworks, defining rules, and calibrating rendered builds to achieve pixel-accurate results.

SCOPE

Navigation bars, tab bars, dialogs, title bars, quick actions, system elevation — the full stack of ColorOS 17 core common components.

02 — Role & Responsibilities

What I owned

01

Visual Direction & Material Studies

Early explorations into material behavior and light physics — studying how light-edge strokes, caustic-like bottom highlights, and diffused glow could define a coherent translucent language for the OS.

MATERIAL DESIGNEXPLORATIONVISUAL DIRECTION
02

5-Level Shadow Hierarchy System

Re-sorted every component in the system into five elevation tiers, so each one has a shadow defined for it rather than the nearest approximation. Tuned strength and material tier by tier — light enough to sit comfortably over long sessions, distinct enough that the hierarchy still reads at a glance.

SYSTEMS DESIGNELEVATIONSHADOW
03

Interaction Design & Quick Actions

Redesigned interaction paradigms aligned with the new translucent paradigm — including press-and-hold Quick Action behaviors and comprehensive placement and reachability rules across device form factors.

INTERACTIONQUICK ACTIONSREACHABILITY
04

Engineering Collaboration & Build QA

Partnered with engineers to translate complex rendering effects (light-edge strokes, diffused glow, blur layers, caustic-like bottom light) into precise implementable specs. Calibrated production builds to achieve high-fidelity matches to design intent.

COLLABORATIONRENDERINGSPEC HANDOFF
03 — Key Deliverables

What shipped

01
System Design Language Doc

A full written + visual specification covering the translucent material grammar — light-edge stroke values, diffused glow parameters, blur radii, and caustic bottom light rules — ready for OS-wide adoption by other component teams.

02
Elevation Token Library

A structured Figma token set encoding all 5 elevation tiers: named shadow styles, opacity values, blur radii, and stroke weights — directly consumable by designers and referenced in engineering handoff.

03
Annotated Component Specs

Fully annotated Figma files for navigation bars, tab bars, system dialogs, and title bars — covering all states, edge cases, and rendering parameters needed for engineering implementation.

04
Quick Actions Guideline

A standalone interaction guideline doc covering trigger thresholds, animation curves, haptic timing, placement grids, and reachability zones — applicable across all ColorOS 17 device form factors.

05
Render Calibration Reports

Side-by-side design-vs-build comparison reports used across multiple QA rounds — documenting delta values and approved calibration targets for light effects implemented in production.

04 — Iteration

Current problem

PROBLEM 1 — MISSING SCENE

The current shadow hierarchy cannot be flexibly applied to all scenarios; in some cases it is difficult to find a shadow hierarchy with a high degree of compatibility, which can easily result in a disjointed appearance.

PROBLEM 2 — USE CASE FOR SHADOW

There is a significant disparity in the visual effects between the different shadow levels, which can create a disjointed experience for users.

PROBLEM 3 — SHADOW AND LIGHT EFFECT

The shadow effects on some layers are too heavy and lack sufficient diffusion; combined with the new materials, the texture lacks transparency, resulting in a less visually pleasing appearance.

05 — Outcome

Design language

WHAT WE DO

We settled on a translucent system appearance with a frosted texture called “Luminous Sea Stone.” While ensuring readability, this approach made the entire ColorOS interface more sophisticated and elegant.

DESIGN 01 — LIGHT-EDGE STROKE

Light striking a dense edge doesn't stop at it — it gathers. The stroke is that gathering: a bright rim where the material ends, strongest where the light lands most directly. A rim like this only happens on something solid and translucent, so the surface reads as a substance rather than a fill.

The rim is adaptive, not fixed. Its brightness is taken from the wallpaper behind it, so the edge holds the same separation against a white photograph and a black one — a single fixed value would have vanished into the first and shouted on the second. That is what makes it a rule rather than a look: the boundary of a panel is never in question, whatever the user has set behind it.

DESIGN 02 — DIFFUSED GLOW

Light that gets into the material doesn't stay at the rim. It travels inward and gives out — bright just inside the edge, gone by the center. That falloff is what stops a large panel reading as a flat sheet of tint.

It also does the structural work, paired with the material blur behind it. The blur dissolves whatever sits behind the panel and buys the contrast; the glow lifts the interior so the result still reads as Luminous Sea Stone rather than a grey box. Content stays legible over anything, without the surface going dead.

DESIGN 03 — CAUSTIC BOTTOM LIGHT

Put polished stone on a table under a lamp and look underneath: there is a shadow, but there is also light — a pale bloom the stone returns to the surface, sitting on top of its own shadow.

Luminous Sea Stone does the same under every component. The shadow says the panel is above the surface; the returned light says it is above the surface and made of something that transmits. Shadow alone reads as a sticker. Shadow plus returned light reads as an object resting in space — which is what the elevation system is later built on.

DESIGN 04 — SHADOW LAYER

Re-sorted every component in the system into five elevation tiers, so each one has a shadow defined for it rather than the nearest approximation. Tuned strength and material tier by tier — light enough to sit comfortably over long sessions, distinct enough that the hierarchy still reads at a glance.

06 — Design Showcase

Final design

NEXT PROJECT
Bluebono
© 2026 Matthew Susupy1125@gmail.com