chilichip design system

One look for everything chilichip makes: the website, Chili Platform, Chili Creator, the docs sites and the chilichip console.

Everything here comes from the logo.

Sharp. Bright.
A little spicy.

Three colours, straight edges, hard shadows.

What the logo tells us

In the logo	Rule in the system	Where to read more
Three flat colours: two reds and a green	Chili red leads. Leaf green is a small accent. Everything else is neutral.	Colour
Only straight edges	Square corners. No rounded boxes.	Shape
Two reds side by side make the chili look solid	Depth is a second flat tone or a hard offset shadow. No blur, no gradients.	Depth
Diagonal cuts	A cut corner marks the important thing on a page. Use it rarely.	Cut corners
It reads at a tiny size	Every pattern must also work on a 128×128 screen.	Small screens

What is in the box

Thing	File	For
Logo	logo/chilichip-logo.svg	Everyone
Token source	tokens/tokens.json	People who change the system
CSS variables	tokens/chilichip.css	Website, Chili Platform, Chili Creator, docs sites
JSON	tokens/chilichip.json	Scripts and other tools
C++ header	tokens/chilichip.hpp	The console OS and games
Reference components	assets/components.css	Copy and adapt

Quick start

WebConsole

Copy chilichip.css into your project and load it first.

<link rel="stylesheet" href="chilichip.css">
<style>
  body { background: var(--cc-bg); color: var(--cc-text); font-family: var(--cc-font-text); }
  .buy { background: var(--cc-accent); color: var(--cc-on-accent); box-shadow: var(--cc-shadow-button); }
</style>

Copy chilichip.hpp into your game or the OS.

#include "chilichip.hpp"

using namespace chilichip;

blit::Pen pen(Rgb c) { return blit::Pen(c.r, c.g, c.b); }

void render(uint32_t time) {
  blit::screen.pen = pen(console::bg);
  blit::screen.clear();
  blit::screen.pen = pen(console::accent);
  blit::screen.rectangle(blit::Rect(0, 32, 128, 16));
}

More in Tokens.

How it fits together

flowchart LR
  logo[logo/chilichip-logo.svg] --> json[tokens/tokens.json]
  json --> build[tokens/build.py]
  build --> css[chilichip.css]
  build --> js[chilichip.json]
  build --> hpp[chilichip.hpp]
  css --> web[Website]
  css --> platform[Chili Platform]
  css --> creator[Chili Creator]
  css --> docs[Docs sites]
  hpp --> console[Console OS and games]

Status

This is the first version. Work is tracked in chilichip-brand #7. Some choices wait for the brand kit; see Open questions.