Colors

Colors in a Design System are practically a subsystem, with motivations that go well beyond aesthetics. When we designate colors for use in digital interfaces we lean on brand decisions, but ones that reflect specific interactions and patterns present in each interface.

Each of these groups represents a design level and is categorized by its importance. However, that does not mean they appear less often. For example, the Tonality colors are used more frequently in interfaces, but they don't dictate variations; on the hierarchical scale they are applied more, yet they have no influence on the compositional structure of the other categories.

A summary of each category can be given as:

• Brand: Colors that vary according to the visual brand guidelines (branding) of companies or specific products. They determine the tones to be used to set the tone and temperature of the interfaces.
• Contrast: Every platform needs to respect a duotone for darker and lighter colors. Normally, black and white are fundamental colors, but for designs that use dark-mode structures the overall color base becomes a blend between brand and the deepest tones of light or dark.
• Function: In computer interfaces, colors represent actions or indicate that certain elements are open to interaction. These colors signal primary or secondary actions, as well as behaviors the user expects for states.
• Response: Just as Function Colors represent interactions, there are certain expected state signals on every platform, such as success or error indicators — such colors are reserved for response (or feedback) actions.
• Tonality: Used to generate depth and tonality associated with the branding, giving platforms consistency. The colors range between a neutral scale (for contrast and tone) and a grayscale (for depth, such as shadows, for example).

Perceptual derivation. When you define only a brand's base color, Apollion automatically derives the variants (.dark, .light, .action, .active) in a perceptually uniform color space. In practice: "50% darker" produces a color that looks 50% darker, not a numeric arithmetic that fools the eye. Saturated brands (orange, gold, green) stay visually consistent without manual tuning.

Examples

The color system can be used to create a theme that reflects your brand or style.

import { Button } from '@apollion-dsi/core/elements/button';
import { ApollionProvider, createTheme } from '@apollion-dsi/core/themes';
 
const theme = createTheme({
  colors: {
    primary,
  },
});
 
<ApollionProvider theme={theme}>
  <Button text="Edit Primary color" />
  <Notification
    title="A notification"
    message={`Click "Edit Primary color" to change the color`}
    action={<Button size="extraSmall" text="Undo" />}
  />
</ApollionProvider>;

Creating your Color Scheme

Create your color scheme using the ColorPicker on the side.

const theme = createTheme({
  "colors": {
    "baseDark": "#0b0b0b",
    "baseLight": "#f9f9f7",
    "transparent": "transparent",
    "deepDark": "#000",
    "deepLight": "#FFF",
    "main": "#003750",
    "opposite": "#4c280a",
    "complementary": "#F6BA20",
    "information": "#3399FF",
    "success": "#2CB567",
    "danger": "#E12712",
    "warning": "#FFBB00",
    "primary": "#32AFDC",
    "secondary": "#2D81AA",
    "tertiary": "#2CE571"
  }
})

Surface ladder — mode-aware grounds, inks, edges and washes

Besides the palettes and ramps, createTheme resolves a surface ladder from the contrast anchors (baseLight → canvas, baseDark → ink), keyed by the theme's polarity. Paper is lighter than the canvas in both modes (tonal elevation), every ink clears WCAG AA and the APCA tiers over the paper, and edges/washes are the primary ink at a fixed alpha so they work on any ground. They are ordinary tokens — bgColor="surface.paper", color="ink.secondary", borderColor="edge.border" — and the aliases live on theme.foundation.bg.*, theme.foundation.text.* and theme.foundation.edge.*.

Pin a role verbatim per polarity when a reference design asks for it:

createTheme({ colors: { ladder: { dark: { surface: { paper: '#1a1a19' } } } } });

Stock seeds are baseLight: '#f9f9f7' and baseDark: '#0b0b0b' (a warm, slightly tinted canvas; a near-black ink that becomes the dark canvas after the canonical swap). See Dark Mode Engine.