Aesthetic/accessibility improvements + more!
We've released an update to Untitled UI.
This update is a little different from previous releases... but it's one we've wanted to do for a while. While there are a few new components as always, the majority of changes are subtle aesthetic and accessibility improvements.
What’s new in version 2.9
We won't cover every tiny detail, but here are the main updates:
- Refactored and simplified all badge components (removed base component) + added new styles 🔥
- New content components for blog posts, content sections, and rich text 🔥. This is a simple but scalable system of rich text components (headings, paragraphs, quotes, and images) so you can consistently adjust content styling and padding everywhere at once, kind of like CSS. This is something we haven't seen something like this done before in Figma.
- Text default has been changed from gray-500 to gray-600. While gray-500 text on a white background is WACG 2.0 accessible with a contrast ratio of 4.95 (AA), gray-600 is significantly higher-contrast at 7.65 (AAA).
- Improved styling of all dropdown components, notably menu item hover states which now have independent padding.
- Headings across all components and layouts are now semibold by default. This includes obvious section headers and card headers but also spans across most smaller components (e.g. avatar label groups, charts, checkbox groups).
- Similarly, buttons are now semibold by default.
- All cards have a slightly larger 12px corner radius by default.
- + Many more small improvements...