import colors from './colors.styl'
import { Div, Span } from '@startupjs/ui'

# Colors

These are the color used in the Echo Design System.

## Neutrals

Content colors are semantically named for their hierarchical purpose and corresponding environment.

### White

Primary color for the branding. Mostly used for action buttons and hyperlinks.

<Div styleName='colorCard'>
  <Div styleName='colorCardDemo white'></Div>
  <Span styleName='colorCardVariable'>$UI.colors.white</Span>
  <Span styleName='colorCardHex'>#ffffff</Span>
</Div>

### Black

Color for the branding. Mostly used for action buttons.

<Div styleName='colorCard'>
  <Div styleName='colorCardDemo dark'></Div>
  <Span styleName='colorCardVariable'>$UI.colors.dark</Span>
  <Span styleName='colorCardVariable'>$UI.colors.mainText</Span>
  <Span styleName='colorCardVariable'>$UI.colors.secondary</Span>
  <Span styleName='colorCardHex'>#3E4657</Span>
</Div>

## Brand Colors

Brand colors represent the project identity and are used for Call-to-action buttons and hyperlinks.

### Primary

Primary color for the branding. Mostly used for action buttons and hyperlinks.

<Div styleName='colorCard'>
  <Div styleName='colorCardDemo primary'></Div>
  <Span styleName='colorCardVariable'>$UI.colors.primary</Span>
  <Span styleName='colorCardHex'>#2962FF</Span>
</Div>

### Secondary

Color for the branding. Mostly used for action buttons.

<Div styleName='colorCard'>
  <Div styleName='colorCardDemo dark'></Div>
  <Span styleName='colorCardVariable'>$UI.colors.secondary</Span>
  <Span styleName='colorCardHex'>#3E4657</Span>
</Div>

## Utility

Utility colors are used to emphasize and communicate feedback or meaning. Use each utility color only for its intended purpose, or they will lose the meaning.

### Success

<Div styleName='colorCard'>
  <Div styleName='colorCardDemo success'></Div>
  <Span styleName='colorCardVariable'>$UI.colors.success</Span>
  <Span styleName='colorCardHex'>#24B47E</Span>
</Div>

### Warning

<Div styleName='colorCard'>
  <Div styleName='colorCardDemo warning'></Div>
  <Span styleName='colorCardVariable'>$UI.colors.warning</Span>
  <Span styleName='colorCardHex'>#F5BE59</Span>
</Div>

### Error

<Div styleName='colorCard'>
  <Div styleName='colorCardDemo error'></Div>
  <Span styleName='colorCardVariable'>$UI.colors.error</Span>
  <Span styleName='colorCardHex'>#E25950</Span>
</Div>