5 ms·
# TelUI TelUI is a minimal Electron-based UI framework with reusable front-end primitives—colors, typography, layout, and micro-interactions—so you can prototy
by telui 10mo ago
# TelUI
TelUI is a minimal Electron-based UI framework with reusable front-end primitives—colors, typography, layout, and micro-interactions—so you can prototype desktop UI ideas fast.
*GitHub:* [https://github.com/eotter-beep/telui https://github.com/eotter-beep/telui](https://github.com/eotter-beep/telui https://github.com/eotter-beep/telui)
## Features
- Electron runner (`npm start`) for instant desktop previews
- Tokenized CSS layers: `color.css`, `font.css`, `header.css`, `align.css`
- Micro-interactions in `animation.css` (`.hover-fade`, `light`)
- Google Fonts + optional `.arial` class
- Drop-in icons (`icons/`) and warning component
- Text color & background utilities (`color.css`)
## Quick Start
```bash
git clone https://github.com/eotter-beep/telui.git https://github.com/eotter-beep/telui.git
cd telui
npm install
npm start
```
```html
Example Usage
<link rel="stylesheet" href="font.css">
<link rel="stylesheet" href="color.css">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="animation.css">
<link rel="stylesheet" href="align.css">
<gentleblue>
<header><h1>TelUI</h1></header>
<p class="arial">Prototype copy</p>
</gentleblue>
<center><button class="hover-fade funneldisplay">Hover me</button></center>
<warning><p>Something went wrong!</p></warning>
<p class="greentext">Text in green</p>
```