Eidotter
A DOS-themed React component library with authentic CGA terminal aesthetics. The shared design foundation for Timeline OS applications.
The problem
Building applications within the Timeline OS ecosystem means maintaining a consistent visual language across React web apps, React Native mobile apps, and native iOS apps. Without a shared design system, each project reinvents the wheel—leading to inconsistent aesthetics, duplicated effort, and drift from the core DOS terminal philosophy.
Existing component libraries either lack the retro aesthetic entirely or treat it as a novelty rather than a serious design language. They don't provide the authentic CGA color palette, the proper typography weight, or the subtle details like phosphor glow and scanline effects that make the DOS aesthetic feel genuine.
The solution
Eidotter is a React component library that brings authentic DOS terminal aesthetics to modern web applications. Born from the Timeline OS vision, it provides a consistent design language across multiple projects.
The library uses the authentic 16-color CGA palette plus amber variants and phosphor glow effects, without sacrificing modern accessibility standards. Every component is built with TypeScript, fully tested, and documented in Storybook.
Available components
The terminal above shows five of more than 50 components. Storybook has every one with its variants and states.
Design token system
Eidotter has a design token pipeline powered by Style Dictionary. Tokens are defined in JSON and compiled to CSS variables, enabling consistent theming across any platform.
Tailwind CSS integration
For projects that prefer utility-first CSS, Eidotter exports a Tailwind preset. This brings CGA colors, DOS typography, and semantic tokens directly into your Tailwind config without requiring React component imports.
// tailwind.config.js
module.exports = {
presets: [require('eidotter/tailwind.preset')],
content: ['./src/**/*.{js,jsx,ts,tsx}'],
};
// Usage in components
<div className="bg-cga-black text-cga-amber font-dos">
DOS terminal content
</div>Used in
Eidotter is the design foundation for the Timeline OS ecosystem:
Rizomorf
This portfolio site - using tokens and aesthetic principles
Pomodoke Calendar
AI-powered scheduling with Eidotter Tailwind preset
DOS BTS
Diabetes management iOS app with amber CGA theme
Tracker
Habit tracking with MDA-inspired monochrome themes
Tech stack
Development Log
Wired eidotter's data-provenance="ai-draft" provenance system (DMNC-884) to a shimmering CGA magenta→white→cyan text gradient (background-clip: text + 12s shimmer). Per-paragraph via the canonical attribute, whole-page via data-ai-block on any article wrapper. In block mode only h1-h6, p, li, blockquote, strong, em, code pick up the gradient, so buttons, swatches, and styled components stay untouched. This very page is wrapped in it.
Published tailwind.preset.js for projects that prefer utility-first CSS without React component imports.
All 16 components now have full Storybook documentation with usage examples and variant showcases.
Migrated design tokens to Style Dictionary for cross-platform token generation (CSS, JSON, TypeScript).
First public release with core components: Button, Alert, Terminal, CommandPrompt, Input, Checkbox.
Design philosophy
The DOS aesthetic represents more than nostalgia. It embodies control, clarity, and personal sovereignty over our digital tools. Eidotter brings these values to modern interfaces while maintaining accessibility and usability standards.
Explore the Source