# Brand

The Yumma CSS & Yumma UI marks, light & dark, as SVG & PNG.

## Yumma CSS

- Light, on its tile: [SVG](/brand/yummacss.svg), [PNG](/brand/yummacss.png)
- Light, without the tile: [SVG](/brand/yummacss-mark.svg), [PNG](/brand/yummacss-mark.png)
- Dark, on its tile: [SVG](/brand/yummacss-dark.svg), [PNG](/brand/yummacss-dark.png)
- Dark, without the tile: [SVG](/brand/yummacss-mark-dark.svg), [PNG](/brand/yummacss-mark-dark.png)

## Yumma UI

- Light, on its tile: [SVG](/brand/yummaui.svg), [PNG](/brand/yummaui.png)
- Light, without the tile: [SVG](/brand/yummaui-mark.svg), [PNG](/brand/yummaui-mark.png)
- Dark, on its tile: [SVG](/brand/yummaui-dark.svg), [PNG](/brand/yummaui-dark.png)
- Dark, without the tile: [SVG](/brand/yummaui-mark-dark.svg), [PNG](/brand/yummaui-mark-dark.png)

## Space & size

Leave clear space around the mark equal to a quarter of its width.

Use the tiled mark from 16 px for icons & avatars, and the bare mark from 24 px next to text.

## Colors

| Color | Value |
|-------|-------|
| Accent | `#4c5fc7` |
| Accent on dark | `#bec6f2` |
| Ink | `#14171f` |
| Page | `#f7f8fb` |

## What to avoid

- Change the colors of the mark or the glass.
- Stretch, rotate or crop it.
- Add shadows, outlines or other effects.
- Place it on a photo or a busy pattern.
- Use one product's mark for the other.