════════════════════════════════════════════════════════ Silverbush Website Build Services · Phase 7 of 10 D12 — New Design System Phase 7 — Design Concept © Silverbush AG — confidential · do not distribute, process, or use in any other way ════════════════════════════════════════════════════════ # D12 — New Design System **Direction:** Evolve the existing brand (option a) — no rebrand. The EVOCEAN v2.0 token pack supplied by the client already modernises the brand around the logo purple, so the design concept evolves it rather than replacing it. Modern · professional · minimal · high trust · clean typography; mobile first, fast, simple navigation, clear hierarchy. Assessment specification only — nothing is published or applied to the live website. [PENDING — client approval of design concept; photography, customer evidence and legal details remain open; no live changes] ## 1. D4 open points resolved | # | Area | What was wrong | What the new system does | |---|---|---|---| | 1 | Brand | Logo purple/brown clashed with a blue UI, weakening recognition. | UI colour is the logo purple #6B2D92; brown survives only as the heritage accent; the D4 B11 blue proposal is superseded by the client token pack. | | 2 | Contrast | #6BB1C9 (2.4:1) and #CECFCF (1.56:1) failed WCAG AA. | Every text pair below is calculated and passes AA in light and dark themes; topic colours split into a ≥3:1 graphic tone and a ≥4.5:1 text tone. | | 3 | Hero | Text-only hero with hashtags and dot separators. | Night hero with purple glow behind the visual (never the headline), one H1, one sentence, one gold action; hashtags removed. | | 4 | Buttons | No button component; CTAs inconsistent. | One Button component: cta (gold, one per view), default (purple), outline, ghost, with hover/focus/disabled/loading states. | | 5 | Breakpoints | 25 ad-hoc breakpoints. | Four tiers on Tailwind defaults (640/768/1024/1280/1440), mobile-first. | | 6 | Fonts | External Google Fonts (GDPR and performance). | Sora, Hanken Grotesk and JetBrains Mono self-hosted via Fontsource variable fonts; no third-party font request. | | 7 | Imagery | Dated 2018–2019 event photos, steam-engine metaphor, broken customer images. | Photography direction below; real team/customer imagery [PENDING — client supply and publication approval]; tool screenshots retained where current. | | 8 | Icons | No icon system. | Lucide icons, 1.75 px stroke, sizes 16/20/24/32, colour via topic or current text token. | ## 2. Typography Sora (display, geometric, distinctive at large sizes), Hanken Grotesk (body, highly legible, wide language coverage incl. German/French diacritics), JetBrains Mono (eyebrows, code, identifiers such as MC/DC). All self-hosted variable fonts. | Level | Font | Size (mobile → desktop) | Weight | Line height | Letter spacing | |---|---|---|---|---|---| | Display | Sora | 40 → 64 px | 600 | 1.05 | -0.03em | | H1 | Sora | 32 → 48 px | 600 | 1.1 | -0.02em | | H2 | Sora | 26 → 36 px | 600 | 1.15 | -0.02em | | H3 | Sora | 20 → 24 px | 600 | 1.25 | -0.01em | | H4 | Sora | 18 → 20 px | 600 | 1.3 | 0 | | Body | Hanken Grotesk | 16 → 18 px | 400 | 1.6 | 0 | | Small | Hanken Grotesk | 14 px | 400 | 1.5 | 0 | | Caption / eyebrow | JetBrains Mono | 12 px | 500 | 1.4 | 0.06em (uppercase) | ## 3. Colour Primary purple #6B2D92 · CTA gold #F8C630 · heritage brown #69321E · night #100A15. Components use semantic tokens only (HSL triplets in `src/styles.css`), never hex. | Token | Light | Dark | Role | |---|---|---|---| | `--background` | #FFFFFF | #100A15 | Page surface | | `--foreground` | #100A15 | #F3EEF7 | Body text | | `--card` | #FFFFFF | #1D1228 | Card surface | | `--primary` | #6B2D92 | #B98BDF | Brand purple — links, primary buttons, headings accent | | `--primary-foreground` | #FFFFFF | #1B0A29 | Text on primary | | `--primary-hover` | #7E3FAE | #CBA6E8 | Primary hover | | `--primary-deep` | #4E1F6E | #D9C7EA | Strong headings / pressed | | `--secondary` | #EDE3F5 | #2C1C3B | Secondary surface | | `--secondary-foreground` | #4E1F6E | #EDE3F5 | Text on secondary | | `--muted` | #F5F2F8 | #22172D | Muted section surface | | `--muted-foreground` | #5F5B66 | #A9A3B0 | Secondary text | | `--cta` | #F8C630 | #F8C630 | Gold conversion action (one per view) | | `--cta-foreground` | #2A0F3D | #2A0F3D | Text on gold | | `--heritage` | #69321E | #C98A6A | Logo brown — sparing accent | | `--destructive` | #C8283C | #F2596B | Error | | `--success` | #2F7D4F | #5BBE85 | Success | | `--border` | #E7E1EE | #33243F | Hairlines (decorative) | | `--ring` | #6B2D92 | #B98BDF | Focus ring | Topic accents (set by `data-site`): www (corporate) — Lavender; lifesciences — Teal; worktransformation — Emerald; digital-adoption — Blue; reqif — Copper. Each provides `--topic` (graphics ≥3:1), `--topic-strong` (text ≥4.5:1) and `--topic-tint` (surface). ### WCAG AA verification (calculated) | Mode | Pair | Ratio | Required | Result | |---|---|---|---|---| | light | `--foreground` on `--background` (Body text) | 19.51:1 | 4.5:1 | Pass | | dark | `--foreground` on `--background` (Body text) | 17.08:1 | 4.5:1 | Pass | | light | `--muted-foreground` on `--background` (Secondary text) | 6.61:1 | 4.5:1 | Pass | | dark | `--muted-foreground` on `--background` (Secondary text) | 7.95:1 | 4.5:1 | Pass | | light | `--muted-foreground` on `--muted` (Secondary text on muted) | 5.97:1 | 4.5:1 | Pass | | dark | `--muted-foreground` on `--muted` (Secondary text on muted) | 6.96:1 | 4.5:1 | Pass | | light | `--primary` on `--background` (Links / primary text) | 8.69:1 | 4.5:1 | Pass | | dark | `--primary` on `--background` (Links / primary text) | 7.27:1 | 4.5:1 | Pass | | light | `--primary-foreground` on `--primary` (Primary button label) | 8.69:1 | 4.5:1 | Pass | | dark | `--primary-foreground` on `--primary` (Primary button label) | 6.97:1 | 4.5:1 | Pass | | light | `--secondary-foreground` on `--secondary` (Secondary button label) | 9.69:1 | 4.5:1 | Pass | | dark | `--secondary-foreground` on `--secondary` (Secondary button label) | 12.65:1 | 4.5:1 | Pass | | light | `--cta-foreground` on `--cta` (Gold CTA label) | 10.62:1 | 4.5:1 | Pass | | dark | `--cta-foreground` on `--cta` (Gold CTA label) | 10.62:1 | 4.5:1 | Pass | | light | `--destructive` on `--background` (Error text) | 5.49:1 | 4.5:1 | Pass | | dark | `--destructive` on `--background` (Error text) | 5.96:1 | 4.5:1 | Pass | | light | `--success` on `--background` (Success text) | 5.04:1 | 4.5:1 | Pass | | dark | `--success` on `--background` (Success text) | 8.5:1 | 4.5:1 | Pass | | light | `--heritage` on `--background` (Heritage accent (large/graphic)) | 10.12:1 | 3.0:1 | Pass | | dark | `--heritage` on `--background` (Heritage accent (large/graphic)) | 6.81:1 | 3.0:1 | Pass | | light | `--ring` on `--background` (Focus indicator (non-text)) | 8.69:1 | 3.0:1 | Pass | | dark | `--ring` on `--background` (Focus indicator (non-text)) | 7.27:1 | 3.0:1 | Pass | | light | `--foreground` on `--card` (Card text) | 19.51:1 | 4.5:1 | Pass | | dark | `--foreground` on `--card` (Card text) | 15.72:1 | 4.5:1 | Pass | ## 4. Spacing and layout - Base unit 4 px; scale 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px (Tailwind 1, 2, 3, 4, 6, 8, 12, 16, 24). - Container: max-w-6xl (1152 px) content, max-w-[1400px] wide; gutters 16 / 24 / 32 px. - Section rhythm: 48 px mobile, 64–96 px desktop. Whitespace target ≥40% of viewport on entry views. - Breakpoints: mobile 0–639 px (design first); tablet sm 640 / md 768 px; desktop lg 1024 / xl 1280 px; wide 2xl 1440 px. - Radius: 12 px base (sm 8, md 10, lg 12, xl 16, full for pills). Elevation uses purple-tinted shadows. ## 5. Components | Component | Specification | States | |---|---|---| | Button — cta | Gold bg, night text, radius full, h-11 px-6, shadow-cta | hover cta-hover · focus 2px ring offset 2 · active translate-y 1px · disabled 50% opacity, no shadow · loading spinner + aria-busy | | Button — primary | Purple bg, white text, radius lg | hover primary-hover · focus ring · disabled 50% | | Button — secondary/outline | 1px input border, foreground text | hover accent surface · focus ring · disabled 50% | | Button — ghost | Transparent, foreground text | hover accent surface · focus ring | | Input | h-11, 1px input border, radius md, 16px text (no iOS zoom) | focus ring primary · error destructive border + message with aria-describedby · success border success + check icon · disabled muted bg | | Card | card bg, 1px border, radius lg (12px), padding 24 (mobile 20), shadow-soft | interactive: hover shadow-medium + border primary/30, 200ms | | Navigation — desktop | Sticky header 72px, lockup left, 5 items, utility Support + language, one gold action | active item primary underline; dropdowns keyboard operable | | Navigation — mobile drawer | Right sheet, full height, 48px tap targets, accordion groups | focus trapped, Esc closes, gold action pinned at bottom | | Icons | Lucide React | 16 inline · 20 buttons · 24 feature lists · 32 offer tiles | Minimum touch target 44×44 px; visible focus ring on every interactive element; one gold action per view. ## 6. Visual language - **Photography:** real people at work with engineering tools, natural light, purple-neutral grade; current tool screenshots in device frames. No stock handshake/metaphor images. [PENDING — team and customer photography supply and publication approval] - **Graphic motifs:** night hero with purple glow; pixel cubes from the pack reserved for later use. - **Animation:** 150–300 ms, `--ease-standard`; entry 600 ms `--ease-enter` fade-up once; no parallax or autoplay; respect `prefers-reduced-motion`. - **Performance:** AVIF/WebP, explicit dimensions, lazy below the fold, ≤2 font families loaded per view weight range. ## 7. Tailwind / Lovable mapping The modern stack is Tailwind v4: tokens live in `src/styles.css` (`:root`, `.dark`, `[data-site]`) and are exposed through `@theme inline` (`--color-primary: hsl(var(--primary))`, etc.) — the equivalent of the legacy `tailwind.config.js` `extend.colors` in the supplied pack. Fonts load through Fontsource imports in the root module. - Reusable patterns: `Button` (variants cta/default/outline/ghost), `Card`, `Input`/`Label`/`Form`, `Sheet` (mobile drawer), `Accordion` (FAQ), `BrandLogo` (light/dark, compact/full). - Utilities: `bg-gradient-hero`, `bg-gradient-cta-band`, `shadow-soft/medium/cta`, `text-topic-strong`. - No extra plugins required beyond `tw-animate-css`; typography plugin optional for long-form articles. **Phase 7 complete — confirm to continue.** --- ──────────────────────────────────────────────────────── Silverbush AG © www services EVOCEAN GmbH 03.Nov.2026 Page 1 of 1 ────────────────────────────────────────────────────────