Internal · Do not publish

Section & Element
Library

Internal design reference. Each section shows live previews with a background color switcher. Replace placeholder content with your project's design system.

Sections: A — Typography B — Colors & Tokens C — Bento Grid D — Brand Statement E — Stacking Panels F — Card Filtering Patterns
A Typography · Font Scale · Responsive Sizing

Typography Scale

Display font (font-display) and body font (font-sans) at every scale step. Uses clamp() for fluid responsive sizing. All values come from design tokens in tailwind.config.mjs.

BG:
TXT:

font-display · var(--font-display)

Hero Headline

clamp(48px, 6vw, 88px) · weight 700 · letter-spacing -3px

Section Heading

clamp(36px, 4vw, 64px) · weight 700 · letter-spacing -2px

Card Title Large

clamp(24px, 3vw, 44px) · weight 600 · letter-spacing -1px

Subsection Title

22px · weight 600 · letter-spacing -0.5px

Button / Navigation Label

16px · weight 600

font-sans · var(--font-sans)

Body text at 18px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Readable, comfortable line height for long-form content.

18px · weight 400 · line-height 1.65

Standard paragraph at 16px. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. The default text size for most content areas.

16px · weight 400 · line-height 1.6

Small text at 14px. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

14px · weight 400 · line-height 1.55

Tag / Label · Uppercase

10px · weight 700 · uppercase · ls 0.14em

Section Label · Uppercase

13px · weight 600 · uppercase · ls 0.1em

B Design Tokens · CSS Custom Properties

Colors & Tokens

All color tokens from tailwind.config.mjs and global.css. These values drive the entire design system. Override them in :root to rebrand.

BG:
TXT:

Primary

--color-primary

CTAs, links, brand accents

Accent

--color-accent

Secondary highlights, badges

Foreground

--color-foreground

Primary text, headings

Muted

--color-muted

Secondary text, borders

Surface

--color-surface

Card backgrounds, section fills

Background

--color-background

Page background

Spacing & Border Radius Tokens

Section Padding

spacing.section

clamp(5rem, 12vh, 10rem)

Bento Radius

borderRadius.bento

10px

4XL Radius

borderRadius.4xl

2rem

Opacity Scale (Text Hierarchy)

100% · Primary

55% · Body

35% · Muted

8% · Ghost

C Bento Grid · CSS Grid · Hover States

Bento Grid — Cards

3-column asymmetric bento grid with gradient cards. Featured card spans 2 cols × 3 rows. Each card has inner glow, hover lift, and animated arrow. Replace gradients with your brand colors.

BG:
TXT:
Service A

Your main value proposition here.

Short description of what you offer — keep it concise and compelling

Learn more
Service B

Secondary offering.

Learn more
Service C

Bright accent card.

Learn more
Featured Section

Your hero statement with highlighted keyword.

Get started
Service D

Green / teal variant.

Learn more
Service E

Purple variant card.

Learn more
D Brand Statement · CTA Section

Brand Statement

Dark section with large headline and call-to-action button. Second line at lower opacity for visual weight contrast. Adapt colors to your brand.

BG:
TXT:

Your brand moves fast.
Your website should keep up.

Let's Talk
E Layered Pin · GSAP ScrollTrigger

Stacking Panels

Full-viewport panels stacking on top of each other as you scroll. Each panel is pinned and the next slides over. Great for storytelling or multi-step features. Panel 3 demonstrates overscroll (content taller than viewport).

BG:
TXT:
Panel 1 · Feature

First thing.
Explained simply.

Describe the first key feature or story point. This panel uses the primary brand gradient. Replace with your actual content.

Panel 2 · Feature

Second thing.
Also compelling.

Describe the second feature. The accent color gradient provides visual contrast. Each panel should tell its own story.

Panel 3 · Overscroll Demo (this panel is taller than viewport)

Third thing.
With extra detail.

This panel demonstrates the overscroll effect — content is taller than the viewport. The panel scrolls through all content before the next panel slides over.

Detail A

Explain a sub-feature or benefit. Use these info cards for detailed breakdowns within a panel.

Detail B

Another sub-feature. The grid layout works well for comparing features side by side.

Detail C

More detail. This extra content ensures the panel extends below the viewport fold.

Detail D

Final detail. After scrolling through all content, the next panel slides over this one.

Panel 4 · Feature

Fourth thing.
Almost there.

Penultimate panel. Use contrasting gradients to create visual rhythm as users scroll through the story.

Panel 5 · Closing

Final statement.
Call to action.

The last panel. This one is not pinned — it scrolls normally, giving a natural end to the stacking sequence.

F GSAP Flip · Animated Grid Filtering

Card Filtering

Animated grid filtering using GSAP Flip. Click a category to filter cards with smooth layout transitions. Great for blog, portfolio, or product pages.

BG:
TXT:
Design

Visual Identity System

Complete brand identity with logo, colors, and typography guidelines.

Development

Component Library

Reusable UI components built with Astro and Tailwind CSS.

Strategy

Content Strategy

Editorial planning and content calendar for consistent publishing.

Design

Responsive Layouts

Fluid grid systems that adapt to every screen size seamlessly.

Development

Performance Optimization

Core Web Vitals tuning for Lighthouse scores above 90.

Content

Blog System

MDX-powered blog with content collections and RSS feed.

Strategy

SEO Foundations

Technical SEO setup with structured data, meta tags, and sitemaps.

Development

Animation System

GSAP-powered animations with ScrollTrigger and Flip plugins.

Content

Case Studies

Project showcase with image galleries and structured content.

Global Patterns

Patterns & Behaviors

Reusable animation patterns and interaction behaviors. These can be applied to any section or element across the project.

Pattern 01

Animate Scroll Position

Programmatic smooth scrolling to any target using GSAP ScrollToPlugin. Use for sticky nav links or "jump to" buttons.

Pattern 02

Scroll Reveal

Intersection Observer-based reveal animation. Add class="reveal" to any element and it fades up when scrolled into view. Already integrated in Layout.astro via reveal.ts.

Card 1

class="reveal"

Card 2

+ delay 0.1s

Card 3

+ delay 0.2s

Pattern 03

GSAP Presets

Pre-configured animation templates from src/utils/gsap.ts. Import and use easings, durations, and animation presets for consistent motion across the project.

Easings

smooth: power3.out
snappy: power4.out
elastic: elastic.out(1, 0.8)
bounce: back.out(1.7)

Durations

fast: 0.4s
medium: 0.8s
slow: 1.2s
entrance: 1.5s

Internal style guide · Not indexed in search · Replace placeholder content with your project's design system

Größere Karte anzeigen ↗