Skip to content

Instantly share code, notes, and snippets.

@mankind

mankind/homepage-design_system.md

Last active October 8, 2025 16:34
Show Gist options
  • Save mankind/cba7cddd80e7b227abbee38ed70c67ea to your computer and use it in GitHub Desktop.
Save mankind/cba7cddd80e7b227abbee38ed70c67ea to your computer and use it in GitHub Desktop.
Download ZIP
landing page design system
Raw
homepage-design_system.md

Perfect — here’s your ready-to-reuse Tailwind CSS v3.47 design system package with config and prebuilt component snippets, fully aligned with everything we’ve created so far.

1️⃣ Tailwind Config File (tailwind.config.js)

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html"
  ],
  theme: {
    extend: {
      colors: {
        primary: "#1E3A8A",     // Deep Blue
        secondary: "#0F172A",   // Dark Slate
        accent: "#FBBF24",      // Amber Accent
        muted: "#94A3B8",       // Slate Gray
        light: "#F8FAFC",       // Off White
        dark: "#0F172A",        // Footer Background
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

2️⃣ Reusable Component Snippets

Buttons

<!-- Primary -->
<button class="px-5 py-2.5 rounded-lg bg-primary text-white font-semibold hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-accent transition">
  Primary Button
</button>

<!-- Secondary -->
<button class="px-5 py-2.5 rounded-lg bg-secondary text-white font-semibold hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-accent transition">
  Secondary Button
</button>

<!-- Outline -->
<button class="px-5 py-2.5 rounded-lg border border-primary text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-accent transition">
  Outline Button
</button>

Section Wrapper

<section class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
  <!-- Content here -->
</section>

Card

<div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition">
  <h3 class="text-lg font-semibold text-primary mb-2">Card Title</h3>
  <p class="text-slate-600">Short description text here.</p>
</div>

Chips

<div class="flex flex-wrap gap-3">
  <span class="text-xs font-medium uppercase tracking-wide text-muted">Creator’s Engine Room</span>
  <span class="text-xs px-3 py-1 rounded-full bg-slate-800/60 text-slate-200">Digital Mind</span>
  <span class="text-xs px-3 py-1 rounded-full bg-slate-800/60 text-slate-200">Video Creation</span>
  <span class="text-xs px-3 py-1 rounded-full bg-slate-800/60 text-slate-200">AI Ad Generation</span>
</div>

Accordion (Vanilla JS)

HTML

<div class="accordion border-t border-b divide-y">
  <div class="accordion-item">
    <button class="accordion-header w-full flex justify-between py-4 text-left font-medium text-primary">
      Question
      <span class="accordion-icon">+</span>
    </button>
    <div class="accordion-content overflow-hidden max-h-0 transition-all duration-300 ease-in-out">
      <p class="p-4 text-slate-600">Answer text here.</p>
    </div>
  </div>
</div>

JS

document.querySelectorAll(".accordion-header").forEach(header => {
  header.addEventListener("click", () => {
    const openItem = document.querySelector(".accordion-content.max-h-[999px]");
    const currentContent = header.nextElementSibling;

    if (openItem && openItem !== currentContent) {
      openItem.style.maxHeight = null;
      openItem.previousElementSibling.querySelector(".accordion-icon").textContent = "+";
    }

    if (currentContent.style.maxHeight) {
      currentContent.style.maxHeight = null;
      header.querySelector(".accordion-icon").textContent = "+";
    } else {
      currentContent.style.maxHeight = currentContent.scrollHeight + "px";
      header.querySelector(".accordion-icon").textContent = "–";
    }
  });
});

3️⃣ How to Use the Design System

Think of the config as your palette & rules, and the snippets as ready-made LEGO pieces.

Example: Making a New CTA Section

<section class="text-center py-12 px-4 sm:px-6 lg:px-8 bg-light">
  <h2 class="text-3xl sm:text-4xl font-extrabold tracking-tight text-primary mb-4">
    Start Creating Today
  </h2>
  <p class="text-lg text-slate-600 mb-6">
    Our AI tools help you go from idea to finished video in minutes.
  </p>
  <button class="px-5 py-2.5 rounded-lg bg-primary text-white font-semibold hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-accent transition">
    Get Started
  </button>
</section>
  • Typography: pulled from heading & body rules
  • Colors: consistent with primary and light
  • Spacing: py-12 px-4 sm:px-6 lg:px-8 matches section pattern
  • Button: from reusable snippet

If you want, I can also prepare a single HTML boilerplate with this config + components linked, so that spinning up a new page is just a matter of copy-pasting sections. That way you won’t even need to re-import Tailwind or JS manually each time.

Raw
homepage-design_system_inuse.md

Got it — I’ll walk you through it like a step-by-step recipe so you can see exactly how this design system becomes a new landing page.

Step 1 – Your Core Ingredients

Your design system consists of:

  1. Tailwind config → your colors, typography, spacing rules.
  2. Reusable snippets → buttons, section wrappers, cards, chips, accordion.
  3. JS snippets (only where needed, like the accordion).

Step 2 – The Base HTML Template

When starting a new landing page, always begin with a base that links Tailwind and sets up mobile-first defaults.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My New Landing Page</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="font-sans text-slate-800 bg-light">

  <!-- Navbar -->
  <header class="bg-white border-b">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-xl font-bold text-primary">Brand</h1>
      <nav class="space-x-4">
        <a href="#" class="text-slate-600 hover:text-primary">Home</a>
        <a href="#" class="text-slate-600 hover:text-primary">About</a>
        <a href="#" class="text-slate-600 hover:text-primary">Contact</a>
      </nav>
    </div>
  </header>

  <!-- Main content will go here -->

</body>
</html>

Step 3 – Drop in Reusable Components

Now you compose the landing page like LEGO:

  • Use the section wrapper snippet for spacing.
  • Add buttons from the design system.
  • Add chips for positioning or micro-features.
  • Add cards for services or features.

Example: Hero Section

<section class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 text-center">
  <h2 class="text-3xl sm:text-4xl font-extrabold tracking-tight text-primary mb-4">
    Create with AI. Faster than Ever.
  </h2>
  <p class="text-lg text-slate-600 mb-6">
    Our AI tools help you go from idea to finished video in minutes.
  </p>
  <div class="flex justify-center gap-4">
    <button class="px-5 py-2.5 rounded-lg bg-primary text-white font-semibold hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-accent transition">
      Get Started
    </button>
    <button class="px-5 py-2.5 rounded-lg border border-primary text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-accent transition">
      Learn More
    </button>
  </div>
</section>

Step 4 – Add Additional Sections Using Snippets

Example: Feature Cards

<section class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition">
      <h3 class="text-lg font-semibold text-primary mb-2">Video Creation</h3>
      <p class="text-slate-600">Turn scripts into professional videos instantly.</p>
    </div>
    <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition">
      <h3 class="text-lg font-semibold text-primary mb-2">AI Research</h3>
      <p class="text-slate-600">Generate insights and reports with AI speed.</p>
    </div>
    <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition">
      <h3 class="text-lg font-semibold text-primary mb-2">Ad Generation</h3>
      <p class="text-slate-600">Launch campaigns with AI-generated ad creatives.</p>
    </div>
  </div>
</section>

Step 5 – Optional Interactive Section (Accordion)

If you want an FAQ:

  • Copy the accordion HTML snippet.
  • Copy the accordion JS snippet into a <script> tag at the bottom of the body.

Step 6 – Done

By following this process:

  • You’re not writing custom CSS — only applying Tailwind utility classes.
  • Every section stays mobile-first by default because Tailwind applies styles from mobile → larger breakpoints.
  • Consistency is guaranteed because you always use the same colors, fonts, spacing, and component structure.

✅ In short:

  • Your Tailwind config = the "branding rules".
  • Your HTML snippets = ready-to-use building blocks.
  • Creating a new landing page = just arranging those blocks inside section wrappers.

If you want, I can prepare a full example landing page that uses all your system components in sequence so you can literally copy it and tweak the text. That would make this even easier.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment