![Untitled UI v5.0](https://cdn.prod.website-files.com/6365d860c7b7a7191055eb8a/667cdf5716c72fb27714408f_v5-0.webp)
Typography variables and updated components!
We've released v5.0 of Untitled UI to support Figma’s exciting new features released at Framework 2024 and Config 2024. These updates include support for typography and effects variables, meaning variables are officially out of beta.
Typography variables allow you to define values such as font families, font weights, font sizes, and line heights and apply them consistently across your entire system. We’ve updated the Untitled UI to include these new typography and effects variables.
We also made significant improvements to core components, focus states, and effects styles, and added a bunch of useful new components and assets!
What’s new in version 5.0
As always, we won't cover every pixel, but here are the main updates:
- Carefully designed and easy-to-use typography variables (more on this below).
- Simple and powerful shadows and effects variables.
- Improved button components with subtle skeuomorphic effects (more on this below).
- New “focus” and “active” styles with updates across all components, notably buttons and inputs (more on this below).
- Improved and expanded placeholder logos (180+ high-quality logos to use in your designs or for your project/business).
- Big improvement to Input field, Textarea input field, and Input dropdown components to support a dynamic * to indicate when a field is required, as well as a help icon.
- Similarly, simplified Section label component and added a dynamic * to indicate when a section is required, as well as a help icon.
- Improved and simplified Date picker dropdown component.
- Added a disabled state to the Input dropdown component to match the Input field component.
- Improved featured icons and new “Gradient” style, as well as the addition of preferred values for icon instance swaps for faster changes.
- New Folder icon and Award components.
- Simplified and improved tabs components and new modern “Button minimal” style.
- Simplified Avatar component.
- Replaced every single bitmap (image) inside the files, including avatar styles, with improved and compressed images.
- Minor tweaks to color palette.
- Improved Table components with “first on top” canvas stacking for easier prototyping.
- Improved Tooltip component, adding text string and more dynamic resizing.
- Simplified and improved _Metric item components.
- Improved and updated documentation across all pages to new UI3 + updated images.
- Expanded Badge modern component to include full spectrum of colors.
- Removed several variables not needed with new focus and active state styles.
- Simplified and improved dozens of other components so they look nicer, are easier to use, and/or are more accessible + much more…
All of these updates are included for free in all three different versions of Untitled UI:
- Untitled UI PRO VARIABLES: Color (including dark mode!), spacing, radius, width, typography, and effects variables.
- Untitled UI PRO STYLES: Does not include variables for those who prefer to keep their workflow simple.
- Untitled UI PRO LITE: Our lightweight version of the full Untitled UI PRO STYLES kit. It’s 55% lighter and faster and is designed to include everything you need.
New skeuomorphic style components
Many elements in Untitled UI, including buttons and featured icons, have recently been updated with a subtle skeuomorphic style.
Skeuomorphism incorporates depth, shadows, and textures to simulate the physical world, making components like buttons more “real” looking and visually engaging. We’ve intentionally kept this effect as minimal and subtle as possible.
Here’s an example with buttons:
![Buttons with skeuomorphism](https://cdn.prod.website-files.com/6365d860c7b7a7191055eb8a/668ca8ada99f0698bd38ec19_Buttons%20with%20skeuomorphism.webp)
Skeuomorphic design was popular in the early days of digital interfaces, especially with the introduction of Apple iOS. Over time, UI and web design have shifted towards minimalism and flat design.
Recently, skeuomorphism has made a noticeable comeback. Is it a trend? Yes, but so are many visual decisions in UI design. As long as accessibility fundamentals are maintained, we’re all for it.
As you can see in the example above the skeuomorphic effects we’ve added are extremely subtle and simple. They are achieved with a couple of shadow effects:
![Skeuomorphic effects](https://cdn.prod.website-files.com/6365d860c7b7a7191055eb8a/667e6000569adb0d3ce56165_Skeuomorphic%20effects.webp)
How to remove skeuomorphic effects
If you prefer the flat style of Untitled UI v4.0 buttons, it’s incredibly easy to remove skeuomorphic effects from your buttons and components. We’ve set it up that way.
These effects are set up as individual effects styles. Just change the effect style at the master component level to add or remove skeuomorphic effects:
![Remove skeuomorphic effects](https://cdn.prod.website-files.com/6365d860c7b7a7191055eb8a/668ca8e254d634a5a94fec02_Remove%20skeuomorphic%20effects.webp)
You can even delete the shadow-xs-skeuomorphic effect style if you don’t need it!
Why the new focus state style?
Another major visual update to Untitled UI is a new “focus” and “active” state style:
![Focus state examples](https://cdn.prod.website-files.com/6365d860c7b7a7191055eb8a/667e6023aab9b91ed5410f43_Focus%20state%20example.webp)
A focus ring (also known as a "focus indicator") identifies the currently focused element on your page. Focus rings are important for accessibility when providing interfaces for users who are unable to use a mouse. Focus rings act as a stand-in for their mouse pointer.
The new focus state style is much more noticeable, switching from your brand-100 color to brand-500. We decided on this update for a few reasons:
- It’s much better for accessibility. The new focus state style is much higher contrast and easier to identify for low-vision users (who are most likely to need it). @kajetanizycki created the perfect low vision simulation/comparison.
- Simpler to use and for developers to implement. While Figma doesn’t offer the best support for focus:ring styling or multiple effects styles, CSS does. The new focus state style is simpler to use both in Figma and development.
- Simpler effects styles and variables. The new focus state style allows us to simplify variables into just two aliases; focus-ring and focus-ring-error.