Introduction to Color in Inked Colibri

The Challenge:
Traditional design systems often rely on extensive color palettes, requiring designers to manually input numerous color variables for each shade variation—darker, lighter, and everything in between. This manual process is time-consuming, prone to inconsistency, and difficult to manage, especially across complex projects.

The Solution:
Inked Colibri simplifies color management by using a general color and generating shading automatically. Instead of creating individual color shades manually, the system leverages opacity adjustments within pre-defined components. This approach allows designers to apply the original color in multiple intensities without additional variables, streamlining the color application process.

However, using opacity introduces a challenge: when transparent colors blend with backgrounds, they can lose clarity. To solve this, Inked Colibri incorporates half-white backgrounds for light themes and half-black backgrounds for dark themes, ensuring colors retain their intended hue and contrast.

Detailed Content for the Color Section in Inked Colibri

1. Simplified Shading with Opacity

• Concept: Instead of creating separate color shades manually, the system applies the original color at varying opacity levels.
• Implementation: Components receive color through opacity-controlled variables, which automatically adjust intensity without additional color definitions.
• Challenge & Solution: Opacity can cause unintended blending with backgrounds. Inked Colibri mitigates this by using half-white and half-black overlays based on the theme, preserving color clarity and consistency.

2. Motivation from RealtimeColors.com

• Inspiration: After examining RealtimeColors.com, the potential to generate a cohesive palette from just five core colors became evident.
• Efficiency: With only five core colors (e.g., primary, secondary, accent), the design system creates all necessary shades automatically, reducing manual input and simplifying updates.

3. APCA Contrast Guidelines

To develop this design system, we incorporated best practices and insights from APCA (Advanced Perceptual Contrast Algorithm) to ensure that all color choices meet accessibility standards. APCA provides modern guidelines for color contrast, helping to improve readability and usability across different text sizes and weights.

Neutral Gray as an Example of Color Opacity

In Inked Colibri, neutral gray is used to demonstrate the effectiveness of color opacity. We start with a solid black color and apply opacity levels of 15%, 30%, 45%, 60%, 75%, and 90% to create a range of neutral shades. Neutral gray allows designers to work on structure and layout without the distraction of brand colors, keeping the focus on the design itself.

It is a good practice to design elements in neutral gray first, finalize the layout and structure, and then apply brand colors using the 10-30-60 rule (10% accent color, 30% secondary color, and 60% primary color) for a balanced and cohesive look.

APCA key contrast values are applied to neutral gray to ensure accessibility.

APCA Contrast Guidelines

A summary of the APCA contrast guidelines:

• 90 - Preferred for body text (14px regular and above)
• 75 - Minimum for body text (18px regular and above)
• 60 - Minimum for other text (24px regular or 16px bold and above)
• 45 - Minimum for large text (36px regular or 24px bold and above) and interface elements
• 30 - Absolute minimum for text like form field placeholder text and disabled button text
• 15 - Minimum for non-text elements

By following these APCA guidelines, Inked Colibri achieves optimal readability and accessibility, ensuring a user-friendly experience across all elements.