Style Guide

Design System

A comprehensive guide to the colors, typography, components, and patterns used throughout the Infiner template.

Quick Navigation

Colors Typography Buttons Form Elements Cards Badges Code Blocks Animations

Colors

Theme-aware color tokens that automatically adapt to light and dark modes.

Core Colors

Background

--background

Foreground

--foreground

Primary

--primary

Secondary

--secondary

Muted

--muted

Accent

--accent

Card

--card

Border

--border

Destructive

--destructive

Surface Colors

Surface Dark

--surface-dark

Surface Elevated

--surface-elevated

Surface Testimonial

--surface-testimonial

Chart Colors

Chart 1

--chart-1

Chart 2

--chart-2

Chart 3

--chart-3

Chart 4

--chart-4

Chart 5

--chart-5

Typography

Work Sans is the primary font family, paired with Geist Mono for code.

Heading 1

text-5xl font-bold

Heading 2

text-4xl font-bold

Heading 3

text-3xl font-semibold

Heading 4

text-2xl font-semibold

Heading 5

text-xl font-medium

Large Text

text-lg

Body Text

text-base

Small Text

text-sm

Muted Text

text-muted-foreground

Font Families

Work Sans - The quick brown foxfont-sans

Geist Mono - The quick brown foxfont-mono

Buttons

Button variants for different use cases and visual hierarchy.

Variants

Sizes

With Icons

States

Form Elements

Input components for building forms and capturing user data.

Text Inputs

Password

Disabled

Textarea & Select

Message

Select Model

Toggles & Checks

Enable notifications

Stream responses

Accept terms and conditions

Receive marketing emails

Tabs

Overview content goes here.

Cards

Card components for grouping related content.

Basic Card

A simple card with header and content.

Cards are versatile containers that can hold any type of content.

Feature Card

With icon and hover effect.

Great for showcasing features or services.

Gradient Card

With gradient background.

Use gradients to highlight important content.

Badges

Small labels for status indicators and categories.

Variants

DefaultSecondaryOutlineDestructive

With Icons

SuccessInfoError

Use Cases

OnlineIn ProgressNewBeta

Code Blocks

Syntax-highlighted code blocks with brand-specific colors.

JavaScript / TypeScript

Brand-aware syntax highlighting

example.ts

import { createClient } from '@infiner/sdk'

const client = createClient({
  apiKey: 'YOUR_API_KEY',
  model: 'gpt-4-turbo'
})

const response = await client.chat({
  messages: [
    { role: 'user', content: 'Hello!' }
  ],
  temperature: 0.7,
  maxTokens: 1024
})

Animations

CSS animations available throughout the template.

Available Classes

animate-slide-in-rightSlide in from right

animate-slide-in-leftSlide in from left

animate-slide-up-delayedSlide up with delay

animate-fade-in-delayedFade in with delay

animate-marqueeInfinite horizontal scroll

animate-scroll-upVertical scroll up

animate-scroll-downVertical scroll down

animate-meteor-effectMeteor falling effect

Hover Effects

Nav Link Hover

Hover over me

Button Hover States

Icons

Lucide React icons are used throughout the template.

Zap

Check

Copy

Info

AlertCircle

ArrowRight

Github

Twitter

Import from lucide-react -View all icons

Available Components

All shadcn/ui components available in this template.

AccordionAlertAlertDialogAspectRatioAvatarBadgeBreadcrumbButtonCalendarCardCarouselChartCheckboxCollapsibleCommandContextMenuDialogDrawerDropdownMenuFormHoverCardInputLabelMenubarNavigationMenuPaginationPopoverProgressRadioGroupScrollAreaSelectSeparatorSheetSkeletonSliderSonnerSwitchTableTabsTextareaToastToggleTooltip