Throughout this new process at KDE, I believe I have failed to clearly state what Ocean is and what it means for the future for Plasma user interface and experience.
In this post, I will try to shed some light into this and hopefully it’s easier for new people interested in this project.
Why the Confusion?
I think a lot of the confusion primarily comes from my part in showing graphics first and interface later.
Graphics tend to attract a lot of attention. So much that it swallows other narratives about what Ocean is. It’s natural for our users to want to know more and accept that the graphics are the whole story.
Spoiler… it’s not just graphics 
How Should We Think of Ocean?
Ocean is many things, let me list them out:
- Ocean Design System
- Ocean Widget Style
- Ocean Font
- Ocean Icons(Icon Pack)
- Ocean Plasma Style
- Ocean Color Scheme
I think this is another reason why there is confusion out there. I have given a few talks on this as well, but I also see how it’s confusing.
In simple terms, Ocean is a new graphic design platform for the Plasma Desktop.
This new platform aims, first, to organize the way graphic design for Plasma is achieved. As you may know, designers like me, tend to be pretty creative and unbound. We give free range to creativity and we like to break norms.
This is a problem, because if we want to make graphics for a computer system, such as Plasma, we need to organize our creativity in way that developers can understand.
For this reason, in recent years, a modern way to organize creativity for computers was invented by applications like Sketch, Figma, and Adobe XD.
In these applications SVG is the graphic of choice. SVG is a set of coordinates that tell the system how to draw shapes on the screen. It’s versatile enough that SVG code can be read and tweaked by designers and developers alike. It can be stretched without losing quality, yadah, yadah, yadah… You know the rest.
This new wave of applications work with SVG as collections or repeatable graphics interconnected with each other. They use systems of “Components” and “Variants”. Given that computer UI is generally very repetitive, these components save designers time in building more copies of the same graphic with only slight modifications, let’s say for states such as default, hover, selected, etc.
These design systems help bring the world of UI development into the graphic design applications. Many developers are very used to working with graphical components, but only until recently were designers able to work with them in a flexible graphical way.
KDE Plasma has never had a system like this to organize design around the UI. Because of this, designers haven’t really made a ton of inroads into the system and this limits users in the way that we can deliver design for them. In essence, we designers, were never organized enough to provide a proper, development-ready, graphic design that could be used for Plasma.
This is where Ocean comes in. We took up the idea of creating a design system for Plasma that accounts for most, if not all, of the necessary graphical building blocks that developers could use, that preserve consistency between graphics and code, and deliver a cohesive experience for users.
By doing this, our hope is that graphic designers that are used to working with design systems can join our team and help us go even further.
On the developer side, a design system is a much more clear way of communicating component organization. Developers can more easily understand how buttons are made, what colors are used, what typography levels are on screen, etc. We do this by creating a series of graphic tokens that describe their use in more detail.
CSS is also involved, even though we may not support it, applications like Figma and Penpot have the ability to represent component code in CSS terms that others can read. In addition to these tokens, we create a series of foundational tokens where we declare our colors, typography, shadow levels and composition, blur levels, etc. Everything that users would need to see on the screen.
Ok, But What About the Graphics You Keep Showing?
During the first part of creating a design system, we noticed something pretty meaningful. Breeze and other previous themes, while they work, they don’t have any reflection in a design system. Therefore, designers have a hard time completing the puzzle for a good design system that accounts for Breeze. With any attempt, we would be completing so much of a missing puzzle that we would create something new anyway, just to replicate a style in Penpot, for example.
Because of this, we decided to create a new style called Ocean and any style is composed of many parts, listed above.
Because of this, we created:
- Ocean Icons (In progress)
- Ocean Plasma Style (Complete in Penpot)
- Ocean Font (In progress)
- Ocean Style (Complete in Penpot)
- Ocean Color Scheme (Complete-ish, needs more testing)
And one little important detail, it doesn’t matter so much how Ocean style looks. Why?
Because through a design system for graphic designers, we have the ability to distribute our system for free to anyone that wants to use it. Graphic designers can tweak the design tokens that Plasma can understand and by doing that, they can more easily build a Plasma Style on their own in a way that is cohesive, thoughtful, complete. We then give those elements to the developer team that would help us execute the design. Hence why I say that Ocean is a design platform.
Still, we created a new style in graphical form and we are working with the developer team to execute this style, using the design system tokens and components, in the same way that the designer intended.
Our current focus is on icons, particularly application icons. This is just one of the many parts that compose Ocean design. A few months ago we completed a round of design that created monochrome Ocean icons. These icons are functional in nature and much easier to put together. However, we knew that app icons take longer because they are colorful and require lots of time and styling.
Icons
My recent posts showcase the progress on these icons. To be more clear about how we are doing this icon design element, here is a process:
- Formalize the visual system
- Define strict rules for perspective, lighting, shadows, gloss, depth, materials, and color usage so all icons feel like one coherent family.
- Strengthen semantic readability
- Ensure each icon immediately communicates the app’s purpose, especially at small sizes. Avoid abstraction that weakens recognition.
- Improve visual hierarchy
- Reduce competing elements and make each icon have one clear focal point with cleaner foreground/background separation.
- Tighten color discipline
- Use fewer competing colors, control saturation more carefully, and keep palettes more consistent across the set.
- Be more selective with stylistic quirks
- Avoid asymmetry, misalignment, or unusual perspectives unless they clearly improve recognition or composition.
- Standardize depth and rendering behavior
- Keep extrusion, internal shadows, dimensionality, and lighting logic consistent across all icons.
- Shift from per-icon experimentation to system-level art direction
- Prioritize cohesion and consistency over making every icon individually novel or visually surprising.
…and we are in step 3 of the process for these icons. We are moving them from rough mockups and sketches into more formalized shapes. At this stage, you should not expect a lot of color or shape cohesion. After this pass comes a time of definition. We restrict our colors even more, simplify shapes for impact, remove or redo icons, etc. It’s a major review. We expect to do this along with the community.
We also decided to not create icons for third parties. This makes the amount of app icons to make much smaller. This also makes it easier to think about what our icons should look like going forward.
All in all, Ocean is a platform composed of many parts. Our current design focus is set on completing the icon pack while the rest of the style is preparing for development.
I hope this makes it easier to understand and I am happy to answer any questions.
]]>
]]>
]]>
]]>