Swedol UI Prototype

Site overview

Starting point for navigating between all pages and components in the prototype. Always start from a copy of the templates below when building a new page — they already have the header/footer/main menu wired up via shared partials, with all design tokens in place. Full rules for components, tokens, and breakpoints live in CLAUDE.md.

Templates — always start here

Copy the right template depending on whether the page requires login or not. Never use an existing page as your starting point.

Template — Public page

Updated Logged out

Starting point for new pages that don't require login. White page background (background-primary).

template.html

Template — My Pages

Updated Logged in

Starting point for new pages under My Pages, with account nav tabs. Grey page background (background-secondary) by default.

mypages/mypages-template.html

Tokens

Design tokens from alligo-design-tokens (generated by Supernova), shown live via var(--color-...) etc., plus the eco-button/eco-checkbox component skills built on top of them. Source of truth for these pages: .claude/skills/eco-tokens/tokens.json.

Colors New

All 91 semantic color tokens, grouped by Accent/Text/Background/Surface/Border/Icon, with swatch, token name, CSS variable, and hex.

tokens/colors.html

Typography New

All 20 type styles (display/headline/title/label/alt-label/body), live-rendered mobile-first with desktop overrides — resize to see the 769px switch.

tokens/typography.html

Spacing & elevation New

The space-0–space-120 scale, all shadow/elevation tokens, border-width tokens, and the radius token.

tokens/spacing-elevation.html

Buttons New

Every button variant and size from the eco-button skill, built with the exact CSS in that skill's template.

tokens/buttons.html

Checkboxes New

Light and dark mode checkbox states from the eco-checkbox skill.

tokens/checkboxes.html

Tokens-only New

Strict compliance page — every value traces to tokens.json or the breadcrumb skill's own spec, nothing hardcoded. Lists its few unavoidable exceptions in the open.

tokens/tokens-only.html

My Pages — User management

Several parallel versions in progress — users.html is the most complete/latest.

Users - V2 New

Full user table: filters, search, column settings, balance management, add/edit/delete drawers, mobile cards.

mypages/users.html

Users — Dashboard variant Draft

Alternative layout of the users page.

mypages/users-dashboard.html

Users — V1

Ready for development Archive

Production-ready prototype. Previous version of the users page.

mypages/users_V1.html

My Page — Dashboard Test

Experimental overview page ("My Page") for the account.

mypages/dashboard_test.html

Address book

Management of the company's delivery and billing addresses.

mypages/addressbook.html

Comparison & marketing

Public pages marketing upgrades/permission tiers.

Swedol as an e-commerce partner New

SaaS-like page without pricing: benefits for individuals, businesses, and large organizations, with a comparison table, EDI/Punchout integration, and FAQ.

e-handelspartner.html

Compare permission tiers In progress

New version built section by section directly from the Figma design. Work in progress.

feature-comparison-roles.html

Compare permission tiers — earlier draft Archive

Older exploratory draft of the same comparison page, with hero + table toggle.

feature-comparison.html

Reviews

Ready for development

Product and company reviews via Trustvoice.

reviews.html

Reviews — backup Archive