Design System

Shared visual language and tooling for Eigenoid's web applications.

Overview

Eigenoid uses a custom Tailwind CSS preset distributed as the @eigenoid/design-tokens npm package (source: platform-design-tokens). This preset provides the color palette, typography, and spacing conventions so that every application has a consistent look without duplicating configuration.

The design language is editorial dark with high contrast, built around a cyan accent and IBM Plex typography.

Color palette

The primary accent is cyan, tuned for both light and dark themes:

Token	Hex	Usage
Primary (dark mode)	#22d3ee	Links, buttons, interactive elements on dark backgrounds
Primary (light mode)	#0e7490	Links, buttons, interactive elements on light backgrounds
Primary dark	#06b6d4	Hover states
Primary darker	#0891b2	Active states
Primary lightest	#cffafe	Subtle backgrounds, footer

Background colors follow a near-black editorial palette in dark mode (#0a0e12 base) and a cool slate in light mode (#f8fafc base).

Typography

• Body and headings: IBM Plex Sans (weights 400, 500, 600, 700)
• Code: IBM Plex Mono (weights 400, 500, 600)
• Base font size: 16px, line height 1.65
• Headings: tight letter-spacing (-0.02em) for an editorial feel

Fonts are self-hosted with font-display: optional to prevent flashes of unstyled text.

Installing the preset

Add the package to your project:

npm install @eigenoid/design-tokens

bash

Then extend your tailwind.config.js:

import eigenoidPreset from '@eigenoid/design-tokens';

export default {
  presets: [eigenoidPreset],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
};

js

The preset provides the full color scale, font families, and spacing values. You can override individual tokens in your project's config if needed.

Using the tokens without Tailwind

If your project does not use Tailwind CSS, you can reference the CSS custom properties directly. The internal docs site (docs-internal) defines them in src/css/custom.css:

:root {
  --ifm-color-primary: #0e7490;
  --ifm-color-primary-lightest: #22d3ee;
  --ifm-font-family-base: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ifm-font-family-monospace: 'IBM Plex Mono', ui-monospace, monospace;
}

css

Use these variables in your CSS to stay consistent with the design system.

Current status

The platform-design-tokens repository has been created but does not yet contain a published package. Until the first release, applications should reference the CSS custom properties from docs-internal/src/css/custom.css as the canonical token definitions.