PowerXXXX layout and style guide

Status: the design system of the PowerXXXX products. It is implemented in PowerSolver (wizard, Results, Compare); the other products adopt it with the checklist in §11. Every value below is the one in the code: powersolver-wizard/css/theme.css (tokens and the shared components of §8: forms, buttons, cards, tables, alerts, badges, tabs, dialogs — every page loads it, so no page can miss the theme), js/theme.js (theme choice), index.html (shell and logo). Page-specific files only add layout.

Rule zero: a component never contains a raw colour, font or size. It uses a token (var(--ps-…)). A new need is a new token in theme.css, defined for both themes.

1. Themes

Two dark themes with the same layout, components and behaviour; only the palette changes. The user picks one in the sidebar; the choice applies to every page at once and never changes data or settings.

1.1 Palettes (from the reference design)

2. Colour tokens

Use the semantic token, never the palette value.

2.1 Surfaces, borders, text

Page background: background: var(--ps-glow), var(--ps-bg);

2.2 Accent and states

Text on the accent is dark (--ps-on-accent) in both themes, never white.

2.3 Status colours

The same in both themes, except warning in Amber (the yellow would read as the accent).

Alerts and badges use a 12 % tint of the status colour as background, a 40 % edge, normal text, and the status colour for the icon: background: rgba(var(--ps-danger-rgb), 0.12).

2.4 Data colours

Categories in plans and charts (16 hues) and priorities keep a fixed palette, independent of the theme: they encode data. Use them only for data, never for interface elements.

3. Typography

Load: https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap

4. Logo

Each theme has its own mark (from the reference design), next to the product name in Plus Jakarta Sans SemiBold.

• Colour: --ps-logo-main (the theme accent), on the dark background only. No gradient, no outline, no shadow.
• Proportions: view box 29 × 39; never stretch. Sizes: 27 × 36 px in the sidebar, 50 × 67 px on the sign-in page, favicon from the same file.
• Clear space: at least half the mark's width on every side.
• In a page: one inline <symbol> per mark, both referenced, the theme shows one: <svg class="ps-logo"><use class="ps-logo--violet" href="#ps-logo-violet"/><use class="ps-logo--amber" href="#ps-logo-amber"/></svg>
• Other PowerXXXX products use the same marks and principles (faceted letter, accent colour, name beside it); their own letter shape is a branding decision still to take.

5. Spacing, radii, shadows, motion

prefers-reduced-motion: reduce turns transitions and animations off.

6. Icons

Bootstrap Icons 1.11, outline style, in the text colour (--ps-text-secondary; --ps-text when selected; --ps-accent-text for an active navigation item). No coloured or filled icons except status icons in alerts. Sizes: 1 rem in buttons and navigation, 1.75 rem on choice cards.

7. Application layout

┌──────────────┬───────────────────────────────────────────────┐
│ Sidebar      │ Header: page title                   context  │
│ 280 px       ├───────────────────────────────────────────────┤
│ logo + name  │ Step bar (wizards)                            │
│ navigation   ├───────────────────────────────────────────────┤
│ file actions │ Content (cards, forms, tables)                │
│              │                                               │
│ resources    ├───────────────────────────────────────────────┤
│ theme switch │ Footer: Previous · Next (sticky)              │
│ language     │                                               │
│ user         │                                               │
└──────────────┴───────────────────────────────────────────────┘

• Sidebar: --ps-bg, right border --ps-border, padding 1.5 rem, gap 1 rem. Order from top: brand, navigation, file actions, resources, then at the bottom theme switch, language, user. No run button: a run starts from the wizard's last step. Below 768 px it shrinks to 60 px: icons only, labels hidden visually (still read by screen readers).
• Content: the pages of the product (an <iframe> in PowerSolver); header and footer --ps-bg with a --ps-border line; the footer is sticky with --ps-shadow-md.
• Grids: Bootstrap 5.3 columns; choice cards 4 per row (col-lg-3), 3 (col-md-4), 1 on phones.
• No horizontal scroll at any width down to 375 px.

8. Components

8.1 Buttons

Radius --ps-radius-md, weight Medium (primary SemiBold). One primary button per area.

8.2 Navigation (sidebar)

8.3 Step bar (wizards)

Numbered circles 28 px, label beside. Upcoming: transparent circle, --ps-border-strong edge, muted label. Current: filled accent circle with dark number, label --ps-text SemiBold, 3 px accent underline. Done: filled accent circle like the current one (no underline). Unavailable: 55 % opacity. Below 768 px only the circles show.

8.4 Choice cards (e.g. type of plan)

Surface, 1 px --ps-border-strong edge, radius --ps-radius-lg, outline icon top-left then the label, left-aligned. Hover: 60 % accent edge, raised surface. Selected: --ps-surface-selected, accent edge, ✓ in the top-right corner in accent. Focusable (tabindex="0"), Enter or Space selects, aria-pressed says which is selected.

8.5 Cards and panels

--ps-surface, --ps-border, radius --ps-radius-lg; header --ps-surface-raised. Figure cards: label in muted text, number 2 rem Bold, caption muted.

8.6 Forms

Fields: --ps-bg background, --ps-border-input edge, radius --ps-radius-sm, text --ps-text, placeholder muted. Focus: accent edge + --ps-focus-ring. Error: danger edge and message in danger. Disabled: disabled tokens. Labels Medium in --ps-text-secondary. Checkboxes: accent when checked.

8.7 Alerts, badges, verdicts

Tinted background of the status colour (§2.3), radius --ps-radius-md, text in --ps-text. Badges: solid status colour with dark text, or accent tint with soft-accent text. A verdict pill ("Ready to use") is a success-tinted pill with a dot.

8.8 Tables, tabs, lists, menus

Tables transparent, --ps-border rows, hover --ps-accent-subtle, head --ps-surface-raised. Tabs: secondary text, active tab --ps-text with an accent underline. Dropdowns and list groups: raised surface, selected = selected surface.

8.9 Dialogs, progress, notifications

Dialogs: --ps-surface, strong edge, radius --ps-radius-lg, --ps-shadow-lg, backdrop black 60 %. Progress bars: raised track, accent bar, pill radius. Spinners: accent. Banners after an import: success tint with Import again as a small outline button.

8.10 Theme switch

A two-option radio group in the sidebar ("Theme: ● Violet ● Amber"), the selected option on the selected surface. Arrow keys move the choice; only the selected option is in the Tab order. Mounted with PSTheme.mount(container).

9. Accessibility (WCAG 2.1 AA)

Every control is reachable with the keyboard; hidden labels are hidden visually (clip), never with display: none when they name a control; icons that carry no meaning have aria-hidden="true".

10. Theme mechanics

• <html data-theme="violet|amber">, set by js/theme.js loaded in <head> before the first paint.
• The choice is kept per browser under localStorage["ppt_theme"] (like ppt_language); pages in iframes follow at once, other tabs through the storage event.
• API: PSTheme.get(), PSTheme.set('amber'), PSTheme.apply(theme), PSTheme.mount(container).
• Canvas charts cannot read CSS: read a token at draw time, getComputedStyle(document.documentElement).getPropertyValue('--ps-text-muted').
• Files shared with a product that has not adopted the themes write var(--ps-x, <old colour>) or color-mix(in srgb, var(--ps-x, <old colour>) 20%, transparent): themed here, unchanged there.
• Theme switch labels are translated (theme.label, theme.violet, theme.amber in each locale).

11. Adopting the system in another PowerXXXX product

1. Copy css/theme.css and js/theme.js unchanged; load the font, then theme.css after the product's own CSS, and theme.js in <head>.
2. Add the logo symbols and the brand block (§4) to the shell; product name next to the mark.
3. Map the product's existing colour variables onto the --ps-* tokens as aliases (as theme.css does for --wizard-*), so existing styles follow at once.
4. Replace the remaining raw colours component by component (the token tables above); gradients become the solid accent.
5. Mount the theme switch above the language switcher; add the three theme.* texts to every locale.
6. Check both themes on every screen, the contrast table (§9), keyboard use and a 375 px width.