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
  • Surface
  • Background Disabled
  • Background Base
  • Background Default
  • Background Default Invert
  • Background Primary
  • Background Primary Invert
  • Background Success
  • Background Success Invert
  • Background Warning
  • Background Warning Invert
  • Background Error
  • Background Error Invert
  • Background Information
  • Background Information Invert
  • Text Color Variable
  • Text Invert Color Variable
  • Border Color Variable
  • Get help

Was this helpful?

  1. Foundation
  2. Color

Color Variables

Plus UI Design System’s variable of color palette boasts a high accessibility score in both light and dark modes, ensuring that every user can engage with our interface effortlessly.

PreviousColor PaletteNextColor Token List

Last updated 12 months ago

Was this helpful?

Explore the thoughtful selection of colors that not only elevate the aesthetics of your design but also contribute to a seamless and enjoyable user journey for everyone with highest accessibility scores.

Surface

Background Disabled

Background Base

Background Default

Background Default Invert

Background Primary

Background Primary Invert

Background Success

Background Success Invert

Background Warning

Background Warning Invert

Background Error

Background Error Invert

Background Information

Background Information Invert

Text Color Variable

Text Invert Color Variable

Border Color Variable

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.

surface color variable
background disabled color variable
background base color variable
background default color variable
background default invert color variable
background primary color variable
background primary invert color variable
background success color variable
background success invert color variable
background warning color variable
background warning invert color variable
background error color variable
background error invert color variable
background information color variable
background information invert color variable
text color variable
text invert color variable
border color variable
Cover

Join Figma Community

Cover

Join Discord Community

Cover

Join us on Twitter