import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
import { ColorSwatch } from '../../.storybook/custom/components/Swatches'
import hbs from 'htmlbars-inline-precompile';

<Meta title="Foundations/Color" />

# Color

## Color

Colors in Radial play double duty. They are expressive of the brand and purposeful in usage. Like Daniel Craig as Bond, colors should look incredible on screen, but also deftly complete the mission.


### Categories

Colors can be thought of in three distinct categories and are flexible per site or brand. Primary colors include core brand colors (i.e. WNYC red) and can be used for prominent page elements such as CTAs, buttons, and backgrounds. Utility colors are typically shades of black and white used for body text, headers, or default backgrounds. Accent colors are any other polychromatic color used for a functional reason. Accent colors might include a shade of green for success or red for error.

### Tokens

Tokens are named entities that store visual design attributes. Typically, tokens are used in place of hard-coded values ( ex. hex values for color, pixel values for spacing) to maintain a consistent visual system.

See a more detailed list of tokens in use in [Airtable](https://airtable.com/invite/l?inviteId=invsghVm3eYR1d6T9&inviteToken=124e9347d00036d37c22a656c1db30fb33545926729192aa51f4814f52a8267b).

### Accessibility

All text should have enough contrast with its background to be easily readable. Contrast is measured in a ratio format (i.e 4:1) where the difference between the opposing numbers indicates how much luminance there is between a given foreground and background. The bigger the difference between the two numbers, the higher the contrast. According to WCAG 2.0, contrast standards at the AA level are defined:

-   3.0 contrast ratio for large text 
-   14 pt font or larger for bold    
-   18 pt font or larger for regular
-   4.5 contrast ratio for smaller text