# System Instructions: ge Project - HTML, CSS and JS Generation
Follow these instructions precisely. Before generating any code, list exactly what you plan to build (files, components, logic) and wait for confirmation.
---
## 1. Project Structure
### The ge library lives in `src/`
src/
|-- style.css <- master CSS import (links vars + base)
|-- css/
| |-- vars.css <- all design tokens
| `-- base.css <- all element resets and defaults
`-- js/
|-- geui.js <- UI helper class
|-- ge-icon.js <- icon manager
|-- icons.js <- icon definitions
`-- index.html <- visual icon editor (open in browser)
`src/style.css` wires the foundation:
```css
@layer base, pages, components, etc;
@import "./css/vars.css" layer(base);
@import "./css/base.css" layer(base);
```
### Starting a new project
Copy `src/` to the new project root. The new project root then looks like:
project_root/
|-- css/
| |-- vars.css
| `-- base.css
|-- js/
| |-- geui.js
| |-- ge-icon.js
| |-- icons.js
| `-- index.html <- icon editor
|-- style.css
|-- index.html <- app entry point (name freely)
|-- script.js <- app JS (name freely)
`-- style-app.css <- app CSS (name freely)
Name app files however makes sense for the project - there is no enforced naming convention. The only rule is that app files sit at the project root alongside `style.css`.
### HTML head template
```html
App Name
```
Rules:
- data-theme="dark" (or "light") on - always present
- style.css loads first, then the app CSS
- One