Colors

Color does much more than liven up your interface – it highlights essential details, communicates hierarchy, and shapes a brand’s personality. Used wisely, color can guide users toward their goals and create a cohesive experience. Overdoing it, however, risks distracting users or obscuring vital info. In Appetite UI, we use a Tailwind CSS Color Generator plus Figma Variables to ensure consistent color choices across our design system.

‍

Color design system best practices

Use color sparingly

Emphasize clarity over flair. Avoid an overly vibrant palette that competes with important content. Instead, incorporate subtle accents to direct attention where it’s most needed (like primary actions or status indicators).

Keep “loud” colors for highlights. When everything’s bold, nothing stands out.

‍

Avoid using the same color for different meanings

Maintain consistent color semantics. If you use blue to indicate “tap here for more,” stick to that usage across your screens. Changing a button color from blue to green just because it “looks nice” can create confusion.

Double down on clarity. Even if an element has a chevron or arrow to show interactivity, reinforcing that with a consistent color keeps the UI intuitive.

‍

Ensure compatibility with light and dark contexts

Support dark mode if your platform allows. Colors that look perfect on a bright background can become jarring or low-contrast in dark mode. System dynamic colors (like Apple’s semantic colors) adapt automatically.

Supply both variants if using custom colors. Our Appetite UI tokens generate light and dark versions of each color, so your components look great in any environment.

‍

Consider artwork and translucency

Adapt colors around busy or changing backgrounds. For instance, map or satellite modes might demand different text or icon colors for visibility.

Account for toolbars, overlays, or translucent effects. A bright color behind a frosted glass effect can look completely different once layered.

‍

Let users choose colors

Offer built-in color pickers when suitable. This maintains consistency with platform standards and helps users save or recall colors across apps.

Keep it simple. While we champion brand consistency, user-driven customization can enhance engagement when done sparingly.

‍

Appetite UI color styles

‍

Base

These universal hues serve as the foundation for backgrounds, text, and overlays.

‍

Brand

This is our core brand color—used for primary actions, highlights, and emphasis.

‍

Gray

Our gray palette is the workhorse for neutral elements, lines, and textual content.

‍

Success

Reserved for positive outcomes—like confirmations, checkmarks, or success toasts.

‍

Warning

Used to caution users about potential issues—like approaching limits, uncertain states, or caution flags.

‍

Error

Indicates failures or urgent problems (e.g., form validation errors, destructive actions, or alert messages).

‍

Enjoy exploring your palette, and remember to regularly test your colors in real environments on various devices. A well-executed color system can truly elevate the user experience and reinforce the unique voice of your product.