Room 20 · Solar and storage for homes and small businesses · Concept
Lumivane
Clear energy for real roofs.
Lumivane, a fictional solar and storage company whose home page is one roof under a sky that follows a sun you move from dawn to night, with the arithmetic and assumptions beside it.
Concept project — fictional brand. This project was created by ARTLOGIC to demonstrate a possible brand and digital experience. The organization, name, people, prices, and data shown are fictional. This is not client work and does not represent measured business results.
01 The brief
- The brand
- Lumivane is a fictional solar and storage company for homes and small businesses. Its tagline is "Clear energy for real roofs."
- The problem
- Solar sites tend to promise savings. This one shows what a day of sun does, where the energy goes, and which assumptions sit behind each figure.
02 The idea
The sun drives the whole page
- What you see
- The home page is one house in section. A single scrubber moves the sun from dawn to night, and the page ground, the house shadow, the clock and the copy change with it. Energy flows are drawn on the house as bands, thicker for more kilowatts, and each moment is also written as a plain sentence.
- How it works
- The drawing is SVG from the day model and the calculator formulas. One range input sets the time; the sky colours are computed from it and every text and control colour is derived so contrast holds at every quarter hour. A table gives the same figures.
03 Design system
- The sky#A9D5EE groundNo fixed page colour: peach at dawn, blue at noon, coral at dusk, ink-blue at night.
- Ink or paper#0A121A inkWhichever reads better on the sky at that minute.
- Flow gold#FFC53D accentThe sun and the energy bands.
- Muted ink#2A3944 mutedSecondary text, derived from the ground.
- Flow gold #FFC53D. The sun, bands, battery level and slider thumb. Never text.
- Noon sky #A9D5EE. The ground at 13:00.
- Type
- Instrument Serif
Headline, the large clock and the one-line description of each time of day. - Hanken Grotesk
Body text, sentences, labels and tables, with tabular figures.
- Instrument Serif
- Edges
- Pill controls, 3 px ink section lines, flat fills. No cards, no shadows, no boxes.
- Motion
- Nothing animates: the sky changes only when the visitor moves the sun, so reduced motion needs no special case.
04 Process
Pre-production
Pre-production set the thesis, a pinned art direction and a build plan with formulas, an assumptions table and worked examples. It also set the rule of no savings, payback or return claims.
Build
The site was built from the plan: a one-roof home page, a calculator, concept project pages, technology and resources pages, and a demo contact form.
Finish review
Impeccable finish-review rounds checked the built pages against the direction and the quality bar.
Fixes
The review produced an ordered list of fixes, applied and then checked again.
05 Technology and accessibility
- Stack
- Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
- Particular to this site
- SVG roof drawing with a draggable sun
- Page colours computed from the time of day
- Calculator driven by documented formulas
- Access
- Keyboard-operable range slider with a spoken value text
- Every moment written as a plain sentence, plus a table
- Contrast of text and controls tested at every quarter hour, dawn to night
- Flows told apart by solid, dashed and dotted bands as well as colour
- Skip link and visible focus outlines
- No animated sky or motion
- Tests
- Covered by its own Playwright end-to-end spec and a unit test file for its logic.
06 Honest notes
Lumivane is a fictional brand and this is a concept project by Artlogic. Projects are scenarios, there are no installed-capacity figures, and values appear only as illustrative ranges.
The contact form is a demo. It says so on the page and stores nothing.
The drawing is original SVG made in code; the home page uses no photographs.
07 See it
Fictional prototype. A concept by ARTLOGIC for a fictional brand. English only.