Design and build websites, landing pages, and web content using the Sunday Power / Sunday OS brand identity. Use when creating NextJS components, pages, or UI that should match the Sunday Power visual style.
Sunday Power is a Norwegian solar/battery energy company. The brand is bold, modern, and high-contrast — combining deep navy/purple backgrounds with electric yellow-green accents. The visual language is clean, confident, and uses generous whitespace with fluid, responsive typography.
The reference implementation is https://insights.sundaypower.com — use it as the design blueprint for margins, widths, weights, and spacing.
For concrete Next.js implementation patterns, component code, and CSS module examples, see assets/nextjs.md.
IMPORTANT: Before finalizing any UI work, always read both assets/Correct Dark Mode.png and assets/Correct Light Mode.png (using the Read tool) to visually verify your output against the approved designs. These images are the canonical visual references for what correct Sunday Power design looks like in each theme. Compare your implementation against both to ensure consistent layout, spacing, color usage, and overall visual profile across all pages and components in both dark and light mode. Use the files named Supplement in the folder as additional context.
assetsThese are non-negotiable rules from the designer. Violating any of these is an automatic rejection:
border, border-color, outline, or any visible border styling to cards, sections, containers, or components. Depth is created through background color contrast and spacing — never through borders.#fffff6 not pure #fff for a softer, warmer feelrem with responsive token overrides at breakpointsdata-theme — All components adapt between dark and light via CSS variables on the <html> element--space-l: 9rem for major section separation--gap used uniformly for grids; --pad for component paddingcolor-mix() for muted text and dividers — no hardcoded opacity values--bg — deep navy, the canvas--bg-illustration — one step lighter, creates depth--bg-card-hover — two steps lighter, confirms interactivity--text — warm white, high contrast against navy--text-muted — 45% transparent, for secondary info and descriptions--hr — 70% transparent, barely visible structural lines--accent — electric yellow-green, draws the eye to CTAs and key values--accent-subtle — pale yellow, for soft highlightsAll text uses weight 400. The medium (500) weight must never be used.
| Level | Weight | Tracking | Purpose |
|---|---|---|---|
| H1 | 400 | -0.04em | Hero headlines — tight, commanding |
| H2 | 400 | -0.02em | Section headings, stat values |
| Large | 400 | — | Subtitles, card titles |
| Body | 400 | +0.01em | Readable paragraph text |
| Small | 400 | — | Labels, tags, metadata |
0.3rem radius → 50px pill on hover (0.2s ease-in-out)0.3rem radius → 1rem on hover + translateY(-2px) liftvar(--r) → border-radius: 50% on hoverbackground-color 0.4s ease on body| Scale | Token | Desktop | Use |
|---|---|---|---|
| XS | --space-xs | 0.6rem | Tight gaps (header padding, badge spacing) |
| S | --space-s | 1.5rem | Component-level spacing (margins between elements) |
| M | --space-m | 2.5rem | Section padding, hero spacing |
| L | --space-l | 9rem | Major section separation |
| Pad | --pad | 1.5rem | Horizontal page/component padding |
| Gap | --gap | 1.5rem | Grid and component gaps |
The single source of truth. When building a new page, start with this foundation:
:root {
/* ── Palette ── */
--spw-deep: #090044;
--spw-deep7: #1a1250;
--spw-deep14: #2b245d;
--spw-white: #fffff6;
--spw-white7: #f2f2e8;
--spw-white14: #e5e5db;
--spw-yellow-01: #faffb4;
--spw-yellow-02: #f2ff80;
--spw-yellow-03: #e2ff06;
/* ── Theme tokens — dark default ── */
--bg: var(--spw-deep);
--bg-illustration: var(--spw-deep7);
--bg-card-hover: var(--spw-deep14);
--text: var(--spw-white);
--text-muted: color-mix(in srgb, var(--text), transparent 45%);
--hr: color-mix(in srgb, var(--text), transparent 70%);
--btn-cta-bg: var(--spw-yellow-03);
--btn-cta-text: var(--spw-deep);
--btn-sec-bg: var(--spw-deep14);
--btn-sec-text: var(--spw-yellow-02);
--tag-bg: var(--spw-deep14);
--tag-text: var(--spw-yellow-02);
--accent: var(--spw-yellow-03);
--accent-subtle: var(--spw-yellow-01);
/* ── Typography ── */
--font: 'Basel Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--h1-size: 5.5rem; --h1-lead: 5.5rem; --h1-track: -0.04em;
--h2-size: 3.3rem; --h2-lead: 3.7rem; --h2-track: -0.02em;
--large-size: 1.5rem; --large-lead: 1.9rem;
--body-size: 1rem; --body-lead: 1.4rem; --body-track: 0.01em;
--small-size: 0.7rem; --small-lead: 1.1rem;
/* ── Spacing ── */
--pad: 1.5rem;
--gap: 1.5rem;
--space-xs: 0.6rem;
--space-s: 1.5rem;
--space-m: 2.5rem;
--space-l: 9rem;
/* ── Radius ── */
--r: 0.3rem;
--r-hover: 1rem;
--r-large: 2.5rem;
/* ── Misc ── */
--line: 2px;
--transition-radius: border-radius 0.2s ease-in-out;
}
[data-theme="light"] {
--bg: var(--spw-white);
--bg-illustration: var(--spw-white7);
--bg-card-hover: var(--spw-white14);
--text: var(--spw-deep);
--btn-sec-bg: var(--spw-white14);
--btn-sec-text: var(--spw-deep);
--accent: var(--spw-deep);
--accent-subtle: var(--spw-deep7);
}
/* ── Responsive overrides ── */
@media (max-width: 991px) {
:root {
--pad: 1rem; --gap: 1rem; --space-l: 7rem;
--h1-size: 4rem; --h1-lead: 4rem;
--h2-size: 3rem; --h2-lead: 3.2rem;
--large-size: 1.3rem; --large-lead: 1.7rem;
}
}
@media (max-width: 767px) {
:root {
--pad: 0.5rem; --gap: 0.8rem;
--h1-size: 2.8rem; --h1-lead: 2.8rem;
--h2-size: 2rem; --h2-lead: 2.4rem;
--large-size: 1.2rem; --large-lead: 1.5rem;
}
}
@media (max-width: 479px) {
:root { --h1-size: 2.2rem; --h1-lead: 2.4rem; }
}
::selection { color: #e2ff06; background: #090044; }
| Breakpoint | Max-width |
|---|---|
| Tablet | 991px |
| Mobile | 767px |
| Small mobile | 479px |
Primary: Basel Grotesk — weight 400 (regular) only. The 500 (medium) weight exists as a fallback but must never be used.
Sunday OS app: Inter (via https://rsms.me/inter/inter.css)
@font-face {
font-family: 'Basel Grotesk';
font-weight: 400;
font-style: normal;
src: url('https://raw.githubusercontent.com/sundaypower/claude-design-tokens/main/fonts/Basel%20Grotesk%20Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Basel Grotesk';
font-weight: 500;
font-style: normal;
src: url('https://raw.githubusercontent.com/sundaypower/claude-design-tokens/main/fonts/Basel%20Grotesk%20Medium.woff2') format('woff2');
}
| Purpose | Color |
|---|---|
| Hydro / teal accent | #2EC4B6 |
| Wind / purple | #8B5CF6 |
| Solar / amber | #E8A308 |
| Up-regulation / orange | #f97316 |
| CTA yellow | #e2ff06 |
| Blue | #3b82f6 |
| Green (live/positive) | #22c55e |
| Red (error/negative) | #ef4444 |
All assets are hosted at https://raw.githubusercontent.com/sundaypower/claude-design-tokens/main/.
Four color variants — each available in horizontal and vertical orientations, as compact "SPw" mark or full "Sunday Power" wordmark. Formats: SVG, PNG (2X/4X), JPG, EPS.
Base path: Logo/{variant}/{variant} - {layout}.{ext}
| Variant | When to use |
|---|---|
SPw Deep | Default — dark navy logo for light backgrounds |
SPw Off White | Light version for dark/navy backgrounds |
SPw Yellow | Yellow-accent version for emphasis |
SPw Black | Pure black for print or high-contrast contexts |
Layout options: SPw Horizontal, SPw Vertical, Sunday Power Horizontal, Sunday Power Vertical
Example SVG URLs: