lumen-lite — HTML 作品集模板

SHA-256: 8988895a57c94d1bc067fcc099e00a728a8cc0c5b344ed65543ef91eb4d9e560

2026-10-18T16:36:38.977Z

# Lumen Lite — agency website template, no framework

A studio / agency website in plain HTML, CSS and vanilla JavaScript. Open `index.html` and it runs — no npm install, no bundler, no Bootstrap, no Tailwind, no jQuery.

![Home](docs/home.png)

**[Live demo — all 10 pages](https://lumen-studio-template.netlify.app)** · light and dark

---

## What's in here

| Page | |
|---|---|
| `index.html` | Home — hero, client marquee, services, selected work, pricing teaser, testimonials, CTA |
| `contact.html` | Contact — form layout, office details, social links |
| `404.html` | Not found |

The nav and in-page links to the other seven pages point at the live demo, so nothing dead-ends — you can see exactly what the full template contains before deciding.

![Contact](docs/contact.png)

---

## Quick start

```bash
git clone https://github.com/Anatolii198/lumen-lite.git
cd lumen-lite
```

Open `index.html`. That's the whole setup.

If your browser blocks local files, serve the folder:

```bash
python -m http.server 8000
```

---

## How it's built

**One stylesheet, one script.** `css/style.css` holds everything, with design tokens at the top. `js/main.js` is 2.5 KB and does three things: the mobile menu, the theme toggle, and reveal-on-scroll.

**Tokens, not magic numbers.** Colours, radius and page width live in `:root`:

```css
:root{
  --paper:#fbfaf9; --panel:#ffffff; --ink:#14140f; --muted:#6c6a62;
  --line:#e8e5df; --accent:#ff4d2e;
  --r:18px; --wrap:1200px;
}
```

Change `--accent` and the whole site re-skins.

**Light and dark, both designed.** The dark palette is its own set of values, not a filter inversion. It follows the system setting by default, the toggle overrides it, and the choice is remembered in `localStorage` under `lumen-th`.

**Responsive** from 360 px up — the nav collapses to a slide-down menu, grids reflow to one column.

**Accessible defaults:** semantic landmarks, visible focus states, `aria-label` on icon buttons, and `prefers-reduced-motion` respected in the reveal animation.

---

## One dependency, named honestly

The type is **Syne**, **Hanken Grotesk** and **JetBrains Mono**, loaded from Google Fonts. That's the only external request the template makes. Every font stack has a system fallback, so the pages still work without it — they just look plainer.

To cut it entirely: delete the three `<link>` tags in each `<head>` and set `--disp` / `--sans` / `--mono` to system fonts, or self-host the files.

---

## The full template

This repository is the free cut.

| | Lumen Lite | Lumen Studio |
|---|---|---|
| Pages | Home + Contact + 404 | 10 |
| Work, Services, Studio, Pricing, Case study, Journal, Article | — | ✓ |
| Light & dark | ✓ | ✓ |
| Responsive | ✓ | ✓ |
| Commented source + README | partial | ✓ |

**[Get Lumen Studio — $19](https://payhip.com/b/UhYwk)** · [live demo](https://lumen-studio-template.netlify.app)

Want it customised — your copy, your brand, your content, a working contact form or a CMS behind it? That's a paid service, quoted per job. Ask through the store.

---

## Notes

The copy, client names and testimonials are placeholder content for a fictional studio. The contact form is a layout only — point its `action` at your own backend or a form service.

Browser support: current Chrome, Edge, Firefox and Safari, desktop and mobile.

## License

MIT — see [LICENSE](LICENSE). Use it in personal and commercial projects.