Eidos

What you get

Everything draws from one set of tokens — components, utilities, and both themes.

Built for dense screens

Run tables, log panels, resource trees. 36px controls on a 4px grid, soft radii, and borders rather than shadows to define structure.

Dark by default

Light is a real variant, not an afterthought. Both themes draw from one neutral ramp, inverted, so they cannot drift apart.

Tokens all the way down

A private primitive palette, referenced by semantic tokens, compiled by Style Dictionary. Change the brand blue in one place and it reaches every theme.

Tailwind v4, same source

A generated @theme maps the tokens into utilities, so bg-bg-surface and your components can never disagree.

Accessibility, tested

Focus traps, roving tabindex, real buttons — driven with real key presses in tests, with axe over every component. Not asserted; checked.

The whole frame

AppShell gives you a fixed nav column, a fixed top bar, and one scrolling region — encoding the layout traps you would otherwise hit alone.

Render something

Import the stylesheet once, then compose. Data values are always mono; status is never colour alone.

import { AppShell, Sidebar, Card, Stat, Badge } from "@kairosis/eidos";
import "@kairosis/eidos/styles.css";

export function Overview() {
  return (
    <AppShell sidebar={<Sidebar sections={sections} />}>
      <Card
        title="api-gateway"
        action={<Badge tone="success" dot>Healthy</Badge>}
      >
        <Stat
          label="Runs today"
          value="1,284"
          delta="+12% vs last week"
          deltaTone="positive"
        />
      </Card>
    </AppShell>
  );
}