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









ColorOS 17

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.
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.
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.
Navigation bars, tab bars, dialogs, title bars, quick actions, system elevation — the full stack of ColorOS 17 core common components.
What I owned
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.
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.
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.
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.
What shipped
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.
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.
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.
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.
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.
Current problem
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.



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



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.



Design language
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.



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.


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.


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.


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.



Final design







