せんざい

🌱

Senzai

潜在

Style Guide

A guide on how to properly use the color scheme

💬 Important!

Text colors are guidelines, certain cases require deviations from the below.

Please use your own judgement.

Background Colors

Typography & Terminals

💬 Important!

This is still a work-in-progress. Different editors have different capabilities for theming.

Please use your own judgement.

Code Editor Language Defaults

💬 Important!

The Amai sub-theme colors are advised for use as UI colors only.

The colors can be mixed with standard Senzai colors as needed.

Please use your own judgement.

Amai Sub-Theme Interface Colors

🔎Specs

Palette & Identity:

Senzai consists of 8 key colors. Each color has it's own use-cases and reason to exist distinct from the others. Each one has a label for identification that evokes the color and the stylistic theme. Each color is considered with dark & bright ambiance in mind for designs and intended for use in a minial and flat style.

Amai adds an additional 6 colors specifically for building interfaces. Each color is considered in the same way as the 8 key Senzai colors.

Color Semiotics:

The colors have semiotic considerations as well, with each color evoking intrinsic human emotion.

Purple is creative, imaginative and wise.

Blue is trustworthy, strong and dependable.

Green is peaceful, healthy and full of growth.

Yellow is optimistic, clear and warm.

Orange is friendly, cheerful and confident.

Red is exciting, youthful and bold.

Neutrals between white and black are balanced and calm.

Secondarily, the palette provides typical UX feedback based on the color as well.

Red is alarmed and alert.

Orange and yellow are cause to pay more attention.

Green is reassuring.

Blue is informative.

Colors that exist as a combination of two others offer a feeling that is a mix of the two.

UI Infrastructure:

The UI infrastructure in the tables above can be broken down into layers, like below:

Base ➡️ Middle ➡️ Sub-surface ➡️ Surface ➡️ Super-surface

Base represents the very background elements that the UI is built upon.

Middle is the centrepoint for the UI. The main anchor.

The surface is where main interactables or informatives exist.

Sub-surface and Super-surface are for elements to exist in a lower or higher importance in the heirarchy.

This layered approach should generally flow from dark to light, or light to dark.

Alternatively it can flow from dark to light to dark, or light to dark to light.

Accent colors should generally be used from sub-surface up.

Code Convenience:

Where possible, the best way to bring the colors into your project is to add a variable block with the colors to your code. Then setup new variables for your items and point them to the color block, then reference the new variables.

This keeps a clean divide between your functional code and the color palette which allows you to make convenient changes.

An example of the senzai color block is below for reference:

--wisteria-light: #C5B4F8;
--wisteria-dark: #9A7CF3;
--sky-light: #80DFEF;
--sky-dark: #49D1E9;
--surf-light: #A5F2E3;
--surf-dark: #6FEBD3;
--ginkgo-light: #B9E48B;
--ginkgo-dark: #9BD85A;
--yuzu-light: #F9E18B;
--yuzu-dark: #F6D251;
--mikan-light: #FDAC72;
--mikan-dark: #FC8936;
--hydrangea-light: #FF6D8F;
--hydrangea-dark: #FF2D5E;
--azalea-light: #FF93FA;
--azalea-dark: #FF5DE1;
--pebble: #F5F5EF;
--mackerel: #908E8F;
--basalt: #2A262C;
--slate: #111114;
--anko-light: #4A3F32;
--anko-dark: #251F18;
--karinto-light: #876D58;
--karinto-dark: #564638;
--dango-light: #F4EED6;
--dango-dark: #E6D79E;
--sakura-light: #F7B8BA;
--sakura-dark: #F17E82;
--marblesoda-light: #59C2E6;
--marblesoda-dark: #20A8D5;
--matcha-light: #79D993;
--matcha-dark: #40C965;