# Solar Operations Maturity Institute (SOM Institute) — Variant 3, "Ascent" Open `index.html` straight from the folder. There is no build step and nothing to install. ## Concept A maturity model is a climb. Level 0 is "blind", level 5 is "optimised and quantified", and everyone is standing somewhere on the way up. "Ascent" draws that climb as a sunrise: **night at level 0, full sun at level 5**. The same idea runs through everything on the site: - **The mark.** Six steps, one per level, each in its own colour from night to gold, under the sun. - **The name.** The wordmark, SOMInstitute, stands on the mark's steps: its baseline is the top of step 1 and its capitals reach the top of step 5. Its four capitals, S, O, M and I, carry the dawn colours of levels 2 to 4. - **The colour system.** Every level badge, step, pedestal and bar on the site takes its colour from the level it stands for. - **The page's shape.** The page itself rises into the dawn: the hero's lower edge is six cream steps, named with the spine on wide screens. Sand bands and the footer rise out of the page in the same six low steps, and the closing band climbs to a summit under the sun. The voice is warm and direct, written to "you": the asset owner, the operator or EPC, the PPA provider and the PPA customer. The claims stay plain and come only from the brief. The initiative's credibility comes from the structure of the model and the partnership the benchmark is run in, so the design's job is to make that structure easy to see, not to dress it up. ## The mark and wordmark (`assets/logo.svg`, `assets/mark.svg`, `assets/favicon.svg`) - **Mark:** a continuous staircase of six columns, levels 0 to 5, rising left to right. The columns run night `#2D1B4E` → plum → aubergine → rose → coral → gold `#F7B840`, with rounded outer corners and a gold sun above the low steps. It reads as "rising steps under a sun" and carries the 0→5 story at any size. The favicon puts it on a cream tile, so the night-coloured first steps stay visible on dark browser chrome. - **Wordmark:** **SOMInstitute**, one word, drawn as a single rounded monoline in SVG strokes (3.3 units wide, round caps and joins), not typed. The logo therefore never depends on a web font, and its round caps and arcs match the mark's rounded geometry. It sits on the mark's step grid: the baseline is the top of step 1, the capitals reach the top of step 5 (level with the sun's centre) and the lowercase reaches the top of step 4. - **The four capitals:** S, O, M and I are set apart by colour. They carry the dawn: one gradient across the four letters, from aubergine `#7A2B74` (level 2) through rose `#B23A64` (level 3) to coral `#EF7B54` (level 4), while "nstitute" is plum `#2A1748`. Being capitals, they also stand taller than the rest, so the word reads as one name, the SOM Institute, with its initials showing. The S is the previous wordmark's S, scaled; the other eleven letters were drawn to match it on the same stroke. As a logotype the capitals are exempt from the text-contrast rule, and they need to be: they run from 8.2:1 (the S) down to 2.6:1 (the I, in coral) on cream, and the I is 2.3:1 on the sand footer. The I stays legible as a full-height bar, and everything that has to be read as text (the full name beside the logo, the footer description) is set in AA colours. - **The full name** follows the wordmark in the header, after a thin rule, in small type on two lines: **S**olar **O**perations / **M**aturity **I**nstitute, the four initials in rose (`--accent`, 5.4:1 on cream) at weight 800 and the rest in `--muted`. It shows from 560 to 939 px and from 1080 px, where it fits (measured; see the rename note). It is decorative (`aria-hidden`); the logo link is labelled "Solar Operations Maturity Institute (SOM Institute): home". The footer always gives the full name, in its description. - **Sizes:** `logo.svg` is 210 × 40 units. The header shows it 184 px wide (35 px tall, the height the logo always had) and 150 px wide below 350 px; the footer shows it 210 px wide (40 px tall). - **Single-colour use:** the staircase silhouette works in one colour (plum), and so does the wordmark, though in one colour only their case sets the capitals apart. On dark backgrounds, put the mark on a cream disc, as the dock does, so the night-coloured steps don't vanish. ## Palette All tokens are CSS custom properties at the top of `styles.css`. Contrast is WCAG 2.x ratio, measured. | Token | Hex | Role | Contrast | |---|---|---|---| | `--night` | `#1E1236` | top of the dawn panels | white on it 17.6:1 | | `--plum-900` | `#2A1748` | headings, dock, text on gold | 15.2:1 on cream; white on it 16.0:1 | | `--plum-700` | `#3E1F5F` | panel gradient | white on it 13.4:1 | | `--lvl-0` | `#2D1B4E` | level 0: night | white on it 15.2:1 | | `--lvl-1` | `#4A2266` | level 1 | white on it 12.3:1 | | `--lvl-2` | `#7A2B74` | level 2 | white on it 8.7:1 | | `--lvl-3` = `--accent` | `#B23A64` | level 3; links and eyebrows on light | white on it 5.7:1; on cream 5.4:1, on sand 4.9:1, on white 5.7:1 | | `--lvl-4` = `--coral` | `#EF7B54` | level 4; decoration | plum on it 5.8:1. **Never used as text on light (2.6:1)**; the one coral letter is the wordmark's I, which is logotype, not text. | | `--lvl-5` = `--gold` | `#F7B840` | level 5; the survey button | plum on it 9.0:1 | | `--sun` | `#FFD27A` | highlights and focus ring on dark | on plum 11.2:1 | | `--cream` | `#FFF8F0` | page | — | | `--sand` | `#F8EBDD` | alternate bands, footer | — | | `--card` | `#FFFFFF` | cards | — | | `--ink` | `#22163A` | body text | 16.0:1 cream, 14.4:1 sand | | `--ink-2` | `#4A3D5E` | secondary text | 9.4:1 cream, 8.5:1 sand | | `--muted` | `#675A79` | small print | 6.0:1 cream, 5.4:1 sand | | `--on-dark-2` | `#DCD0E8` | secondary text on the dawn panels | 10.5:1 on plum | **Level text rule:** levels 0–3 carry white text, levels 4–5 carry plum text. The switch at level 4 is where the sun comes up. **The wordmark's dawn** runs `--lvl-2` → `--lvl-3` → `--lvl-4` across its four capitals; its contrast is in the mark section above. **Text on the gradients.** Body text never sits on the coral and gold. The dawn panels are dark plum gradients, and the warm colour lives only in the sun and its glow, which are positioned clear of the copy at every width (the sun moves below the copy until there is room beside it, at ≥ 1200 px). The faint stars appear only on wide screens, in the open sky right of the copy, and never behind text. I measured this rather than assuming it: each panel was rendered with its text made transparent, and the lightest background pixel under every line of text was compared with that text's colour. Over 52 page × width combinations (the four original pages at 13 widths from 320 to 1440 px), the **worst case was 6.5:1**, on a line under the home-page hero buttons that the 2026-10-07 changes removed, and **every other case was ≥ 9.4:1**. `history.html` uses the same inner-page hero and closing band but has not been through that measurement. ## Type - **Display: Outfit** (600/700). A rounded geometric sans that is friendly without being childish. Fallbacks: "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Helvetica Neue, Arial. - **Text: Plus Jakarta Sans** (400–800). It is the survey's own face, so the hand-over to the survey feels like the same place. Fallbacks: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica Neue, Arial. - Both come from Google Fonts via ``. With the fonts blocked (offline) the four original pages were re-checked: there is no overflow at 320–1280 px, the dock passes, and the SVG wordmark is unaffected. - **Scale:** H1 `clamp(2.375rem … 4.125rem)`, 700, tracking −0.03em; H2 `clamp(1.75rem … 2.75rem)`, 600; body 16 px / 1.65; eyebrows 13 px, 700, uppercase, +0.12em, each preceded by a tiny six-step glyph. ## Layout system - **Mobile-first.** Content is at most 1180 px wide, with gutters of `clamp(16px, 4.5vw, 40px)` and section rhythm of `clamp(64px, 9vw, 120px)`. - **Dawn panels** (hero, inner-page heroes, closing band) sit inset from the viewport edge by `clamp(8px, 2vw, 24px)`, with 26–36 px radii. They read as framed windows onto the dawn rather than full-bleed gradients. - **Shapes:** cards are white with 26 px radii and soft plum-tinted shadows; actions are pills. - **Breakpoints** are set by the content. The main ones are 350 (the header logo grows from 150 to 184 px), 420 (dock badge), 480 and 900 (the partner row: two by two, then four in one row), 560 (the full name, on two lines, in the header), 720, 860 (three-up cards, spine as a staircase), 940 (inline nav; the full name steps aside again until 1080 so the five nav items fit), 1180 (model ladder as a staircase) and 1200 (sun and stars beside the copy). - **The spine** is a staircase of six coloured blocks on wide screens. On a phone it becomes six bars growing from 34 % to 100 % width: the same staircase turned on its side. - **The model ladder** (`model.html`): - **≥ 1180 px:** six equal cards, each on a coloured pedestal, stepping up left to right. This is the mark drawn large for every area. - **Phones and tablets:** a climb you read downward. Each level has a coloured badge on a night-to-gold rail, and a bar under each title that grows with the level, so the ascent is felt as you scroll. - The level descriptions are copied verbatim from brief §4.3; a script checked all 7 areas and 42 levels against the brief. ## The survey call-to-action: always visible - **What it is.** A floating dock: `position: fixed` at the bottom of every page on every viewport, centred, up to 820 px wide. Dark plum, with a 1 px inner light ring (so it still separates over the dark hero) and a large soft shadow, so it reads as floating over the page. It holds the mark on a cream disc, "Solar O&M Maturity Survey · Under ten minutes · Confidential · Results by email", and the gold "Take the survey" button. On phones it shortens to "Under ten minutes / Confidential" plus the button; the survey's name is still read out to screen readers. - **It is never animated, faded or hidden**, so it is on screen from the first frame. - **It doesn't cover content:** - The footer reserves `--dock-space` (dock height + both gaps + the iOS safe-area inset) plus 28 px, so the last line on every page always ends above the dock. Measured clearance: 32–46 px. - `scroll-padding-bottom` keeps anchor jumps clear of it. - A small `focusin` guard in `site.js` scrolls any keyboard-focused element out from under it. - **It doesn't cover the navigation.** The header is at the top and the phone menu opens downward beneath it. On a 360×780 screen the open menu ended at y = 302 with four items (measured); the fifth item, Model history, adds 52 px, so it now ends at about y = 354 (calculated, not re-measured). The dock starts at y = 706. - **Verified** in headless Chrome from `file://`: on the four original pages × 5 viewports (1280×800, 1440×900, 768×1024, 360×780, 320×640) × 11 scroll positions, the dock was fully on screen and topmost (`elementFromPoint` hits the button) every time. `history.html` (added 2026-10-07) carries the identical dock markup and styles; it was checked statically, not re-rendered. ## Single sources - **Survey URL:** `SOMI_SURVEY_URL` at the top of `site.js` is the only place it is written. Every survey link carries `data-survey-link` and gets its `href` from there. Links open in the same tab; clicking from each of the four original pages was checked to land on `../solrboost_maturity_survey_v4.html`, and `history.html` carries the same address. - **Partners:** `SOMI_PARTNERS` in `site.js` holds the four names, in display order. The partner rows (`[data-partners]`) and every mention of the three benchmark partners in running text (`[data-partner="…"]`, plus `data-partner-short` for "P4G") are written from that list, so the rendered site follows a one-line edit. The pages carry the same text as their no-JavaScript fallback (see the 2026-10-06 and 2026-10-07 notes at the end). ## Accessibility - **Structure:** `lang="en-ZA"`, a skip link, `header`/`nav`/`main`/`footer` landmarks, the dock as a labelled `aside`, `aria-current` on the current page, `alt=""` on decorative art. - **Validation:** the four original pages passed `html-validate`'s recommended rules. The 2026-10-07 edits and `history.html` were checked with a tag-balance script instead, because `html-validate` isn't installed here. - **Focus:** 3 px focus rings, plum on light and sun-gold on dark. A Tab walk through the four original pages (220 stops) found every stop visible and none hidden under the dock. `history.html` has not been walked; it uses no new interactive components. - **Tap targets ≥ 44 px**, including links inside sentences, which get a padded hit area. - **Motion:** there is no horizontal scroll at 320 px (measured on the four original pages; see 2026-10-07 for `history.html`). The sunrise and the hero steps animate once, and only under `prefers-reduced-motion: no-preference`; nothing depends on the animation. With reduced motion no animation runs and scrolling isn't smoothed. ## Files | File | What it is | |---|---| | `index.html` | hero, who it's for (the four paths, to "you"), what you get, the model at a glance, how the survey works, the partner row, closing band | | `about.html` | the initiative, the model and the benchmark, why a standard model, who it helps, how the survey works and how results are worked out | | `model.html` | the spine, then all 7 areas × 6 levels in full, then how scoring works | | `history.html` | model history: the Capability Maturity Model, why it fits solar O&M, what SolrBoost kept and changed, how the model was built, and from model to benchmark | | `privacy.html` | the short privacy note | | `styles.css` | everything visual; tokens at the top | | `site.js` | survey URL, partners, phone menu, the focus guard | | `assets/` | `logo.svg`, `mark.svg`, `favicon.svg`, `sunrise.svg`, `stars.svg`, `role-*.svg` (four original line icons for the four paths) | The header, footer and dock are identical on all five pages. With no build step they are repeated in each file, so change all five together. ## Honest notes and deliberate choices - **No page needs JavaScript to read correctly.** Every survey link carries its address in the markup and every partner name is written into the page; `site.js` rewrites both from its single copies on load. A permanent change to either therefore means editing `site.js` and a find-and-replace across the five pages. The survey itself is a JavaScript app. - **On first load, on phones and on laptop screens shorter than about 770 px**, the dock used to float over the hero's last line, a line under the buttons that was removed on 2026-10-07. The hero copy now ends one line higher. Whether the dock clears it on short laptop screens hasn't been re-measured; on a 360×780 phone it is likely to sit over the lower of the two hero buttons until you scroll (estimated). At 1280×800 the whole hero copy is clear of it. - **The email address appears in the footer as well as the privacy note**, because brief §5 asks for the removal-request contact in the footer. It is the only address on the site. - **Retention is stated as "Raw responses are deleted 12 months after the report is issued."** The brief calls this the *suggested* retention. Confirm it before launch. - **The privacy note names the three benchmark partners** in both of its aggregated-results sentences, as the brief now asks (2026-10-07). - **The stakeholder copy is framing, not new facts.** Each "if you …" card explains what a standard model offers that person by pointing at the model's own level descriptions (for example Finance level 5 or the independent-verification question). No statistics, testimonials or results are shown anywhere, and the site never shows a score. - **The rest:** no dark mode (optional in the brief). The hero's steps, spine, ladders and stepped band edges are CSS rather than SVG files. The sun, stars, mark and icons are files in `assets/`. - **Things I tried and changed after looking at them:** - **The mark** was first a row of separate bars. It read as a signal-strength icon, so it became one continuous staircase. - **The hero's named steps** were first used on every page. They were too short to carry labels on the inner pages, which now use unnamed steps. - **The model ladder's staircase** first started at 1024 px. Words overflowed the narrow columns, so it now starts at 1180 px. - **The stars** first sat behind the hero text on smaller screens, so they are now wide-screen only. ## Elements worth keeping (if mixing variants) 1. The staircase mark in level colours and the monoline SOMInstitute wordmark standing on its steps, its four capitals in the dawn. 2. The level colour ramp, night → gold, with white text on 0–3 and plum on 4–5. It makes any level instantly placeable. 3. The stepped horizon: the page rising into the hero in six steps named with the spine. 4. The model ladder: pedestals rising left to right on wide screens, the downward climb with a rail and growing bars on phones. 5. The floating dock, including its focus guard and the footer's reserved space. 6. The stakeholder cards written to "you", each quoting the survey's own wording for that path. 7. Sand bands and the footer rising out of the page in six low steps. 8. The closing summit band: "Find your step." 9. The model-history staircases: the Capability Maturity Model's five steps in outline above the SOM Institute model's six in colour, with a dashed empty slot where level 0 goes. --- ## Review amendments (2026-10-06, reviewer) - Every survey anchor now carries `href="../solrboost_maturity_survey_v4.html"` in the markup as a no-JavaScript fallback; `site.js` still sets it from the single constant on load, so the production URL is still changed in one place (and, if the fallback should follow, with one find-and-replace across the pages). - Every page carries `` while the three drafts sit on the production domain. Remove it from the variant that goes live. - The partner names are now also pre-rendered in the HTML (the name lists, the sentence that listed them, and the hero line, which is no longer `hidden`), so About and the footer name them without JavaScript. `site.js` rewrites them on load exactly as before, so the one-line spelling change still works for the rendered site; a permanent change also needs a find-and-replace in the HTML, as in the other two variants. *(Wording brought up to date on 2026-10-07, when those attributes were renamed and the sentence and hero line replaced; see below.)* --- ## Partner wording and model history (2026-10-07) The owner's 2026-10-07 decisions (brief §8) change who the site credits for what. SolrBoost developed the SOM Institute maturity model. The SOM Institute benchmark (the survey, the South African cohort and the industry insights) is run in partnership with the University of Cape Town, TruePoint South Africa and Partnerships for Growth (P4G). The old wording, which cast three organisations as the initiative's originators, is gone from every page, and there is a new page about where the model comes from. ### What changed, page by page - **Home.** One partner block, where the old one was: the eyebrow "The benchmark", the heading "Run in partnership with", then the four names as identical white tiles, in this order: University of Cape Town · TruePoint South Africa · Partnerships for Growth (P4G) · SolrBoost. Every tile has the same size, type, weight and spacing. They sit four in one row from 900 px, two by two from 480 px and one under another below that. Under the row, one small line: "The maturity model behind the SOM Institute was developed by SolrBoost.", followed by a "Read the model history" link. The line that used to sit under the hero buttons is gone, so the footer is the only other place on the home page that names partners. - **About.** The old section is now "The model, and the benchmark": the brief's long form verbatim, the sentence on who operates the survey, a "Read the model history" link and the same row of four tiles. - **Footer, every page.** A third column, "Model and benchmark", carries the brief's short form in small type: "Model by SolrBoost · Benchmark partners: University of Cape Town · TruePoint South Africa · Partnerships for Growth (P4G)". All four names are set in the same ink and weight. The footer nav gains "Model history", and the legal line now says "benchmark partners". - **Privacy.** "Who sees what" opens with the long form, and both aggregated-results sentences (in the summary and in the body) name the three benchmark partners. - **Titles and meta descriptions.** No title used the old wording. The descriptions for Home, About and Model history now describe a benchmark run with the University of Cape Town, TruePoint South Africa and P4G, on a maturity model developed by SolrBoost. The model page's adds "developed by SolrBoost". The privacy note's was already neutral and is unchanged. - **Copy that said the initiative "is building" or "is creating" the model** (the home hero, About's "What the SOM Institute is" and the footer description) now describes the SOM Institute as an initiative with two parts, a model and a benchmark built on it, so it can't be read as contradicting "developed by SolrBoost". - **"Research partners" is now "benchmark partners"** everywhere. The only remaining "research partner" is the history page's "independent research partner", a different party that is never named. - **Navigation.** "Model history" sits after "The model" in the header and footer nav of all five pages, and in the phone menu with the others. With five items the header no longer fits the full name beside the inline nav below about 1080 px, so the full name hides from 940 to 1080 px (it is decorative and `aria-hidden`; the logo link carries the name). Below 940 px the menu button takes over as before. ### Code - `site.js`: the list is now `SOMI_PARTNERS`: four entries in display order, with a `short` form ("P4G") for the one name that has one. `