BidFiller
v1.0

Design System

A comprehensive design system with modern typography, vibrant colors, and accessible components.

Typography

Plus Jakarta Sans for headings, Inter for body, JetBrains Mono for code.

Headings

Heading 1 - 5xl

Heading 2 - 4xl

Heading 3 - 3xl

Heading 4 - 2xl

Heading 5 - xl
Heading 6 - lg
Body Text

Extra large body text (xl)

Large body text (lg)

Default body text (base)

Small body text (sm)

Extra small text (xs)

Code
const result = await ai.extractRequirements(document);

Colors

Vibrant, accessible color palette.

Brand

Accent

Neutral

Semantic

Buttons

Multiple variants and sizes.

Variants
Sizes
With Icons

Form Elements

Inputs, selects, and controls.

Text Inputs
Search

Alerts

Contextual feedback messages.

Success

Your bid has been submitted.

Warning

Deadline is in 2 days.

Error

Upload failed. Try again.

Info

AI is processing your document.

Cards

Container components.

Basic Card

Simple card with border.

Interactive

Hover for effects.

Gradient

Gradient background.

Theme Toggle

Switch between light and dark modes.

Icon variant

Default variant

Pill variant

BidFiller Design System • Built with Next.js, TailwindCSS & Framer Motion