00Internship
ColorOS 17
Core UI Design Internship
Company
oppo · ColorOS
Duration
Sep 2025 – Jan 2026
Team
Common Components
Role
UI/UX Designer
01Context
What is ColorOS 17
ColorOS 17 is the operating system for OPPO’s (including OnePlus and realme) new generation of smart devices, designed to deliver a smoother, smarter, and more user-friendly experience. Today, ColorOS has more than 770 million active users in over 90 countries and regions.
02Overview
A new system design language
Embedded in OPPO’s ColorOS 17 Common Components team, I helped define and ship ColorOS’s new translucent, light-driven design language — the material, light and elevation system that defines the whole OS for the years ahead, much as Liquid Glass does for iOS. It was designed to serve more than 770 million active ColorOS users.
770M+
ColorOS users the new language ships to
13
Components I owned across all five layers
4 → 1
Translucent materials unified into one
5+
OPPO teams that adopted it, from Lock Screen to in-car UI
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
ColorOS 17’s whole design language — material, light and elevation — down to 13 components on all five layers, from multitasking windows and Fluid Cloud to the navigation bar, cards and switches.
03Role
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.
Material design · Exploration · Visual direction
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.
Systems design · Elevation · Shadow
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.
Interaction design · Quick actions · Reachability
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.
Collaboration · Rendering effects · Spec handoff
04Deliverables
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.
05Iteration
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.
06Outcome
What changed
One material, everywhere
ColorOS 16 had about four different-looking translucent materials — the lock screen looked one way, Control Center another — and the mismatch was its most common user complaint. ColorOS 17 unifies them into one.
Five tiers instead of four
Most of the new controls float, so ColorOS 16’s four shadow tiers became five, with a new floating layer. Each tier was re-tuned — light diffusion, shadow reach and weight — to read at a glance and stay comfortable over long sessions.
Across the whole system
The new layers and material run wherever a system control appears: Control Center, the navigation bar, floating buttons, the lock screen’s camera, flashlight and music player, and the Breeno assistant.
A foundation for 5+ teams
Motion, Lock Screen, in-car UI, Fluid Cloud and home-screen widgets all build on it. Each team tunes only a few exposed parameters — light-edge strength, cast shadow, inner shadow — to balance its scene, so the language stays one.
Matched on device
10+ rounds of revisions kept the material beautiful and legible on any background. With engineering, I broke each effect into its layers — light edge, inner shadow, cast shadow — and rebuilt it in on-device COE tuning files until builds matched the Figma design.
Shipped in ColorOS 17
Unveiled on September 17, 2026 at OPPO’s developer conference and rolling out to 130+ device models across OPPO, OnePlus and realme.
07Showcase
Final design
00Internship
ColorOS 17
Core UI Design Internship
Company
oppo · ColorOS
Duration
Sep 2025 – Jan 2026
Team
Common Components
Role
UI/UX Designer
01Context
What is ColorOS 17
ColorOS 17 is the operating system for OPPO’s (including OnePlus and realme) new generation of smart devices, designed to deliver a smoother, smarter, and more user-friendly experience. Today, ColorOS has more than 770 million active users in over 90 countries and regions.
02Overview
A new system design language
Embedded in OPPO’s ColorOS 17 Common Components team, I helped define and ship ColorOS’s new translucent, light-driven design language — the material, light and elevation system that defines the whole OS for the years ahead, much as Liquid Glass does for iOS. It was designed to serve more than 770 million active ColorOS users.
770M+
ColorOS users the new language ships to
13
Components I owned across all five layers
4 → 1
Translucent materials unified into one
5+
OPPO teams that adopted it, from Lock Screen to in-car UI
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
ColorOS 17’s whole design language — material, light and elevation — down to 13 components on all five layers, from multitasking windows and Fluid Cloud to the navigation bar, cards and switches.
03Role
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.
Material design · Exploration · Visual direction
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.
Systems design · Elevation · Shadow
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.
Interaction design · Quick actions · Reachability
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.
Collaboration · Rendering effects · Spec handoff
04Deliverables
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.
05Iteration
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.
06Outcome
What changed
One material, everywhere
ColorOS 16 had about four different-looking translucent materials — the lock screen looked one way, Control Center another — and the mismatch was its most common user complaint. ColorOS 17 unifies them into one.
Five tiers instead of four
Most of the new controls float, so ColorOS 16’s four shadow tiers became five, with a new floating layer. Each tier was re-tuned — light diffusion, shadow reach and weight — to read at a glance and stay comfortable over long sessions.
Across the whole system
The new layers and material run wherever a system control appears: Control Center, the navigation bar, floating buttons, the lock screen’s camera, flashlight and music player, and the Breeno assistant.
A foundation for 5+ teams
Motion, Lock Screen, in-car UI, Fluid Cloud and home-screen widgets all build on it. Each team tunes only a few exposed parameters — light-edge strength, cast shadow, inner shadow — to balance its scene, so the language stays one.
Matched on device
10+ rounds of revisions kept the material beautiful and legible on any background. With engineering, I broke each effect into its layers — light edge, inner shadow, cast shadow — and rebuilt it in on-device COE tuning files until builds matched the Figma design.
Shipped in ColorOS 17
Unveiled on September 17, 2026 at OPPO’s developer conference and rolling out to 130+ device models across OPPO, OnePlus and realme.
07Showcase