v0.1.0

Finitless Design System

Brand tokens, React components, and Tailwind preset for building consistent Finitless applications.

Quick Install

npm install @finitless/design-system

Then add the Tailwind preset to your config:

import { finitlessPreset } from '@finitless/design-system/tailwind';

export default {
  presets: [finitlessPreset],
  content: ['./node_modules/@finitless/design-system/dist/**/*.{js,mjs}'],
};

Explore the Design System

Colors

Brand colors, gradients, and semantic tokens for consistent UI.

Typography

Inter font family with type scale from display to caption.

Components

50+ UI components: buttons, inputs, dialogs, tables, calendars, and more.

Voice & Tone

How Finitless speaks — confident, practical, direct.

Logo Assets

Horizontal, square, and icon logos in all sizes.

Spacing

4px grid system with border radius and container widths.

Motion

Transitions, glow effects, and animation guidelines.

Accessibility

Focus states, contrast ratios, and WCAG guidelines.

Patterns

Do's and don'ts for buttons, cards, forms, and more.

About Finitless

Company info, tagline, and target audience.

Machine-Readable Tokens

Access brand tokens programmatically via the JSON manifest.

https://brand.finitless.com/brand-manifest.json

For AI Assistants

Using Claude, ChatGPT, or other AI to build Finitless applications? Point them to our AI-readable brand guidelines for accurate styling.

https://brand.finitless.com/BRAND-GUIDELINES.md

This markdown file contains all colors, typography, components, and usage rules in a format optimized for LLMs.