Plus UI
Plus UI ↗️Be Our Sponsor ↗️
  • Getting Started
    • Documentation Overview
    • Component List & Plans
    • Support
    • Contributing
    • FAQs
  • UI Library
    • Overview
    • Changelog
    • Installation
      • React
      • Vue
      • Angular
      • Svelte
  • Design System
    • Overview
    • Setting up on Figma
    • Styles & Variables
  • Components
    • Overview
    • Accordion
    • Alert
    • Avatar
    • Badge
    • Button
    • Button Group
    • Breadcrumb
    • Checkbox
    • Chip
    • Divider
    • Drawer
    • Dropdown
    • Input
    • Link
    • Modal
    • Popconfirm
    • Popover
    • Progress
    • Radio
    • Rating
    • Select
    • Tab
    • Textarea
    • Toast
    • Toggle
    • Tooltip
  • Foundation
    • Overview
    • Color
      • Color Palette
      • Color Variables
      • Color Token List
    • Typography
    • Icons
    • Border
    • Spacing
    • Opacity
    • Shadows & Effects
    • Breakpoints
  • Customization
    • Customization
    • Theme
    • Accessibility
    • Tokens
Powered by GitBook
On this page
  • Color Palette
  • Color Classification
  • Default
  • Primary
  • Info
  • Success
  • Warning
  • Error
  • Get help

Was this helpful?

  1. Foundation
  2. Color

Color Palette

Expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.

PreviousColorNextColor Variables

Last updated 12 months ago

Was this helpful?

Color Palette

If you’re wondering how we automatically generated the 50–950 shades of each color, bad news — color is complicated and to get the absolute best results we picked all of Tailwind’s default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them.

Color Classification

Our color classification simplifies decision-making, aiding both designers and developers in selecting the right hues for various components. Whether you're aiming for a cohesive brand identity or ensuring accessibility, our documentation illuminates the principles guiding our color classification system, empowering you to make informed and aesthetically pleasing design choices within the Plus UI ecosystem.

Default

Explore the nuanced shades of gray within our palette, each thoughtfully classified to cater to specific design elements. From soft undertones to deeper shades, our documentation elucidates how the default gray acts as a unifying force, providing a solid foundation for your design while allowing other colors to shine.

Primary

Elevate your brand presence with Plus UI's primary color—Indigo. Explore the nuanced shades and variations of Indigo within our palette, each carefully classified for specific design contexts

Info

The Info Color blue aligns with accessibility principles, providing a balanced contrast that enhances readability and usability. Whether used in tooltips, notifications, or other informational elements, this shade of blue serves as a reliable beacon, guiding users through your application with clarity and precision.

Success

The Success Color green aligns with accessibility standards, providing not only a visually pleasing experience but also a clear and distinguishable visual cue. Whether used in buttons, notifications, or other success-related elements, this shade of green adds a touch of positivity to your interface, creating a user experience that feels rewarding and encouraging.

Warning

The Warning Color yellow aligns with accessibility standards, providing a clear and attention-grabbing visual cue while maintaining readability. Whether used in form validations, notifications, or other warning elements, this shade of yellow serves as a reliable signal for users to exercise caution without creating undue stress.

Error

The Error Color red aligns with accessibility standards, providing a clear and prominent visual cue while maintaining readability. Whether used in error messages, validation prompts, or other error-related elements, this shade of red serves as a powerful indicator, prompting users to take corrective actions with confidence.

Get help

If you're new to Figma, the platform may initially seem overwhelming, but exploring the interface can be a fun and rewarding experience. Before you can use the Keep Design System in Figma, it's essential to learn the basic tools and functionalities of the platform.

Colour Palette
default colors
primary colors
information colors
success colors
warning colors
error colors
Cover

Join Figma Community

Cover

Join Discord Community

Cover

Join us on Twitter