Founderflow Logo

Styling & UI

Understanding the design system and styling approach of the Founderflow Boilerplate. Learn about Tailwind CSS, component styling, and customization options.

Design System

T

Tailwind CSS 4

Utility-first CSS framework for rapid development

R

Radix UI

Accessible component primitives and foundations

C

Custom Components

Brand-specific components built on top of Radix UI

D

Dark Mode

Theme switching support with automatic detection

R

Responsive

Mobile-first approach with breakpoint system

A

Animation

Framer Motion integration for smooth transitions

Styling Architecture

Styling Structure
app/globals.css # Global styles & CSS variables
components/ui/ # Base component styles
components/landing/ # Marketing page styles
components/platform/ # Dashboard styles
components/auth/ # Authentication styles
components/payments/ # Payment component styles

Global Styles

CSS variables, base styles, and utility classes

Component Styles

Individual component styling and variants

Page Styles

Page-specific layouts and styling

Theme Configuration

Color Palette

The boilerplate uses a carefully designed color palette:

Primary Colors

#015064

Primary Dark

Main brand color

#00637B

Primary

Secondary brand color

#00829D

Primary Light

Hover states

Supporting Colors

Gray

Neutral

Text and backgrounds

Green

Success

Success states

Red

Error

Error states

Typography System

Consistent typography using the Ubuntu font family:

H1

Heading 1 - 4xl

Main page titles and hero headings

H2

Heading 2 - 2xl

Section headings and subsections

H3

Heading 3 - lg

Component headings and card titles

Body

Body Text - base

Regular paragraph text and content

Component Styling

Variant System

Components support multiple visual variants for different use cases.

<Button variant="primary">
<Button variant="secondary">
<Button variant="outline">

Size System

Consistent sizing across all components with predefined size variants.

<Button size="sm">
<Button size="md">
<Button size="lg">

State Styles

Hover, focus, disabled, and active states for all interactive elements.

hover:bg-[#00829D]
focus:ring-2 focus:ring-[#00637B]
disabled:opacity-50

Animation

Framer Motion integration for smooth transitions and micro-interactions.

whileHover: { scale: 1.05 }
transition: { duration: 0.2 }

Customization Examples

Creating a Custom Button Variant

components/ui/button.tsx
const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium",
{
variants: {
variant: {
"default": "bg-[#00637B] text-white hover:bg-[#00829D]",
"destructive": "bg-red-500 text-white hover:bg-red-600",
"outline": "border border-[#00637B] text-[#00637B]",
"custom": "bg-gradient-to-r from-purple-500 to-pink-500"
}
}
}
);

Adding Custom CSS Variables

app/globals.css
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
/* Custom brand colors */
--brand-primary: #00637B;
--brand-secondary: #015064;
}

Responsive Design

Breakpoints

  • • sm: 640px (small devices)
  • • md: 768px (tablets)
  • • lg: 1024px (laptops)
  • • xl: 1280px (desktops)
  • • 2xl: 1536px (large screens)

Mobile-First Approach

Design starts with mobile and progressively enhances for larger screens.

Example Usage

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div className="p-4 md:p-6 lg:p-8">
Content
</div>
</div>

Flexible Layouts

Use flexbox and grid for responsive layouts that adapt to different screen sizes.

Next Steps

Now that you understand the styling system, explore these related areas:

Customization Guide

Learn how to customize colors, fonts, and components for your brand.

Component Architecture

Understand how styled components are organized and structured.