design system deconstructor

I have deconstructed the minimalist SaaS landing page into a systematic design specification and a reusable template prompt.

DESIGN SYSTEM BREAKDOWN

Canvas

• Size: 1440 × 1024 (Desktop)

Grid

• Type: 12-column centered
• Columns: 12 (80px width)
• Margins: 120px
• Gutters: 24px

Typography

• H1: 64px / 700 / Inter / Line-height: 1.1
• H2: 36px / 600 / Inter / Line-height: 1.2
• Body: 18px / 400 / Inter / Line-height: 1.6

Colors

• Primary: #000000 (Black)
• Secondary: #666666 (Muted Gray)
• Accent: #0070F3 (Brand Blue)
• Background: #FFFFFF (White)
• Text: #111111 (Deep Gray)

Variables

• {{HERO_TITLE}}: Main value proposition
• {{HERO_SUB}}: Secondary feature description
• {{CTA_TEXT}}: Primary action button label
• {{FEATURE_ICON}}: SVG or icon identifier
• {{BRAND_LOGO}}: SVG logo source

Rules

• Title ≤ 2 lines
• Body ≤ 45 words
• Image Ratio = 16:9
• Logo Min Width = 140px

Reusable Template Prompt

You are a professional designer. Create a SaaS landing page using this exact system:

CANVAS: 1440×1024
GRID: 12 columns | Margin 120px | Gutter 24px

VISUAL HIERARCHY

1. {{HERO_TITLE}} — Inter 64px 700
2. {{HERO_SUB}} — Inter 36px 600
3. {{BODY}} — Inter 18px regular

COLOR SYSTEM

• Primary: #000000
• Accent: #0070F3
• Background: #FFFFFF
• Text: #111111

COMPONENTS

• Hero section: Centered text with {{HERO_TITLE}}
• CTA button: "{{CTA_TEXT}}" with 8px border-radius, #000000 background
• Feature Grid: 3-column layout using {{FEATURE_ICON}}

RULES

• Title max 2 lines
• Maintain all spacing using the 8px grid system

OUTPUT: A Tailwind CSS and HTML snippet that follows this system exactly.

Next steps

1. Review the variable mapping to ensure all dynamic fields are captured.
2. Run the Template Prompt in your preferred frontend environment.
3. Apply the stress test by replacing {{HERO_TITLE}} with a 3-line string to check layout stability.