Field notes
The garden changes slowly. A short note is enough to remember what was noticed.
No note entered.For this demonstration only. Nothing is saved.
Ready to try.
A little light for useful things.
Lamplight is a small interface system for reading, working and sharing. It brings a calm, consistent character to the things people use.
Two modes describe the light: Night is lit against a dark ground; Day uses ink on a light ground. Three surfaces describe the work: Study gives reading room to breathe; Ledger helps people compare and work through information; Folio prepares content for print.
The examples use one fictional community garden project. All names, numbers and states are illustrative.
Try the system
Change the light and surface of this compact sample. Your note stays on this page and is not saved.
The sample shows the default Night and Study. Enable JavaScript to change the display.
On the worktable
A compact table keeps state in words as well as colour.
| Note | State | Updated |
|---|---|---|
| Window light | Ready | 28 Oct |
| Autumn leaves | Review | 29 Oct |
| Rainfall | Resting | 30 Oct |
A state describes the sample, not a live service.
Bring Lamplight into your project
This beta is distributed as downloadable files. These examples assume you have downloaded and unpacked the release assets locally.
Download core · Download React adapter · Download browser starter · SHA-256 checksums · Build manifest
With a package manager
Install the core tarball from its local path. For React, also install the adapter tarball and React.
npm install ./lamplight-core-0.1.0-beta.5.tgz
npm install ./lamplight-react-0.1.0-beta.5.tgz reactImport @lamplight/core/styles.css and, if desired, @lamplight/core/fonts.css. React components are exported from @lamplight/react.
In a browser
Unpack the browser ZIP into your project, preserve its folders, and link its core stylesheet from your page. Put l-document on the html element or scope components with l-room.
<link rel="stylesheet" href="./core/lamplight.css">
<main class="l-room">...</main>The stylesheet includes tokens, components, modes and surfaces. Fonts and living light are optional.
Build with AI
Extract the browser starter and make its core folder, principles.md and the component reference available. Local projects can use the downloaded tarballs. File access varies by tool; ask it to identify unreadable or missing files. Replace the bracketed text and review its output. Download the full AI starters guide.
Coding agents
Use this starter with Claude Code, Codex or another coding agent that can access your local project.
Common coding agent starter
Build [brief] for [audience] to help with [task]. Inspect the supplied Lamplight documentation and actual exports first. Use the downloaded local core tarball and, if needed, the React adapter tarball in a suitable local project, or the extracted core CSS folder. The Lamplight beta has not been published to npm; use downloaded files. Ask for any missing or unreadable files or unclear exports rather than inventing them.
Use actual Lamplight tokens and components. Choose Night or Day and a Study, Ledger or Folio surface suited to the brief; these are independent choices. Provide keyboard access, visible focus, states in words and reduced motion. Avoid coloured top or left bars on rounded panels. Keep fonts and living light opt-in. Produce a local preview and files for review; do not deploy.Claude Design
Claude Code offers /design-sync for a code-based design system and /design for design work. Provide available code assets and confirm imports; Lamplight import is untested. Claude Design guide · Design system tutorial.
Claude Design starter
Create [brief] for [audience] to help with [task]. I will provide the Lamplight code assets and documentation available to this workspace. Inspect them and tell me which tokens and components were actually imported; ask for missing or unreadable files rather than inventing exports. Lamplight-specific import into Claude Design has not been tested.
Use actual Lamplight tokens and components. Choose Night or Day and a Study, Ledger or Folio surface suited to the brief; these are independent choices. Include keyboard access, visible focus, states in words and reduced motion. Avoid coloured top or left bars on rounded panels. Keep fonts and living light opt-in. Prepare a preview and files for review without deploying.ChatGPT
For Codex and a local project, use the Coding agents starter above. For Sites, start in ChatGPT Work with a website request, attach available source files and save a version for review. Sites guide · Codex project guidance.
ChatGPT Sites starter
Build a website for [brief], serving [audience] with [task]. Use the attached Lamplight source files, CSS and documentation where available. Inspect the actual exports and ask for missing or unreadable files rather than inventing components. The Lamplight beta has not been published to npm; use downloaded files and do not assume an npm runtime.
Use actual tokens and components. Choose Night or Day and a Study, Ledger or Folio surface suited to the brief; these are independent choices. Include keyboard access, visible focus, states in words and reduced motion. Avoid coloured top or left bars on rounded panels. Keep fonts and living light opt-in. Save a version and provide its preview and files for review without deploying.Gemini
Choose Canvas in Gemini for a file-based draft, or Build mode in AI Studio for an app project. Provide accessible files and review the code locally. Build mode documents React and Node/npm, but does not establish hosted installation of local tarballs. Build mode · Canvas.
Gemini files starter
Create [brief] for [audience] to help with [task]. Use the supplied accessible Lamplight source files, CSS and documentation. Inspect actual exports and ask for missing or unreadable files rather than inventing components. Do not assume hosted installation of local beta tarballs or CDN access.
Use actual tokens and components. Choose Night or Day and a Study, Ledger or Folio surface suited to the brief; these are independent choices. Include keyboard access, visible focus, states in words and reduced motion. Avoid coloured top or left bars on rounded panels. Keep fonts and living light opt-in. Return code and files suitable for a local preview and review without deploying.Guidance checked 31 October 2026. Availability depends on your account and environment. The Lamplight beta has not been published to npm; use downloaded files.