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-enterfade-up once; no parallax or autoplay; respectprefers-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 ────────────────────────────────────────────────────────