Buy Template Now $65→
Skip to main content

Themes


Pulse AI uses CSS custom properties (CSS variables) together with Tailwind CSS theme mapping to create a flexible, scalable, and maintainable design system.

By modifying a few theme variables, you can instantly update the appearance of your entire application while keeping all components visually consistent.

Features

  • Centralized design tokens
  • Tailwind CSS integration
  • Theme-aware components
  • Easy brand customization
  • CSS variable powered
  • Opacity modifier support
  • Consistent color system
  • Global application styling
  • Typography integration
  • Smooth scrolling support
  • Future dark mode compatibility

Theme Configuration

Create or update your global stylesheet:

@import "tailwindcss";
 
:root {
  --background: #ffffff;
  --foreground: #171717;
  --primary: #1a5af0;
  --secondary: #88c3f9;
}
 
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-secondary: var(--secondary);
  --color-accent: var(--accent);
 
  --font-sans: var(--font-geist-sans);
}
 
html {
  scroll-behavior: smooth;
  overscroll-behavior: none;
}
 
body {
  background: var(--background);
  color: var(--foreground);
}

Theme Variables

Background

Controls the application's primary background color.

--background: #ffffff;

Usage:

<div className="bg-background">
  Content
</div>

Foreground

Controls the primary text color.

--foreground: #171717;

Usage:

<p className="text-foreground">
  Main Content
</p>

Primary

Used for buttons, links, badges, and important actions.

--primary: #1a5af0;

Usage:

<button className="bg-primary text-background">
  Get Started
</button>

Secondary

Used for supporting UI elements and decorative accents.

--secondary: #88c3f9;

Usage:

<div className="bg-secondary">
  Secondary Content
</div>

Tailwind Theme Mapping

Pulse AI maps CSS variables directly into Tailwind.

@theme inline {
  --color-background: var(--background);
 
  --color-foreground: var(--foreground);
 
  --color-primary: var(--primary);
 
  --color-secondary: var(--secondary);
 
  --color-accent: var(--accent);
}

Available Utility Classes

Background Colors

bg-background
bg-primary
bg-secondary

Text Colors

text-foreground
text-primary
text-secondary

Border Colors

border-foreground
border-primary
border-secondary

Opacity Variations

All Pulse AI theme colors support Tailwind's opacity modifier syntax using /.

This makes it easy to create borders, muted text, hover states, overlays, and subtle backgrounds without creating additional color variables.

Foreground Variations

Use opacity levels to create visual hierarchy.

Primary Text

<p className="text-foreground">
  Main content
</p>

Secondary Text

<p className="text-foreground/80">
  Supporting content
</p>

Description Text

<p className="text-foreground/60">
  Description content
</p>

Muted Text

<p className="text-foreground/40">
  Metadata
</p>

Disabled Text

<p className="text-foreground/30">
  Disabled content
</p>

Border Variations

Perfect for cards, sections, and dividers.

Standard Border

<div className="border border-foreground/20" />

Soft Border

<div className="border border-foreground/10" />

Subtle Border

<div className="border border-foreground/5" />

Background Variations

Useful for badges, cards, hover states, and highlights.

Very Light Background

<div className="bg-primary/5" />

Light Background

<div className="bg-primary/10" />

Medium Background

<div className="bg-primary/20" />

Strong Background

<div className="bg-primary/30" />

Primary Color Examples

Button

<button className="bg-primary text-background">
  Continue
</button>

Soft Badge

<span className="bg-primary/10 text-primary">
  New
</span>

Outline Badge

<span className="border border-primary/20 text-primary">
  Featured
</span>

Hover State

<button className="hover:bg-primary/90">
  Hover Me
</button>

Secondary Color Examples

Background

<div className="bg-secondary/10">
  Content
</div>

Border

<div className="border border-secondary/20">
  Content
</div>

Text

<p className="text-secondary">
  Secondary text
</p>

Common UI Patterns

Card

<div
  className="
    rounded-xl
    border
    border-foreground/10
    bg-background
    p-6
  "
>
  Content
</div>

Muted Section

<section className="bg-foreground/5">
  Content
</section>

Input Field

<input
  className="
    border
    border-foreground/10
    bg-background
    focus:border-primary
  "
/>

Hover Card

<div
  className="
    border
    border-foreground/10
    hover:border-primary/30
    hover:bg-primary/5
  "
>
  Content
</div>

Dark Theme Example

You can extend the system to support dark mode.

:root {
  --background: #ffffff;
  --foreground: #171717;
  --primary: #1a5af0;
  --secondary: #88c3f9;
}
 
.dark {
  --background: #09090b;
  --foreground: #fafafa;
  --primary: #3b82f6;
  --secondary: #60a5fa;
}

Typography

Pulse AI uses theme-based typography tokens.

@theme inline {
  --font-sans: var(--font-geist-sans);
}

Usage:

<body className="font-sans">
  ...
</body>

Global HTML Configuration

Smooth Scrolling

html {
  scroll-behavior: smooth;
}

Used for anchor navigation:

<a href="#features">
  Features
</a>

Overscroll Behavior

html {
  overscroll-behavior: none;
}

Prevents browser bounce and scroll chaining effects.

Recommended Opacity Levels

| Opacity | Usage                      |
| ------- | -------------------------- |
| `/90`   | Slightly muted text        |
| `/80`   | Secondary text             |
| `/70`   | Supporting text            |
| `/60`   | Descriptions               |
| `/50`   | Muted UI                   |
| `/40`   | Metadata                   |
| `/30`   | Disabled content           |
| `/20`   | Soft borders & backgrounds |
| `/10`   | Cards & subtle borders     |
| `/5`    | Very subtle fills          |

Best Practices

  • Use text-foreground for primary content.
  • Use text-foreground/80 for supporting text.
  • Use text-foreground/60 for descriptions.
  • Use border-foreground/10 for most card borders.
  • Use bg-primary/10 for highlights.
  • Maintain sufficient color contrast.
  • Prefer opacity modifiers over creating additional color tokens.
  • Keep branding colors consistent across the application.

Accessibility

  • Ensure WCAG-compliant color contrast ratios.
  • Avoid low-opacity text for important information.
  • Use full-opacity colors for actions and navigation.
  • Test themes in both light and dark environments.
  • Do not rely solely on color to communicate meaning.

Ideal Use Cases

  • SaaS applications
  • Marketing websites
  • Landing pages
  • Admin dashboards
  • Documentation websites
  • Component libraries
  • Design systems
  • Startup websites
  • Enterprise applications
  • Internal tools

Notes

  • All Pulse AI components automatically use these theme variables.
  • Updating a theme variable updates every component using that token.
  • Opacity modifiers work with all theme colors.
  • Tailwind utilities are generated automatically from mapped variables.
  • CSS variables allow runtime customization without rebuilding the application.
  • Additional tokens such as accent, success, warning, and destructive can be added using the same pattern.
NextContent