---
layout: default
title: 'Design – Flow AI | Style Guide, Components & Collections'
description: 'Flow AI design system: style guide, component library, and collection layout patterns for reference and implementation.'
canonical: 'https://chooseflow.ai/design'
extra_head: |
  <link rel="icon" href="/assets/optimized/home/header/flow-favicon.png" type="image/png" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="/css/output.css" />
extra_foot: ""
---

<main class="w-full pb-40 bg-gradient-to-b from-white to-theme-light/30">
    <div class="max-w-container mx-auto px-6 md:px-10 pt-20 md:pt-28">
      <h1 class="text-4xl md:text-5xl font-bold text-theme-dark tracking-tight">Design</h1>
      <p class="text-lg text-theme-body mt-4 leading-relaxed max-w-2xl">Reference and implementation resources for the Flow AI design system: foundations, components, and collection layouts.</p>

      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 md:gap-10 mt-16 md:mt-20">
        <a href="/design/style-guide.html" class="group flex flex-col rounded-2xl border border-theme-border bg-white p-8 shadow-sm hover:border-theme-primary/40 hover:shadow-lg transition-all duration-200">
          <div class="aspect-[4/3] rounded-xl bg-theme-light overflow-hidden mb-5 flex items-center justify-center ring-1 ring-theme-border/50 group-hover:ring-theme-primary/20 transition-all duration-200">
            <svg class="w-16 h-16 text-theme-primary/70 group-hover:text-theme-primary transition-colors" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7" /></svg>
          </div>
          <h2 class="text-lg font-semibold text-theme-dark group-hover:text-theme-primary transition-colors">Style Guide</h2>
          <p class="text-sm text-theme-muted mt-2 leading-relaxed">Foundations and elements: typography, colors, buttons, forms, and atomic building blocks.</p>
        </a>
        <a href="/design/component-library.html" class="group flex flex-col rounded-2xl border border-theme-border bg-white p-8 shadow-sm hover:border-theme-primary/40 hover:shadow-lg transition-all duration-200">
          <div class="aspect-[4/3] rounded-xl bg-theme-light overflow-hidden mb-5 flex items-center justify-center ring-1 ring-theme-border/50 group-hover:ring-theme-primary/20 transition-all duration-200">
            <svg class="w-16 h-16 text-theme-primary/70 group-hover:text-theme-primary transition-colors" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
          </div>
          <h2 class="text-lg font-semibold text-theme-dark group-hover:text-theme-primary transition-colors">Component Library</h2>
          <p class="text-sm text-theme-muted mt-2 leading-relaxed">Composed components: hero, cards, sections, marquees, and CTAs built from the style guide.</p>
        </a>
        <a href="/design/collections.html" class="group flex flex-col rounded-2xl border border-theme-border bg-white p-8 shadow-sm hover:border-theme-primary/40 hover:shadow-lg transition-all duration-200">
          <div class="aspect-[4/3] rounded-xl bg-theme-light overflow-hidden mb-5 flex items-center justify-center ring-1 ring-theme-border/50 group-hover:ring-theme-primary/20 transition-all duration-200">
            <svg class="w-16 h-16 text-theme-primary/70 group-hover:text-theme-primary transition-colors" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2z" /></svg>
          </div>
          <h2 class="text-lg font-semibold text-theme-dark group-hover:text-theme-primary transition-colors">Collections</h2>
          <p class="text-sm text-theme-muted mt-2 leading-relaxed">Layout patterns for directories, showcases, blogs, and documentation pages.</p>
        </a>
      </div>
    </div>
  </main>