Array

Best for

• Solar and battery installers. It's written to the small-scale scheme (STCs), the Cheaper Home Batteries Program, accredited installers, and honest savings claims (see "Solar: what we build in").
• Anyone selling power, charging or efficiency:
  • EV charger installers (Volt Lane: charging on your own solar, and a photo quote)
  • community energy groups (Kettering Energy: honest battery sizing, no commissions)
  • electricians, energy retailers and heat pump installers
• Audiences: households comparing quotes, people adding a battery to old solar, and farms and small businesses watching their bills.

Less suited to: a large-scale or commercial solar developer, or a product shop shipping panels without installation.

Personality and voice

Bright and honest, like an installer who shows the numbers, gives a range and tells you when something isn't worth it.

• Headlines: "Make your own power, keep more of it." · "How big a battery?" · "From quote to switch-on."
• Buttons: "Get an estimate" · "Ask for a quote"
• Microcopy:
  • "45 STCs, about $1,710 off"
  • "$1,030 to $1,480 a year"
  • "From 1 January 2027 the same battery would get about $570 less."
• Words to avoid:
  • "free solar", "zero bills", "guaranteed savings" and "government-approved"
  • "limited-time rebate" when it's the normal step-down
  • any pressure to sign today

Colour

Measured contrast (WCAG).

• Midday:
  • ink on paper 16.4:1
  • muted on paper 5.8:1 (5.3:1 on well)
  • panel on paper 7.8:1 (7.2:1 on well, 6.9:1 on its soft fill), white on panel 8.4:1
  • ink on sun 9.7:1; sun ink 6.9:1 (6.6:1 on its soft fill)
  • ok 5.8:1, alert 6.1:1
• After sunset:
  • ink 17.0:1
  • muted 7.7:1 (7.1:1 on card)
  • panel 9.2:1 (8.4:1 on card), text on panel 8.3:1, panel on its soft fill 7.6:1
  • sun ink 11.6:1 (9.7:1 on its soft fill)
  • ok 10.9:1, alert 9.3:1
• Example dials: Volt Lane green, Kettering teal and Sunbird eucalypt all meet AA, light and dark, and so does each closing card.

Typography

• Display: Saira, 500–800. Headlines, results and totals. Squared, engineered and friendly.
• Body: Heebo, 400–700. Reading, forms and buttons.
• Mono: B612 Mono, 400 and 700. kW, kWh, dollars, dates and labels. Designed for cockpit legibility.

The signature move: the lit words charge up. They're set in cell blue over a strip of cells that fills with amber from left to right in steps, like a battery charging.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with an amber label; a sticky header with the panel mark; a solar array in perspective under the hero copy, with a low sun rising behind it.
• Hero: copy on the left, which stays in view on wide screens; the solar estimate on the right.
• Then: the battery planner beside its heading; the day curve full width; the install tracker with two notices; questions; and a dark closing card with the sun setting behind a panel.

Shape

• Engineered: --r-s 6px, --r-m 12px, --r-l 18px.
• Hardware in CSS: the mark, the hero array, the live cell grid in the estimate, the battery, the sun's arc in each page head and the closing panel are drawn in CSS. No images needed.

Motion language

• Charge: the cells under the lit words fill in twelve steps.
• Estimate and battery:
  • Cells light up one by one as the system grows.
  • The battery fills.
  • The tier bars grow.
  • Totals rise in when they change.
• Elsewhere:
  • The hero sun rises.
  • The page-head sun travels its arc to midday.
  • The current install step pulses.
  • The closing sun sets.
  • The mark's sun lifts on hover.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, with the default from prefers-reduced-motion). Calm stops all of it.
• After sunset switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Your own installs, crews and customers' roofs, with permission. The template draws its hardware in CSS, so nothing is borrowed. Avoid stock photos of panels on houses you didn't do, and drone shots of solar farms for a residential installer.

Signature components

• Solar estimate: .sizer[data-sizer] (.hero-card in a hero) with script[data-sz-data] (perKw, panelW, stc, deeming, tariff, fit, supply). It contains:

  • select[data-sz-zone] with option[data-rating] (the CER zone ratings)
  • input[data-sz-bill], a [data-sz-face] segmented control (data-f, an orientation factor) and input[data-sz-kw] (whole panels: 3.08 to 13.2 kW in 440 W steps)
  • [data-sz-cells], [data-sz-badge], outputs [data-sz="panels|gen|stc|net|save|payback"], and [data-sz-note]

  STCs are kW × zone rating × deeming years, rounded down.

• Battery planner: .battery[data-battery] with script[data-bt-data] (perKwh, stc, factors as [[from date, factor]], night). It contains:

  • input[data-bt-k], [data-bt-fill] (--lv), [data-bt-big] and [data-bt-tiers]
  • [data-bt-lines], [data-bt-net] and [data-bt-note]

  The discount is usable kWh × factor: 100% to 14 kWh, 60% to 28 kWh and 15% to 50 kWh, rounded down.

• Day curve: .daycurve[data-daycurve] with script[data-dc-data] (rating). It contains:

  • input[data-dc-kw], input[data-dc-use] and a [data-dc-bat] segmented control (kWh)
  • .dc-bars li (--g solar used, --x exported, --b from the battery, --u use) and [data-dc="gen|self|export|import"]

  The battery runs twice through the day, so it starts the evening as it would on a run of sunny days.

• Install tracker: .install[data-install] with script[data-in-data] (lead days), input[data-in-date], and .st rows (data-off days from the install day; .done, .now), each with [data-st-date].

• Supporting pieces: .plan-pair, .card, .facts (--n columns, or .stack), .notice, .side-box, .checks, .faq, .close-card (--close-bg, --close-em).

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu. Escape, an outside click or choosing a link closes it, and Tab stays inside while it's open.
• Current page: aria-current="page", shown as a soft pill.
• Inner pages: .page-head (the sun's dotted arc), .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"]; form[data-template].
• Tiles, segmented control, gate, slider, switch, tables: .choices, .seg, [data-gate], input.range, .switch[role=switch], .table.
• Events:
  • sizer (kw, panels, stcs, net, save)
  • battery (kwh, stcs, discount, net, factor)
  • daycurve (gen, self, exported, imported, battery)
  • install (date)
• Helper: ArrayStyle.refresh(root), and ArrayStyle.last, the latest detail of each event, for scripts that load afterwards. It isn't window.Array, which would replace JavaScript's own Array.

Solar: what we build in

We checked these for Australian installers in October 2026:

• STCs: a system earns kW × zone rating × the deeming years, rounded down.
  • Deeming: five years for systems installed in 2026, then one fewer each year until the scheme ends in 2030.
  • Zone ratings: 1.622 (zone 1), 1.536 (zone 2), 1.382 (zone 3) and 1.185 (zone 4).
  • Price: certificates trade around $37 to $40.
• The Cheaper Home Batteries Program: since 1 May 2026, the discount is STCs on usable capacity at a factor of 6.8. It's 100% to 14 kWh, 60% from 14 to 28 kWh and 15% from 28 to 50 kWh. The factor steps down every 1 January and 1 July (5.7 from January 2027) to 2.1 in late 2030. It's set by the install date.
• Accreditation: installers are accredited by Solar Accreditation Australia, and their numbers belong in the footer and on the paperwork.
• Selling: the New Energy Tech Consumer Code asks for honest selling with no high pressure, and clear written quotes that show the expected performance and payment terms. The Australian Consumer Law gives 10 business days to cancel unsolicited sales.
• Savings claims: a range, built from the customer's own bill and stated assumptions, never a guarantee.

These notes are design guidance, not legal or financial advice.

• Changes to the Cheaper Home Batteries Program from 1 May 2026 (Solar Choice)
• STCs explained (green.com.au)
• The New Energy Tech Consumer Code explained (SolarQuotes)

Do and don't

• Do show the price after the discounts, and the discounts themselves.
• Do give savings as a range, and say what it depends on.
• Do tell people when a smaller system, or no battery, would suit them better.
• Don't say "free", "zero bills" or "guaranteed".
• Don't call the normal step-down a limited-time offer.
• Don't put text on amber in anything but ink.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Estimate: labelled fields, a segmented control with aria-pressed, and a labelled slider. Every result is text in a description list; the price is announced. The cell grid is decoration.
• Battery: a labelled slider with its value in text. The tiers have a text key, and every figure is in the lines and the note. The drawn battery is decoration.
• Day curve: the chart is decoration. The totals are text, and "bought from the grid" is announced.
• Install tracker: an ordered list with dates and states in text.
• Testing: responsive to 360px, and tested with motion on and off, in Midday and After sunset.

How to make it yours