SaaS Landing Page for Developer Tool

{
  "summary": "A sophisticated, 'Reality-First' design system that rejects typical SaaS fluff in favor of a structured, modernist, and technical aesthetic. It uses a strict grid, monochromatic base with a single vibrant blue accent, and heavy typographic contrast to establish authority and clarity.",
  "style": {
    "description": "The style is defined by a 'Poster Modernist' approach: high-impact sans-serif typography with negative letter-spacing and compressed leading, a flat color palette without gradients or shadows, and a functional grid system. Typography uses 'Aileron' or 'General Sans' in heavy weights for headings and mono/sans for labels. The color palette centers on a soft cream (#E3E2DE) background, deep black text (#141414), and a high-performance primary blue (#1351AA).",
    "prompt": "### Color Palette\n- **Primary Background**: `#E3E2DE` (Cream)\n- **Primary Accent**: `#1351AA` (Cobalt Blue)\n- **Primary Text**: `#141414` (Jet Black)\n- **Secondary Text**: `#444343` (Deep Gray)\n- **Muted Text/Labels**: `#7A7A7A` (Gray)\n- **Dividers/Borders**: `#C7C7C7` (Light Gray)\n\n### Typography\n- **Font Family**: 'General Sans' or 'Aileron' (Sans-serif)\n- **Hero Headlines**: Font-size: 8rem - 12rem; weight: 900 (Black); line-height: 0.85; letter-spacing: -0.04em; text-transform: uppercase or normal-case with aggressive tracking.\n- **Section Headlines**: Font-size: 5rem - 7rem; weight: 700; line-height: 0.9; letter-spacing: -0.03em.\n- **Body Text**: Font-size: 1.125rem; weight: 400; line-height: 1.5; color: `#444343`.\n- **Labels/UI Elements**: Font-size: 0.75rem; weight: 700; uppercase; letter-spacing: 0.2em; color: `#7A7A7A`.\n\n### Structural Elements\n- **Grid**: Strict 12-column layout. Typically, columns 1-3 are reserved for section labels/metadata, while 4-12 contain the primary content.\n- **Borders**: All sections separated by 1px solid `#C7C7C7` borders. No border-radius (0px corners throughout).\n- **Shadows**: None. Use flat color blocks for depth.\n- **Animations**: Fast, linear transitions (0.3s) for color changes. No 'bouncy' or 'organic' easing."
  },
  "layout_and_structure": {
    "description": "A grid-locked vertical flow where each section is explicitly demarcated by horizontal dividers. The layout utilizes a 'Label Sidebar' pattern where the leftmost 3 columns of a 12-column grid are used for metadata, labels, or navigation hints.",
    "prompts": [
      {
        "part": "Navigation",
        "prompt": "Sticky 80px height bar with a 1px bottom border (#C7C7C7). Background is cream (#E3E2DE) with 95% opacity and backdrop-blur. 12-column grid layout: Columns 1-3 contain the logo (uppercase, bold, tracking-tight). Columns 4-9 are empty or contain status indicators. Columns 10-12 contain right-aligned navigation links (text-sm, font-semibold)."
      },
      {
        "part": "Hero Section",
        "prompt": "Minimum height 85vh. Split into 12 columns. Columns 1-3: Vertical border on right, contains a 'Manifesto' label and a 16px black square icon. Columns 4-12: Massive headline (6xl to 9xl) with tight leading. Use a span to color one key word in Cobalt Blue (#1351AA). Below the headline, use a 2-column internal grid for a 400px wide paragraph and a CTA cluster (one solid blue rectangular button, one underlined text link)."
      },
      {
        "part": "Feature/System Grid",
        "prompt": "Section label 'SYSTEM' in the left sidebar (Cols 1-3). Main content area (Cols 4-12) features a large 3-word headline stacked vertically. Below that, a 3-column equal-width grid. Each cell has 1px borders, a mono-spaced index number (01, 02, 03), a bold h3 title, and a small paragraph. Cells should have a hover state of `white/20` background."
      },
      {
        "part": "Comparison List",
        "prompt": "Section label 'WHY DIFFERENT' in the sidebar. Main content area features a vertical stack of full-width items. Each item is 100px-150px tall, separated by a 1px top border. Items contain a small mono index number and a large (text-5xl) bold title. On hover, the title transitions from black to Cobalt Blue (#1351AA)."
      },
      {
        "part": "Pricing/Access Section",
        "prompt": "Minimum height 50vh. Section label 'ACCESS' in sidebar. Main content area features an 8xl headline 'Start Exploring'. Below, a subheadline with two lines of text. Bottom right contains a large, black rectangular CTA button with high-contrast cream text, padding 20px 40px."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Poster Button",
      "description": "A high-contrast, zero-radius rectangular button.",
      "prompt": "Rectangular shape with 0px border-radius. Padding: 16px 32px. Font: 14px, Bold, Uppercase, Tracking-wider. Primary variant: Background #1351AA, Text #E3E2DE. Secondary variant: Background #141414, Text #E3E2DE. Hover state: Transition background color to #141414 over 0.3s."
    },
    {
      "component": "Typographic List Item",
      "description": "Large interactive list items with a sidebar index.",
      "prompt": "A container with 1px border-top and no border-radius. Contains a small '00X' index in mono font (#7A7A7A) and a large header (text-5xl, weight-bold). Interaction: On container hover, the header text color changes to #1351AA. Implementation uses a flex-row with 'items-start'."
    },
    {
      "component": "Grid Sidebar Label",
      "description": "Sticky section labels used to navigate the grid.",
      "prompt": "Positioned in a column 3 units wide. Text is 12px, font-bold, color #7A7A7A, uppercase, tracking-0.2em. The label should be 'sticky' with a top-32 spacing so it remains visible while scrolling through the section's content."
    }
  ]
}

---
"SaaS Landing Page for Developer Tool" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/saas-landing-page-for-developer-tool @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "SaaS Landing Page for Developer Tool. \"SaaS Landing Page for Developer Tool\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/saas-landing-page-for-developer-tool @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-saas-landing-page-for-developer-tool",
      "license": "CC0-1.0",
      "attribution": "\"SaaS Landing Page for Developer Tool\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/saas-landing-page-for-developer-tool @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#141414"
    },
    "foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "card": {
      "$type": "color",
      "$value": "#141414"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "primary": {
      "$type": "color",
      "$value": "#1351aa"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#e3e2de"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "accent": {
      "$type": "color",
      "$value": "#1351aa"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#222222"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#a3a3a2"
    },
    "border": {
      "$type": "color",
      "$value": "#353535"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#1351aa"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

/* powered by Styledex — https://styledex.dev */
/* "SaaS Landing Page for Developer Tool" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/saas-landing-page-for-developer-tool @ 6c6090694520. */
:root {
  --background: #141414;
  --foreground: #fafaf9;
  --card: #141414;
  --card-foreground: #fafaf9;
  --primary: #1351aa;
  --primary-foreground: #fafaf9;
  --secondary: #e3e2de;
  --secondary-foreground: #fafaf9;
  --accent: #1351aa;
  --accent-foreground: #fafaf9;
  --muted: #222222;
  --muted-foreground: #a3a3a2;
  --border: #353535;
  --destructive: #dc2626;
  --ring: #1351aa;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

/* powered by Styledex — https://styledex.dev */
/* "SaaS Landing Page for Developer Tool" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/saas-landing-page-for-developer-tool @ 6c6090694520. */
/** Tailwind theme extend for SaaS Landing Page for Developer Tool (superdesign-saas-landing-page-for-developer-tool) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#141414",
        "foreground": "#fafaf9",
        "card": "#141414",
        "primary": "#1351aa",
        "primary-foreground": "#fafaf9",
        "secondary": "#e3e2de",
        "accent": "#1351aa",
        "muted": "#222222",
        "border": "#353535",
        "destructive": "#dc2626",
        "ring": "#1351aa"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

/* powered by Styledex — https://styledex.dev */
/* "SaaS Landing Page for Developer Tool" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/saas-landing-page-for-developer-tool @ 6c6090694520. */
@layer base {
:root {
  --background: #141414;
  --foreground: #fafaf9;
  --card: #141414;
  --card-foreground: #fafaf9;
  --primary: #1351aa;
  --primary-foreground: #fafaf9;
  --secondary: #e3e2de;
  --secondary-foreground: #fafaf9;
  --accent: #1351aa;
  --accent-foreground: #fafaf9;
  --muted: #222222;
  --muted-foreground: #a3a3a2;
  --border: #353535;
  --destructive: #dc2626;
  --ring: #1351aa;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}