Design system¶

indah ships one look, called Studio, and styles every component through a small set of named design tokens (CSS custom properties). You never restyle a component. You change a token, and every component that uses it follows. This page is the contract: what the tokens are, what each is for, and how to override them.

The role names follow Material Design 3 (primary, on-primary, container, outline, surface), because that vocabulary is well understood. The values and the look are indah's own: warm porcelain, bougainvillea magenta, deep teal.

Overriding tokens¶

indah.create_app(
    theme=indah.Theme(
        light={"primary": "#1f6feb"},
        dark={"primary": "#79b8ff"},
        radius="8px",
        font="system-ui, sans-serif",
    ),
    density="compact",
)

Only the colour roles below can be overridden, per scheme (light and dark). radius and font apply to both. An unknown token name raises an error, so a typo cannot pass silently. If you override a *-container role, also override its on-*-container partner so the text stays readable. The Bunga logo is brand identity, not a theme role: a theme never recolours it. To use your own mark, pass logo=. A mark that vanishes on one background needs a pair: logo=(light_mark, dark_mark) shows the one that matches indah's light/dark toggle (an SVG that relies on currentColor does not work, since the logo is shown in an <img>).

Try it live. Nothing downloads until you press Run it.

import indah

theme = indah.Theme(
    light={"primary": "#d6336c", "primary-container": "#ffe3ec"},
    dark={"primary": "#ff8fb3", "primary-container": "#5c1630"},
    radius="2px",
    font="Georgia, serif",
    # the app's own tokens: named x-<name>, read as var(--x-brand) in your CSS
    extra_light={"x-brand": "#d6336c"},
    extra_dark={"x-brand": "#ff8fb3"},
)

app = indah.create_app(
    session_factory=build,
    theme=theme,
    density="compact",      # or "comfortable" (the default): table row height and padding
    max_width="720px",      # the page frame; "none" for full width
)

Your own tokens¶

An app can add roles the core set does not have, such as a row-hover fill or a status colour. Name them x-<name> and pass them per scheme; they are emitted as --x-<name> for your CSS to read (a custom component's styles, for example).

indah.Theme(
    extra_light={"x-brand": "#b5296b", "x-row-hover": "rgba(0, 0, 0, 0.04)"},
    extra_dark={"x-brand": "#ff7ab6", "x-row-hover": "rgba(255, 255, 255, 0.06)"},
)

Define a token in both schemes if it should differ, because one set only in extra_dark has no value in light. Values are checked like any other theme value. The core roles stay a closed set: Theme(light={"x-brand": ...}) raises, and so does an extra that does not start x-.

The page frame is 1080px wide at most. create_app(max_width="none") lets it fill the window (a dashboard with a left rail wants this), and max_width="1400px" or "90rem" sets another cap. Anything else raises an error. It is applied as the --page-max token.

The browser tab reads "<title> - indah" when you pass title=. Pass title_suffix="" for the exact title (title="semula", title_suffix="" gives <title>semula</title>), or any other suffix such as " | Semula Ops".

Colour roles¶

Every role is defined for light and dark. Use a role by its job, never by its hex value.

The rules:

1. Every filled role has an on- partner. Put on-primary text on primary, never text.
2. Status is never colour alone: pair it with a word or an icon.
3. A new component uses existing roles. Adding a role is a design decision, recorded in an ADR, not a one-off in a component.

Shape, type, spacing¶

Body text is 15px. Small text steps down through 0.95, 0.85, 0.8 and 0.75rem, and no component should invent a size outside that ladder. Spacing is in rem, on a quarter-rem grid (0.25, 0.5, 0.75, 1, 1.5).

Plain Text has six roles (ADR-0040), all on that ladder:

Density¶

Tables read four tokens: --row-h, --cell-pad-y, --cell-pad-x and --table-font. density="comfortable" (the default) and "compact" swap the whole set, for the app or for one Table(density=).

Interaction states¶

Focus is always visible for keyboard users, and every control is reachable with the keyboard.

Layers¶

Overlapping surfaces stack in a fixed order, so two components never fight over z-index.

Modals and drawers are centred and right-edge, and toasts sit at the bottom centre. A tooltip opens at the pointer on hover and under the control on keyboard focus.

Motion¶

Transitions are short (0.15s) and limited to colour, border and a 1px press. Anything that loops, such as the spinner, slows down under prefers-reduced-motion.

What this is not¶

indah is not stock Material 3. It borrows the role vocabulary and the discipline (every colour has a job, every surface has an elevation, every state is defined) and leaves out the rest: there is no dynamic colour, no state-layer opacity scale and no type-scale tokens. If that changes, it changes here first.