SeedsColor
Color item displaying the color as a block with RGB and CMYK colors. The color name and description are displayed below the block. Design inspired by SproutSocial's Seed.
Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.
Name | Description | Default | Controls |
|---|---|---|---|
| name | name of the color, If none, or same as the color value, some color blocks will not display it string | - | |
| color | color value as a string. accepted hex, rgb, hsl color strings ColorValue | - | |
| hover | hover prop boolean | - | |
| blackTextColor | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 string | - | |
| whiteTextColor | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff string | - |
package | imports | peer |
|---|---|---|
CopyContainer | ||
react ^17.0.1 | FC | * |
simple-color-converter ^2.1.9 | simpleColorConverter | |
theme-ui ^0.8.4 | jsxTheme |
file | imports |
|---|---|
| "../utils" | colorToStrmostReadable |
| "../../types" | ColorBlockPropsColorValue |
| "../../containers" | GridContainerPropsGridContainer |
Use Purple 700 to highlight or draw attention to important information that has no interaction. When using our primary purple with our primary green, green should always be the dominant color of the two.
Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text.
Use Aqua 600 for in-app text links and to highlight or draw attention to important information that has no interaction. Aqua is also the primary spot illustration color and is used for color blocking.