Styleguide

Design system documentation for Sahaja Yoga Deutschland.

Default (dark)

Sahaja Yoga logo, dark variant

Inverted (white on dark)

Sahaja Yoga logo, inverted variant

File: /images/sy_logo_2026.svg

Sizing rule: Always use inline styles: style={{ height: '48px', width: 'auto' }}

Inversion: Use className="brightness-0 invert" for the white variant.

Colors

All colors extracted from the hero image of Shri Mataji. Dot marks the primary shade for each palette.

Maroon

Primary brand color, CTAs, links, focus rings

50

#fef2f3

100

#fde6e7

200

#fcd0d3

300

#f9a5ab

400

#f47481

500

#e94444

600

#d32f2f

700

#991f1f

800

#7d1a1a

900

#661616

Tailwind: maroon-50 ... maroon-900 · CSS: --color-maroon-700

Cream

Warm backgrounds, feature sections

50

#fefdfb

100

#fef9f3

200

#fdf3e7

300

#f9e8d1

400

#f3d9b5

500

#e5c18a

600

#c9a26d

700

#a88350

800

#876640

900

#6b5133

Tailwind: cream-50 ... cream-900 · CSS: --color-cream-700

Sage

Nature/growth sections, secondary backgrounds

50

#f7f8f5

100

#eef0e8

200

#dde2d1

300

#c5cfb3

400

#a9b88f

500

#8a9c6e

600

#6f7f55

700

#586545

800

#475339

900

#3a4430

Tailwind: sage-50 ... sage-900 · CSS: --color-sage-700

Rose

Feminine accents, soft highlights

50

#fdf5f7

100

#fceaee

200

#f9d5de

300

#f4b3c2

400

#ed8ca2

500

#e06684

600

#ca4668

700

#a33651

800

#872e46

900

#6f293d

Tailwind: rose-50 ... rose-900 · CSS: --color-rose-700

Powder

Programme sections, cool contrast

50

#f5f8fb

100

#ebf2f8

200

#d6e4f0

300

#b5d0e5

400

#8db7d8

500

#6a9cc9

600

#5382b8

700

#446ba1

800

#3a5984

900

#334a6b

Tailwind: powder-50 ... powder-900 · CSS: --color-powder-700

Earth

Text colors, grounding, dark backgrounds

50

#f9f7f5

100

#f0ede8

200

#e0d9d0

300

#cbbfb0

400

#b3a08b

500

#9d856d

600

#8a6f5a

700

#735b4c

800

#5e4c40

900

#2d1f15

Tailwind: earth-50 ... earth-900 · CSS: --color-earth-700

CSS Variables (globals.css): --color-primary: #991f1f · --color-accent: #e94444 · --color-text: #2d1f15 · --color-text-light: #5e4c40

Typography

Noto Serif (Headings)

Erkenne Dich Selbst

font-family: var(--font-noto-serif) · Weights: 400, 700

Noto Sans (Body)

Sahaja Yoga ist eine Meditationsmethode, die 1970 von Shri Mataji Nirmala Devi begründet wurde.

font-family: var(--font-noto-sans) · Weights: 400, 500, 600, 700

Fluid Type Scale

All sizes use clamp() for smooth scaling between viewports. No breakpoint jumps.

text-7xl56-84pxHero XL
text-6xl48-72pxHero
text-5xl40-60pxH1
text-4xl36-48pxH2
text-3xl30-42pxH3
text-xl20-26pxXL
text-lg18-22pxLG
text-base16-18pxBase
text-sm14-16pxSM
text-xs12-14pxXS

Line Heights

leading-tight

1.2

Headings

leading-snug

1.4

Subheadings

leading-normal

1.6

Short text

leading-relaxed

1.8

Body text

Spacing

Standard Tailwind spacing (4px base unit). Baseline rhythm: 1.8rem. Grid unit: 8px.

1
0.25rem (4px)
2
0.5rem (8px)
3
0.75rem (12px)
4
1rem (16px)
6
1.5rem (24px)
8
2rem (32px)
10
2.5rem (40px)
12
3rem (48px)
16
4rem (64px)
20
5rem (80px)
24
6rem (96px)

Grid & Layout

Container

max-w-7xl (1280px) with responsive padding:

px-4 (16px) / sm:px-6 (24px) / lg:px-8 (32px)

Page width

Content capped at max-w-container (1240px).

Extended in tailwind.config.ts

Two-column pattern

grid grid-cols-1 lg:grid-cols-2 gap-8

Stacks on mobile, side-by-side at lg (1024px)

Hero height

height: min(100vh, 850px) for hero sections.

Section caps use min(100vh, 700px). Never mix min-height with max-height.

Viewports

sm

640px

Mobile landscape / small tablet

md

768px

Tablet portrait

lg

1024px

Desktop (mobile/desktop switch)

xl

1280px

Large desktop

The primary mobile/desktop switch happens at lg (1024px). Fluid typography scales continuously via clamp(), no breakpoint jumps.

Components

Button

components/ui/Button.tsx supports 4 variants and 3 sizes. Uses inline styles for Safari compatibility. Focus ring via Tailwind: focus:ring-4 focus:ring-maroon-200 focus:ring-offset-2.

Variants

Sizes

Props: variant (primary | outline | ghost | inverted) · size (sm | md | lg) · href (renders as Link) · onClick (renders as button)

Focus Ring Pattern

All interactive elements use focus:outline-none focus:ring-4 focus:ring-maroon-200 focus:ring-offset-2. This provides a visible, high-contrast focus indicator for keyboard navigation.

Architecture

Stack

  • Next.js 16 (App Router, SSG)
  • Tailwind CSS v4
  • Sanity CMS (project: mkdh9rck)
  • TypeScript

Safari Rule

Tailwind v4 classes frequently fail in Safari. Use inline styles for all critical layout, colors, sizing, and transforms. Tailwind is fine for hover/focus states and progressive-enhancement classes.

Key Directories

  • app/ — pages & routing
  • app/[slug]/ — SSG dynamic routes
  • components/layout/ — Header, Footer
  • components/sections/ — Hero, CoverBlock, ContentBlock
  • components/ui/ — Button, ScrollReveal
  • lib/ — Sanity client, helpers

Routing

Homepage is hardcoded in app/page.tsx. All Sanity static pages use app/[slug]/page.tsx via generateStaticParams. City pages at app/programme/[slug]/page.tsx. Mediathek at app/mediathek/page.tsx.