diff --git a/README.md b/README.md index a384f19..4dab979 100644 --- a/README.md +++ b/README.md @@ -5,12 +5,12 @@ A Figma plugin to generate themes for the Caldera Bridge using Google's HCT colo HCT is a color space that Google has produced to help them build dynamically changing UI. Katmai Design System uses this color space to make sure that what ever color a user provides we can automatically generate a UI that has visual clarity, contrast, and hits accessibility standards. ## Features -- Generate a color palatte from a single primary color or a image -- Define Fonts -- Define Corner Radius -- Toggle features such as backgrounds. -- Devive color roles from HCT Palatte -- Export color roles and palatte to a json file. +- Generate a color palette from a single primary color or an image +- Define fonts +- Define corner radius +- Toggle features such as backgrounds +- Derive color roles from HCT Palatte +- Export color roles and palatte to a .json file ## Installation @@ -56,18 +56,18 @@ After making changes, refresh the plugin in Figma by going to **Plugins** → ** ![Color Palette](palette.png) ### Primary Palette -When building a color palate we need at the very least a Brand/Primary color, which we can derive from a img or just a hex code. From there we can break down the the color in a palette. +When building a color palette we need at the very least a Brand/Primary color, which we can derive from a img or just a hex code. From there we can break down the the color in a palette. -With the Primary base color we then break down the palette using HCT tones. From there can take convert the HCT values to something useable like RGBA or HEX. +With the Primary base color, we then break down the palette using HCT tones. We can then can convert the HCT values to something useable, such as RGBA or HEX. ### Neutral Palette -We derive the neutral color by taking the HSL of the selected brand color and lowering the saturation (The "S" in HSL) to 2%. From there we apply the same techinqie to get the shades has we did you the primary color palette. Difference is here that we need a few more shade options between. 91-94, 96-99 so we get more shades +We derive the neutral color by taking the HSL of the selected brand color and lowering the saturation (The "S" in HSL) to 2%. We then apply the same technique to get the shades for the primary color palette. The difference for the neutral palette is we need a few more shade options between 91-94, 96-99 so we get more shades. -Neutral shades are broken down just by its light value in the HSL +Neutral shades are broken down by its light value in the HSL. ## Color Roles -Color roles are defined in the Katmai Design System and is used on the Bridge along with the rest of Caldera Products. Will provide more insight later. +Color roles are defined in the Katmai Design System and used on the Caldera Bridge along with the rest of Caldera products. Will provide more insight later.