Christian Tilk

Generated Jun 12, 2026

DESIGN.md for antigravity-werbeagentur.vercel.app

antigravity-werbeagentur.vercel.app

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design System Inspired by CLASSIC Marketing

1. Visual Theme & Atmosphere

CLASSIC Marketing embodies a sophisticated, professional digital ecosystem designed for B2B marketing agencies. The visual language combines deep, authoritative dark tones with vibrant accent colors to create an atmosphere of trust, innovation, and forward-thinking methodology. The design balances clean modernism with warmth through strategic use of golden highlights, creating a premium yet approachable brand presence. Typography is bold and commanding, emphasizing clarity and decisive action. The overall aesthetic conveys speed, reliability, and technical expertise while remaining inviting to prospective clients seeking marketing acceleration.

Key Characteristics

Deep teal and navy foundation with high contrast white typography
Golden-yellow accents for critical calls-to-action and highlights
Subtle transparency and layered glass-morphism effects
Strong typographic hierarchy with ultra-bold headlines
Spacious, breathing layouts that emphasize clarity
Professional photography with warm, collaborative imagery
Rounded, friendly border radii balanced with modern geometry

2. Color Palette & Roles

Primary

Deep Navy (#00202B): Core background and dominant surface color; establishes authority and trust
Off-White (#FFFFFF): Primary text and interactive element color on dark surfaces

Accent Colors

Brand Gold (#FCB900): Primary call-to-action buttons, highlights, and emphasis states
Secondary Gold (#FFB800): Supporting accent and hover state variations
Tertiary Gold (#FFB000): Subtle accent and secondary highlights
Magenta (#FF115E): Energetic accent for special emphasis
Cyber Orange (#FF7A00): Vibrant secondary accent
Cyan (#00C2FF): Technology and innovation highlights
Navy Blue (#007CBA): Secondary interactive elements
Purple (#A855F7): Modern accent for special UI components

Interactive

Button Dark (#00202B): Dark button backgrounds with white text
Button Gold (#FCB900): Primary CTA button with shadow elevation
Border White Transparent (rgba(255, 255, 255, 0.14)): Subtle borders on dark surfaces
Border Dark Transparent (rgba(0, 32, 43, 0.18)): Subtle borders on light surfaces

Neutral Scale

Charcoal (#444444): Secondary text and muted content
Light Gray (#FAFAFA): Subtle background and card variants
Near Black (#1A1A1A): Deep text and strong contrast elements
Medium Gray (#3F4A4F): Secondary surfaces and dividers
Border Gray Light (#E0E0E0): Delicate borders on light backgrounds
Border Gray Medium (#D8D8D8): Standard borders on neutral surfaces
Border Gray Pale (#DDDDDD): Minimal borders for subtle separation

Surface & Borders

Glass Dark (rgba(255, 255, 255, 0.06)): Semi-transparent card backgrounds on dark
Glass Semi-Dark (rgba(0, 32, 43, 0.58)): Input field backgrounds with reduced opacity
Glass Light (rgba(255, 255, 255, 0.82)): Bright semi-transparent surface backgrounds
Surface Border (1px solid rgba(255, 255, 255, 0.14)): Primary border treatment for cards

Shadow Colors

Shadow Dark Intense (rgba(0, 32, 43, 0.22)): Deep elevation shadows for cards
Shadow Dark Medium (rgba(0, 32, 43, 0.18)): Medium elevation shadows
Shadow Dark Light (rgba(0, 32, 43, 0.1)): Subtle elevation shadows
Shadow Dark Minimal (rgba(0, 32, 43, 0.08)): Minimal shadow for delicate effects
Shadow Gold (rgba(252, 185, 0, 0.35)): Warm glow around gold CTAs

3. Typography Rules

Font Family

Primary: Avenir Next, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Secondary: Arial, Helvetica Neue, sans-serif (for fallback and UI labels)

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display (H1)	Avenir Next	71px	850	73px	0px	Hero headlines, maximum impact
Heading Large (H2)	Avenir Next	66px	850	70px	0px	Section titles, prominent messaging
Heading Medium (H3)	Avenir Next	34px	850	35px	0px	Subsection headers
Body Large	Avenir Next	18px	850	25px	0px	Primary body text, testimonials
Body Standard	Avenir Next	16px	400	24px	0px	Navigation, standard content
Button	Arial	15px	700	18px	0px	Primary CTA and action buttons
Link	Avenir Next	16px	400	24px	0px	Hyperlinks and navigation items
Label Strong	Avenir Next	12px	900	30px	0px	Badge labels, tag text
Caption	Arial	14px	300	19px	0px	Small supporting text, captions
List Item	Arial	15px	400	21px	0px	Bullet points and list content

Principles

Bold hierarchy: Ultra-heavy weights (700–850) create commanding presence
Large line heights: Extra breathing room (1.4–2.5x) ensures readability on dark backgrounds
Consistent family: Avenir Next for primary content, Arial for UI labels and buttons
Sizing strategy: Base increments of 14–18px for body; 34–71px for headings
Professional warmth: Font weights oscillate between ultra-bold and light to create rhythm

4. Component Stylings

Buttons

Primary CTA (Gold)

Background: #FCB900
Text Color: #00202B
Font: Arial, 15px, weight 700
Padding: 15px 30px 13px 30px
Border Radius: 60px
Border: None
Box Shadow: rgba(252, 185, 0, 0.35) 0px 4px 20px 0px
Height: 48px
Line Height: 18px
Hover: Shadow increases to rgba(252, 185, 0, 0.5) 0px 8px 28px 0px; background shifts to #FFB800
Active: Background darkens to #FFB000; shadow reduces

Secondary Button (White Border)

Background: Transparent
Text Color: #FFFFFF
Font: Arial, 15px, weight 700
Padding: 15px 30px 13px 30px
Border Radius: 60px
Border: 1px solid #FFFFFF
Box Shadow: None
Height: 48px
Line Height: 18px
Hover: Background becomes rgba(255, 255, 255, 0.1); border remains solid
Active: Background becomes rgba(255, 255, 255, 0.2)

Ghost Button

Background: Transparent
Text Color: #FFFFFF
Font: Avenir Next, 19px, weight 300
Padding: 0px 0px 0px 0px
Border Radius: 0px
Border: None
Box Shadow: None
Height: 44px
Line Height: 30px
Hover: Text color becomes #FCB900
Active: Text color remains #FCB900

Cards & Containers

Glass Card (Dark Background)

Background: rgba(255, 255, 255, 0.06)
Text Color: #FFFFFF
Font: Avenir Next, 16px, weight 400
Padding: 32px 32px 32px 32px
Border Radius: 24px
Border: 1px solid rgba(255, 255, 255, 0.14)
Box Shadow: rgba(0, 12, 18, 0.22) 0px 24px 70px 0px
Line Height: 24px
Hover: Box shadow intensifies; background becomes rgba(255, 255, 255, 0.08)
Active: Border becomes 1px solid rgba(255, 255, 255, 0.24)

Link Block Card

Background: #00202B
Text Color: #FFFFFF
Font: Avenir Next, 19px, weight 300
Padding: 26px 26px 26px 26px
Border Radius: 18px
Border: 1px solid rgba(255, 255, 255, 0.16)
Box Shadow: None
Line Height: 30px
Hover: Background becomes #00303F; border becomes 1px solid rgba(255, 255, 255, 0.3)
Active: Box shadow applies: rgba(0, 32, 43, 0.12) 0px 8px 15px 0px

Inputs & Forms

Dark Input (Dark Background)

Background: rgba(0, 32, 43, 0.58)
Text Color: #FFFFFF
Font: Avenir Next, 16px, weight 400
Padding: 13px 14px 13px 14px
Border Radius: 16px
Border: 1px solid rgba(255, 255, 255, 0.14)
Box Shadow: None
Height: 52px
Line Height: 24px
Placeholder: rgba(255, 255, 255, 0.5)
Focus: Border becomes 1px solid rgba(255, 255, 255, 0.3); background becomes rgba(0, 32, 43, 0.75)
Hover: Border becomes 1px solid rgba(255, 255, 255, 0.2)

Light Input (Light Background)

Background: rgba(255, 255, 255, 0.82)
Text Color: #00202B
Font: Avenir Next, 16px, weight 800
Padding: 12px 14px 12px 14px
Border Radius: 16px
Border: 1px solid rgba(0, 32, 43, 0.18)
Box Shadow: None
Height: Auto
Line Height: 24px
Placeholder: rgba(0, 32, 43, 0.4)
Focus: Border becomes 1px solid rgba(0, 32, 43, 0.35); background remains light
Hover: Border becomes 1px solid rgba(0, 32, 43, 0.25)

Minimal Input (Neutral)

Background: #FAFAFA
Text Color: #1A1A1A
Font: Helvetica Neue, 13px, weight 300
Padding: 13px 14px 13px 14px
Border Radius: 20px
Border: 1px solid #E0E0E0
Box Shadow: None
Height: 48px
Line Height: 20px
Placeholder: #999999
Focus: Border becomes 1px solid #00202B; background remains light
Hover: Border becomes 1px solid #CCCCCC

Navigation

Main Navigation

Background: rgba(0, 0, 0, 0) (transparent overlay)
Text Color: #FFFFFF
Font: Avenir Next, 16px, weight 400
Padding: 0px 0px 0px 0px
Border Radius: 0px
Border: None
Box Shadow: rgba(0, 32, 43, 0.18) 0px 12px 40px 0px (on scrolled state)
Height: 44px
Line Height: 24px
Link Hover: Text color becomes #FCB900
Active Link: Text color is #FCB900; underline appears below text

Badges & Labels

Primary Badge

Background: #FCB900
Text Color: #00202B
Font: Avenir Next, 12px, weight 900
Padding: 4px 12px 4px 12px
Border Radius: 12px
Border: None
Box Shadow: None
Line Height: 18px
Display: Inline-block

Secondary Badge

Background: rgba(255, 255, 255, 0.15)
Text Color: #FFFFFF
Font: Avenir Next, 12px, weight 900
Padding: 4px 12px 4px 12px
Border Radius: 12px
Border: 1px solid rgba(255, 255, 255, 0.3)
Box Shadow: None
Line Height: 18px
Display: Inline-block

5. Layout Principles

Spacing System

Base Unit: 4px
Scale: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 44px, 60px
Gap Usage: 8px (tight spacing), 12px–16px (standard spacing), 20px–24px (section separation), 40px–60px (major section breaks)
Padding Context: 13px–14px (input fields), 15px–30px (buttons), 26px–32px (cards), 28px–60px (hero sections)
Margin Context: 4px (micro), 16px–24px (component separation), 36px–60px (section margins)

Grid & Container

Max Width: 1200px (primary content container)
Column Strategy: 12-column grid for desktop; fluid to 1-column on mobile
Section Patterns: Full-width hero with dark background and overlay; centered content blocks; alternating left–right layouts
Gutter: 16px–24px between columns
Breakpoint-specific widths: 800px (tablet), 282px–331px (card widths on desktop)

Whitespace Philosophy

Generous breathing room emphasizes premium positioning and readability. Consistent 24px–32px padding within cards and 40px–60px vertical margins between sections create rhythm. Hero sections employ large line heights (35px–73px) and abundant vertical space. Navigation and form inputs maintain compact internal padding (12px–15px) while sections breathe with 36px+ margins.

Border Radius Scale

Minimal: 0px (buttons with text-only styling, navigation)
Small: 12px (badges, subtle UI accents)
Standard: 16px (input fields, minimal refinement)
Medium: 18px (link block cards, image overlays)
Large: 20px (refined inputs, secondary surfaces)
Extra Large: 24px (primary cards, major containers)
Maximum: 28px (hero cards, signature surfaces)
Pill: 60px (full-width buttons, rounded CTAs)

6. Depth & Elevation

Level	Treatment	Use
Base (None)	No shadow	Flat backgrounds, nav, text layers
Minimal	`rgba(0, 32, 43, 0.08) 0px 12px 36px 0px`	Subtle card elevation, secondary containers
Light	`rgba(0, 32, 43, 0.1) 0px 8px 15px 0px`	Dropdown menus, modest floating elements
Medium	`rgba(0, 12, 18, 0.22) 0px 24px 70px 0px`	Primary cards, featured content
Deep	`rgba(0, 32, 43, 0.18) 0px 12px 40px 0px`	Navigation (scrolled), hero sections
Accent	`rgba(252, 185, 0, 0.35) 0px 4px 20px 0px`	Gold buttons, premium CTAs

Shadow Philosophy: Shadows follow a dark-toned palette matching the brand's deep navy foundation. Opacity increases with elevation, creating perceptible depth hierarchy. Gold shadow accent reserves warmth for critical interactive elements, drawing attention to primary actions. Shadows use 12–24px blur radii for soft, professional diffusion. Minimal shadows preserve the glass-morphism aesthetic while maintaining visual separation. Scrolled navigation applies deeper shadow to signal state change.

7. Do's and Don'ts

Do

Use Avenir Next for all primary typography — maintain brand consistency across headlines and body text
Reserve gold (#FCB900) for primary CTAs only — use secondary golds for hover and active states, preserving emphasis hierarchy
Apply consistent 32px padding to cards — ensures professional breathing room and visual consistency
Employ 24px border-radius on primary containers — reinforces the refined, modern aesthetic
Stack generous margins (40px–60px) between major sections — establishes clear visual rhythm and scanability
Use transparent glass effects (rgba(255, 255, 255, 0.06)) for overlaid content on dark backgrounds — maintains brand sophistication
Maintain minimum touch targets at 48px height — ensures accessibility and mobile usability
Apply the deep navy (#00202B) as dominant background — establishes authority and trust
Use white text at 16–19px weight 300–400 on dark backgrounds — ensures legibility and modern lightness
Implement rounded pill buttons (60px radius) for primary CTAs — creates friendly, action-oriented appearance

Don't

Don't mix multiple accent colors in single composition — stick to one accent per section (gold for CTAs, cyan for technical highlights)
Don't use border-radius below 16px on interactive elements — prevents sharp, uninviting appearance
Don't apply shadows greater than 0px 24px 70px 0px — risks heavy, dated appearance
Don't exceed 71px font size for headlines — maintains visual hierarchy and readability
Don't use body text smaller than 14px — compromises accessibility on all devices
Don't place white text on light backgrounds without sufficient contrast — violates WCAG standards
Don't apply padding less than 12px to form inputs — creates cramped, unprofessional feel
Don't mix serif and sans-serif families — maintain Avenir Next and Arial only
Don't use solid backgrounds for semi-transparent card designs — dilutes the glass-morphism brand aesthetic
Don't stack margins under 20px between distinct content blocks — creates visual confusion and reduced scanability
Don't apply multiple shadows to single element — creates muddy, confusing depth cues

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	320px–480px	Single column, reduced padding (16px–20px), font sizes -2–4px, pill buttons full-width, cards 100% width, navigation vertical
Mobile Large	481px–768px	Two-column grid option, padding 20px–24px, font sizes -1–2px, cards 90% width, navigation horizontal in footer
Tablet	769px–1024px	Two-column grid, standard padding (24px–32px), full font sizes, card width 282px (constrained), navigation horizontal in header
Desktop	1025px–1440px	Three+ column grid, full padding (32px–40px), full font sizes, card width 282px, navigation full horizontal header
Large Desktop	1441px+	Max-width container 1200px, padding 40px–60px, full font sizes, card width 331px, full-width hero sections

Touch Targets

Minimum size: 48px × 48px (buttons, interactive elements)
Recommended spacing: 16px minimum gap between adjacent touch targets
Button padding mobile: 15px 20px 13px 20px (reduced from desktop 30px)
Input height mobile: 44px minimum
Navigation link size mobile: 20px font, 16px padding vertical

Collapsing Strategy

Hero sections: Full viewport height on desktop; 60–70vh on tablet; 50–60vh on mobile
Card grids: 3 columns on desktop, 2 on tablet, 1 on mobile
Padding collapse: 60px → 40px → 24px → 16px as screens shrink
Font scaling: Headline sizes reduce 10–15% on tablet, 20–30% on mobile
Navigation: Horizontal on desktop/tablet; vertical slide-out or stacked on mobile
Button widths: Fixed width (110px) on desktop; 100% width on mobile
Margin between sections: 60px → 40px → 24px as viewport narrows
Glass opacity: Slight increase on mobile for better readability

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Brand Gold (#FCB900) — use for main call-to-action buttons with rgba(252, 185, 0, 0.35) 0px 4px 20px 0px shadow
Primary Background: Deep Navy (#00202B) — dominant surface color for hero sections and main container
Text on Dark: Off-White (#FFFFFF) — primary text color on all dark backgrounds
Secondary Text: Charcoal (#444444) — for muted or secondary content
Card Background: Glass Dark (rgba(255, 255, 255, 0.06)) — semi-transparent overlay cards on dark
Input Background Dark: Glass Semi-Dark (rgba(0, 32, 43, 0.58)) — dark mode input fields
Input Background Light: Glass Light (rgba(255, 255, 255, 0.82)) — light mode input fields
Borders on Dark: rgba(255, 255, 255, 0.14) — subtle separation on dark backgrounds
Heading Text: Off-White (#FFFFFF) — all headlines and section titles
Accent Colors: Cyan (#00C2FF), Magenta (#FF115E), Purple (#A855F7) — for special emphasis or secondary highlights

Iteration Guide

Always use Avenir Next (primary) or Arial (UI labels) — never introduce new font families
Maintain 32px padding in all primary cards — exception only for compact micro-interactions (12px–16px)
Apply border-radius 60px to all pill-shaped buttons — ensures recognizable, modern CTA appearance
Reserve gold (#FCB900) exclusively for primary actions — hover states use #FFB800, active states use #FFB000
Use deep navy (#00202B) as default background — only use alternates (#00303F, #FAFAFA) for intentional contrast blocks
Match line-height to font size times 1.3–1.4 — maintains professional typography rhythm
Implement glass-morphism via rgba(255, 255, 255, 0.06) background + 1px solid rgba(255, 255, 255, 0.14) border — core card aesthetic
Apply shadow rgba(0, 12, 18, 0.22) 0px 24px 70px 0px to elevated cards — signature depth effect
Collapse spacing progressively at breakpoints: desktop 60px → tablet 40px → mobile 20px margins between sections
Ensure all interactive elements meet 48px minimum height — accessibility requirement, improves mobile usability
Use font-weight 700 for buttons and labels, weight 850 for ultra-bold headlines, weight 300–400 for body text — maintains hierarchy
Apply hover states by increasing shadow opacity or shifting background opacity +0.02 units — preserves visual consistency

Want a DESIGN.md like this for your own website?