# TelUITelUI is a Electron-based UI framework that packages a handful of reusable front-end primitives—color utilities, typography helpers, and basic structural styles—so you can prototype simple desktop UI ideas with minimal setup.## Features
- Bundled Electron runner (`npm start`) that serves `index.html` for instant desktop previews.
- Tokenized styling layers: `color.css`, `font.css`, and `header.css` keep presentation rules isolated and easy to remix.
- Google Fonts integration (Funnel Display) plus opt-in utility classes like `.arial`.
- Drop-in icon assets under `icons&#x2F;` to help illustrate loading and status states.## Quick start```bash
npm install
npm start
```The app launches an 800×600 Electron window that loads `index.html`. Modify any CSS or HTML file and restart (or reload) to see the changes.## Project layout```text
index.js # Electron bootstrapper
index.html # Demo canvas that consumes TelUI styles
font.css # Typography utilities and Google Fonts import
color.css # Color tokens (e.g., gentleblue, brightblue, gray&#x2F;grey, green)
header.css # Structural tweaks for header containers
icons&#x2F; # Shared bitmap &#x2F; gif assets (e.g., loading.gif)
package.json # Dependencies and npm scripts
```## Using the utilities1. Reference the styles you need in your HTML entry point:<pre><code> ```html
 &lt;link rel=&quot;stylesheet&quot; href=&quot;font.css&quot;&gt;
 &lt;link rel=&quot;stylesheet&quot; href=&quot;color.css&quot;&gt;
 &lt;link rel=&quot;stylesheet&quot; href=&quot;header.css&quot;&gt;
 ```
</code></pre>
2. Apply the provided classes or custom element tags:<pre><code> ```html
 &lt;header class=&quot;gentleblue&quot;&gt;
 &lt;h1 class=&quot;funneldisplay&quot;&gt;TelUI&lt;&#x2F;h1&gt;
 &lt;&#x2F;header&gt;
 &lt;p class=&quot;arial&quot;&gt;Prototype copy goes here.&lt;&#x2F;p&gt;
 ```

 `font.css` exposes `.funneldisplay` and `.arial`. The color tokens (`gentleblue`, `brightblue`, `gray`, `grey`, `green`) can be used either as element selectors or converted into classes if you prefer `.gentleblue` syntax.
</code></pre>
3. Reuse icons by pointing to the assets directory:<pre><code> ```html
 &lt;img src=&quot;icons&#x2F;loading.gif&quot; alt=&quot;Loading indicator&quot;&gt;
 ```
</code></pre>
## Extending TelUI- Add new color tokens or typography helpers by updating the corresponding CSS file; keep selectors declarative and organized by category.
- For additional Electron behaviors (menus, preload scripts, IPC), expand `index.js` while leaving the UI-focused files framework‑agnostic.
- When shipping as a distributable app, configure `electron-builder` or your favorite packager; the current setup is intentionally minimal.## LicenseUnless stated otherwise in individual files, TelUI is distributed under the MIT License. Please include the license text when redistributing TelUI or derivative works,URL:https:&#x2F;&#x2F;github.com&#x2F;eotter-beep&#x2F;telui&#x2F;blob&#x2F;main

TelUI: UI framework for easy-to-use applications