However, the evolution of interfaces, variable typography, dark modes, and the need for truly perceptual accessibility have revealed an important limitation:
meeting WCAG 2 does not always mean text is genuinely readable.

This is where APCA (Accessible Perceptual Contrast Algorithm) comes in, the new approach shaping the future of visual accessibility and forming part of the transition toward WCAG 3.

The problem with contrast in WCAG 2

The current WCAG 2 model:

• Uses a fixed mathematical ratio between colors.
• Does not account for font size or font weight.
• Treats light-on-dark the same as dark-on-light.
• Can approve combinations that are difficult to read in practice.

This creates a common scenario in many digital products:

Interfaces that are “accessible on paper,” but not necessarily comfortable for real people.

What changes with APCA

APCA introduces a fundamental shift:
moving from a mathematical measurement to a perceptual measurement.

Instead of ratios like 4.5:1, APCA uses a scale called Lc (Lightness Contrast) that:

• Is based on how the human eye actually perceives contrast.
• Considers font size, font weight, and polarity.
• Enables different rules depending on the text type.
• Aligns with the future direction of WCAG 3.

The result is simple but powerful:

APCA measures real readability, not just technical compliance.

Why this is critical for Design Systems

For teams building Design Systems, the impact is immediate:

1. It redefines color tokens

It is no longer enough to “pass 4.5:1.”
Colors must now ensure comfortable reading within real typographic contexts.

2. It improves real product accessibility

Adopting APCA means:

• Less hard-to-read text.
• Better experiences in dark mode.
• More inclusive interfaces for users with low vision.

3. It prepares organizations for WCAG 3

APCA is not a passing trend.
It is the foundation of the next accessibility model coming with WCAG 3.

Adopting it early reduces:

• Technical debt
• UI rework
• Future compliance risk

WCAG 2 vs APCA in one sentence

WCAG 2 measures contrast.
APCA measures readability.

And in user experience, that difference changes everything.

Conclusion

Digital accessibility is entering a new era. We are moving from static rule-checking toward designing experiences that can truly be read.

Adopting APCA today does not mean abandoning WCAG 2 immediately, it means:

• understanding its limitations
• improving the visual quality of products
• preparing for the standard that is coming

Because in accessibility, the real goal was never to pass a test.

The real goal has always been that people can read.

The post APCA vs WCAG: why the future of visual accessibility has already changed appeared first on Roger Romero's Blog.

In this article, we’ll explore when and how to use these three elements within a design system and share the best and worst practices for using icons in each of them.

Badge

What is a Badge and When to Use It?

A badge is a small visual element that typically appears on or near a component, such as an icon or product card, to display relevant information like a count or status. Its main function is to highlight concise information that requires immediate attention without disrupting the interface’s flow.

When to use it:

• Notification or count alerts: Use badges to show the number of pending items or actions, such as unread messages, items in a shopping cart, or available updates.
• Status indicators: To signal a relevant state or category, such as the priority of a support ticket or product availability (e.g., “In stock” or “Out of stock”).

Examples:

• A bell icon with a badge showing the number of new notifications.
• A red badge with a number on an inbox icon indicating unread messages.

Best Practices for Icons in Badges:

• Clear visuals: Use simple and recognizable icons that immediately convey the action or status. For example, an envelope for unread emails or an alert symbol for warnings.
• Proper sizing: Ensure the icon is large enough to be visible in the badge’s small space, but not too large to overwhelm it.
• Effective contrast: Make sure the icon contrasts well with the badge’s background so that the information is legible.

Worst Practices:

• Overloading the space: Avoid combining text, icons, and numbers all at once in a small badge. Keep the design simple and focused.
• Ambiguous icons: Don’t use icons that require interpretation or that aren’t universally understood. A confusing icon will frustrate the user and defeat the badge’s purpose.

Ribbon

What is a Ribbon and When to Use It?

A ribbon is a banner or strip that overlays content, such as an image or product card, to highlight a special feature or promotion. Its goal is to catch the user’s attention on something important, like an offer or a new product.

When to use it:

• Highlight promotions or special attributes: Use ribbons when a product or content needs to be emphasized with labels like “On Sale,” “New,” “Exclusive,” or “Limited.”
• For featured products: Emphasize the most popular products, temporary promotions, or new releases.

Examples:

• A ribbon that says “New” on the corner of a product card.
• A banner highlighting a discount offer over a product image in an online store.

Best Practices for Icons in Ribbons:

• Complement the text: Icons in ribbons should reinforce the message. For example, a star icon could accompany a ribbon that highlights a “Featured Product.”
• Simplicity: Since the ribbon already draws attention, the icon should be subtle and not steal focus from the primary content.
• Visual consistency: Ensure the icon’s style matches the rest of the design system to maintain visual coherence.

Worst Practices:

• Redundant icons: Don’t add icons that merely repeat what the text already conveys. If the ribbon says “New,” adding an icon might be unnecessary.
• Overloading with icons: Avoid using large or detailed icons that can make the ribbon look cluttered or unclear.

Notifications

What is a Notification and When to Use It?

A notification is a pop-up or persistent message in the interface that informs the user about important events or required actions. Notifications can be interactive (allowing the user to close or respond) or passive (informative, with no action required).

When to use it:

• To inform about important changes: Notifications are useful when you need to alert the user about system changes, such as a new update, message, or completed event.
• To request user actions: Use notifications when the system requires the user to take a specific action, like confirming a purchase, reviewing a message, or accepting a condition.

Examples:

• A banner at the top notifying the user of a successful update.
• A pop-up notification reminding the user of a pending task.

Best Practices for Icons in Notifications:

• Clear, informative icons: Use icons that help users quickly identify the type of notification. A checkmark icon can indicate success, an exclamation mark a warning, and an “X” an error.
• Visual hierarchy: Icons shouldn’t compete with the main content of the notification. Keep the icon size proportional and aligned with the content.
• Appropriate colors: Ensure the icon’s color matches the notification’s context. Green icons should indicate success, yellow should indicate warnings, and red should indicate errors or issues.

Worst Practices:

• Overloading with icons: Don’t add unnecessary or decorative icons to a notification that already contains sufficient informative text. This can overwhelm the user visually.
• Inconsistent icon colors: Avoid using incorrect icon colors that don’t align with the notification type. A red icon for a success message can confuse users.

Conclusion: When and How to Use These Elements

• Badges are ideal for displaying concise, direct information, such as counts or statuses. Use them when you need to highlight numbers or updates without interrupting the user experience.
• Ribbons are effective for drawing attention to featured products or characteristics. They are visually appealing and should be used sparingly to avoid cluttering the interface.
• Notifications should be used when the user needs to be informed or alerted about important events. Make sure they are clear and non-intrusive, respecting the user experience.

In all cases, the effective use of icons is crucial. Icons should complement rather than overload, and always be accessible and understandable. By following these practices, you can ensure that these components function effectively within a design system, providing an intuitive and pleasant user experience.

If you’re developing a UI design system, remember that balancing functionality and aesthetics is essential. Well-implemented badges, ribbons, and notifications, along with the appropriate use of icons, can make an interface not only visually appealing but also highly functional and accessible.

The post How to use badges, ribbons and notifications in user interface designs appeared first on Roger Romero's Blog.

Common breakpoints and configurations

In this article, I’ll recommend the best breakpoints for your website, considering three main categories: mobile devices, tablets, and desktops. Below is a reference table with the minimum and maximum width values for each range, along with the recommended margins and gutters for optimal design:

These values not only ensure a well-structured design but also help maintain visual consistency across a variety of devices, optimizing the user experience.

Breakpoints for Mobile Devices: Extra Small (xs) and Small (sm)

Mobile devices account for the majority of global web traffic, so it is crucial to prioritize responsive design for small screens. The xs and sm breakpoints are essential to ensure that your site is accessible and user-friendly on mobile devices.

• Extra Small (xs): 360px – 575px
  This breakpoint covers smaller mobile devices, such as lower-end phones or those with compact screens. It’s important to optimize interactive elements like buttons and menus to make them easily accessible and readable on small screens.
• Small (sm): 576px – 767px
  This range includes most modern smartphones with larger screens. At this point, you can start working on slightly wider designs and display more content without compromising readability or usability.

What to adjust on mobile?

• Font size and buttons: Ensure that buttons are large enough to be tapped with a finger and text is legible without the need for zooming.
• Image optimization: Use lower-resolution images to reduce load times and improve user experience.
• Vertical layout: Most mobile devices are used in portrait mode, so it’s important that your design works well in this orientation.

Breakpoint for Tablets: Medium (md)

Tablets require an intermediate approach, as their screens are larger than phones but smaller than desktops. The md breakpoint is ideal for these types of devices.

• Medium (md): 768px – 1024px
  This range covers most tablets, such as the iPad in portrait mode. It’s a key point to adjust the design and offer a user experience that takes advantage of the larger screen without complicating navigation.

What to adjust on tablets?

• Increase screen space usage: Take advantage of the larger screen to display more content without overloading the interface.
• Usability in landscape mode: Ensure that the site works well in both vertical and horizontal orientations, as users may rotate the device to view content more comfortably.

Breakpoints for Desktops: Large (lg) and Extra Large (xl)

The lg and xl breakpoints are used for larger screens, such as laptops and desktop monitors. Here’s where you can maximize the use of available screen space.

• Large (lg): 1025px – 1365px
  This breakpoint is suitable for most laptops. It allows for expanding the design and displaying more content on the screen without the need for excessive scrolling.
• Extra Large (xl): 1366px – 1440px
  This range covers large desktop screens, such as high-resolution monitors. At this point, it’s important to optimize the layout to take full advantage of the screen space without cluttering the interface.

What to adjust on desktop?

• Column layout: On larger screens, you can use a multi-column structure to present more information simultaneously.
• High-resolution images and graphics: Increase the resolution of images and graphics to take full advantage of high-definition displays.

Conclusion

Using breakpoints such as xs, sm for mobile, md for tablets, and lg and xl for desktops will help you create a responsive design that provides an optimal experience across all platforms. By adjusting margins and gutters as suggested in the table, you can ensure that your website not only looks good but also offers a consistent and smooth user experience across different devices.

Responsive design is not just a trend; it is a necessity in modern web development. By carefully planning your breakpoints and ensuring each device has an optimized experience, your website will be ready to perform well and be accessible to all users.

Figma: https://www.figma.com/community/file/1416212487552660211/grid-system

The post The right breakpoints for a website: Mobile, tablet and desktop appeared first on Roger Romero's Blog.

Understanding the Structure of Design Tokens

To structure an efficient design token system, it is useful to break tokens down into different layers of abstraction. This allows greater clarity when naming and managing styles across different components and systems. Below, we break down the structure based on the hierarchy shown in the main image, where tokens are divided into four major groups: Namespace, Object, Base, and Modifier.

Namespace: The Starting Point of the Structure

The namespace is the first layer of a design token system. Its function is to encapsulate a set of tokens under the same space, providing a clear organizational framework. In the image, three main categories are shown within Namespace:

• System: Here we find the prefix used as an acronym to identify the system “nds” (Name of the Design System).
• Theme: This focuses on design customization, allowing for theme switching. Examples of subcategories are brand (for brand-related tokens) and mode (for modes such as dark or light).
• Domain: A category aimed at dividing tokens by user type or domain, such as public, partner, consumer, internal, or business.

Each of these subcategories allows the same token system to be applied across different contexts or products without losing consistency.

Object: Defining System Elements

The next level is Object, which allows tokens to be grouped according to the type of object they affect. The main categories of this section include:

• Group: Covering generic groupings such as form or typography.
• Component: Specific elements like buttons (button) or links (link).
• Element: The smaller parts as icon or text children of the components

This organization ensures that tokens can be applied to any element of the design system in a clear and understandable way, from a complete component to a small icon or block of text.

Base: Defining Key Properties

The Base layer defines the fundamental properties that tokens control. Here, we find categories such as:

• Category: Grouping properties like color, font, spacing, sizing, border, opacity, shadow, among others.
• Concept: Referring to more abstract interaction concepts such as action, feedback, visualization, or display.
• Property: Specifies which property of the element or component the token is affecting. For instance, properties like background, foreground, border, family, size, weight, line-height, letter-spacing, text-case, and text-decoration are examples of how specific aspects of an element’s design can be fine-tuned.

This combination of Category, Concept, and Property within the Base layer provides a powerful way to describe what visual or behavioral aspects the tokens control, from basic visual properties like color and spacing to abstract concepts like action or feedback.

Modifier: Customizing Variations and States

Finally, we have the Modifier layer, which allows specifying variations, states, and modes for components. The main subcategories are:

• Variant: Tokens that control variations such as primary, secondary, tertiary, and other types like information, warning, error, and success.
• State: Describes interactive states like default, hover, focus, active, visited, or disabled.
• Scale: Includes adjustments for size and weight such as t-shirt sizes (lg,md,sm), numerical scales (1,2,3), weight (light,regular,bold), or tone (dark,medium,light).
• Mode: Tokens that define different display modes, such as on-dark or on-light.

This level allows flexibility for quickly applying modifications to components in different states or contexts, such as when a button transitions from its default state to a hover or focus state.

Practical Examples of Applied Design Tokens

In the second image we see examples of how these categories are applied to create specific token names that are functional and clear. Through the composition of different hierarchical levels, tokens are able to precisely describe aspects of any design element.

Example 1: nds-typography-display-lg

This token describes a specific font style (size) to be used in the display typography. It is designed for application to text. Let’s break it down:

• nds: Indicates the namespace, in this case, “Name of the Design System”
• typography: The object that this token affects, in this case, typography.
• display: Describes the purpose or concept for this token, referring to display text.
• lg: A scale modifier specifying that this is large-sized text.

Example 2: nds-component-button-color-background-primary-default

Another real-world token example shows how to describe the background color of a primary button in its default state:

• nds: Indicates the namespace, in this case, “Name of the Design System”
• component-button: The object it affects, in this case, a button component.
• color-background: The property it describes, which is the background color.
• primary: The button is of the primary variant.
• default: The state modifier indicating that this is the default state for the button.

Conclusion: The Importance of Organization in Design Tokens

By structuring a design token system in this way, you get a scalable, reusable, and easy-to-understand system, which is crucial for maintaining a consistent design system over time. The provided examples demonstrate how a clear hierarchy allows tokens to precisely describe all visual aspects of a system, from colors and fonts to states and modes.

This approach also facilitates collaboration between design and development teams, as everyone works under a common and understandable language, ensuring consistency across the digital ecosystem.

The post How to Structure an Effective Design Token System appeared first on Roger Romero's Blog.

There are several typographic scales used in web and mobile design, and here are some of the most common ones:

The Importance of Typographic Scale on the Web

On the web, typographic scale is essential for guiding the user through content in a clear and coherent manner. Since the web is a visual communication medium, typographic scale helps create a visual hierarchy that makes reading and navigation easier.

The Ideal Typographic Scale for the Web

The most commonly used typographic scale on the web is the Major Third (1.250), as it provides a good balance between readability and visual hierarchy. This scale is based on the 5:4 ratio, resulting in a gradual and harmonious increase in font sizes.

Applying Typographic Scale on the Web

To apply typographic scale on the web, it’s important to consider visual hierarchy and readability. Use font sizes that scale logically and predictably, and adjust the scale as needed to accommodate different screen sizes and pixel densities.

The Major Third is popular on the web because:

• It provides a good balance between readability and visual hierarchy: The Major Third allows for creating a clear and consistent visual hierarchy, making reading and navigation easier on the web.
• It is flexible and adaptable: The Major Third can be easily adjusted to fit different screen sizes and pixel densities.
• It is compatible with web design guidelines: The Major Third aligns with the web design guidelines of major platforms, such as Google’s Material Design and Apple’s Human Interface Guidelines.

Here’s an example of how the Major Third would look on the web:

Remember that the choice of typographic scale depends on the design and user experience you want to achieve on the web.

The Importance of Typographic Scale in Mobile Applications

In mobile applications, typographic scale is crucial for creating an intuitive and appealing user experience. Since mobile screens are smaller than web screens, the typographic scale must be carefully chosen to ensure readability and usability.

The Ideal Typographic Scale for Mobile Applications

The most commonly used typographic scale in mobile applications is the Major Second (1.125), as it provides a good balance between readability and visual hierarchy on small screens. This scale is based on the 9:8 ratio, resulting in a gradual and harmonious increase in font sizes.

Applying Typographic Scale in Mobile Applications

To apply typographic scale in mobile applications, it’s important to consider readability and usability. Use font sizes that scale logically and predictably, and adjust the scale as needed to accommodate different screen sizes and pixel densities.

The Major Second is popular in mobile applications because:

• It provides a good balance between readability and visual hierarchy on small screens: The Major Second allows for creating a clear and consistent visual hierarchy on small screens, making reading and navigation easier in mobile applications.
• It is flexible and adaptable: The Major Second can be easily adjusted to fit different screen sizes and pixel densities.
• It is compatible with mobile design guidelines: The Major Second aligns with the mobile design guidelines of major platforms, such as Google’s Material Design and Apple’s Human Interface Guidelines.

Here’s an example of how the Major Second would look in mobile applications:

Remember that the choice of typographic scale depends on the design and user experience you want to achieve in the mobile application.

The Line Height in the Typographic Scale

Implementing a good line-height (or leading) for typographic scales involves balancing readability, visual hierarchy, and the overall aesthetic of your design. Here are some best practices to consider when setting line-height for different typographic scales:

General guidelines for Line Height

• Body Text: The line-height for body text should typically be between 1.4 and 1.6 times the font size. This range provides enough space between lines for readability, especially for longer passages of text.
• Headings: Headings generally require less line-height compared to body text, typically around 1.2 to 1.4 times the font size. This tighter spacing helps to visually group the heading with its related content.

Line Height adjusted to screen size

• Mobile: On smaller screens, reduce the line height slightly (e.g., 1.2 – 1.4 for body text) to accommodate limited vertical space while ensuring legibility.
• Desktop: You can afford to use slightly higher line heights on larger screens (e.g., 1.4 – 1.6 for body text) to create a more open and airy feel.

The Line Height context matters

• Dense Content: For text-heavy designs, like articles or reports, opt for a larger line-height within the recommended range to avoid visual clutter.
• Minimalist Designs: In minimalist or highly visual designs, you might opt for a tighter line-height to maintain a clean and compact appearance.

Accessibility considerations for the Line Height

Ensure that your line-height choices do not compromise accessibility. Text should be easy to read, especially for users with visual impairments. WCAG guidelines recommend a line-height of at least 1.5 times the font size for body text.

Test and iterate the Line Height

Always test your typographic settings across different devices and screen sizes. What works well on a desktop might need adjustment on a mobile device or a different browser.

Conclusion

Choosing the right typographic scale is crucial for creating a consistent and appealing user experience on the web and mobile applications. By understanding the most commonly used typographic scales in each medium, you can create design systems that guide the user through the content in a clear and coherent manner.

The post Typographic Scales in Design Systems appeared first on Roger Romero's Blog.

Consistency: The Cornerstone of Design Systems

One of the primary goals of a design system is to establish a consistent visual language across all digital products and platforms. A naming convention for design tokens ensures that everyone involved in the development process, from designers to developers, understands and utilizes the tokens in a coherent manner. This consistency not only enhances the user experience but also streamlines the development process, reducing the time and effort required to maintain and update the design system.

Maintainability: Keeping Your Design System Future-Proof

As design systems evolve and grow more complex, maintainability becomes a critical factor. Descriptive and logically structured token names make it easier to understand their purpose and application, facilitating the maintenance of the design system over time. Developers and designers can quickly comprehend what each token represents and how it should be utilized, minimizing the risk of introducing inconsistencies or errors.

Scalability: Embracing Growth and Complexity

Design systems are meant to scale and accommodate new components, patterns, and functionalities as product requirements evolve. A well-defined naming convention helps maintain the organization and structure of tokens, enabling the design system to adapt and grow efficiently. As new elements are introduced, they can seamlessly integrate into the existing system, ensuring a cohesive and consistent experience for designers and developers alike.

Collaboration: Fostering Teamwork and Communication

In today’s collaborative development environments, clear and established naming conventions facilitate effective communication and collaboration among teams and individuals. Everyone involved can accurately and consistently refer to tokens, reducing confusion and misunderstandings. This shared understanding fosters a more productive and efficient workflow, enabling teams to focus on delivering high-quality products rather than deciphering ambiguous token names.

Automation: Streamlining Processes and Workflows

Many development and design tools and processes rely on the ability to analyze and process token names in an automated manner. A well-structured naming convention facilitates integration with these tools and processes, allowing for a more efficient and automated workflow. From generating documentation to performing automated tests, a consistent naming convention ensures that tools can accurately interpret and manipulate tokens, saving valuable time and resources.

In conclusion, establishing a clear and consistent naming structure, teams can create a robust and scalable design system that promotes consistency, maintainability, collaboration, and automation. Ultimately, this approach leads to more efficient development processes, improved user experiences, and a future-proof design system that can adapt to the ever-evolving needs of digital products and platforms.

How to Structure an Effective Design Token System

The post The Importance of Naming Conventions in Design Token Systems appeared first on Roger Romero's Blog.