Finitless

Colors

v0.1.0

The Finitless color system with 10-step color scales. All colors are available as Tailwind classes via the design system preset.

Brand Primary

Finitless Blue
#165DFC
Solid buttons, UI backgrounds
Cyan (Links)
#00B7FF
Links, CTAs, gradient start
Purple
#7A2EFF
Gradient midpoint only
Magenta
#C300FF
Gradient end only

Background Hierarchy

Layered background system for visual depth. Warmer off-black tones are easier on eyes and feel more premium.

Deep
#08080a
Sidebar, navigation
Base
#0e0e10
Page background
Elevated
#151517
Cards, modals
Surface
#1c1c1f
Dropdowns, popovers

10-Step Color Scales

New in v0.1.0

Geist-inspired color scales with 10 steps from light (100) to dark (1000). Click any swatch to copy its Tailwind class.

Gray

100
200
300
400
500
600
700
800
900
1000
bg-gray-100→bg-gray-1000Click to copy class

Gray Alpha

Transparent
100
200
300
400
500
600
700
800
900
1000
bg-grayAlpha-100→bg-grayAlpha-1000Click to copy class

Blue

Brand Primary
100
200
300
400
500
600
700
800
900
1000
bg-blue-100→bg-blue-1000Click to copy class

Cyan

Links
100
200
300
400
500
600
700
800
900
1000
bg-cyan-100→bg-cyan-1000Click to copy class

Purple

Gradients Only
100
200
300
400
500
600
700
800
900
1000
bg-purple-100→bg-purple-1000Click to copy class

Magenta

Gradients Only
100
200
300
400
500
600
700
800
900
1000
bg-magenta-100→bg-magenta-1000Click to copy class

Red

Error
100
200
300
400
500
600
700
800
900
1000
bg-red-100→bg-red-1000Click to copy class

Green

Success
100
200
300
400
500
600
700
800
900
1000
bg-green-100→bg-green-1000Click to copy class

Amber

Warning
100
200
300
400
500
600
700
800
900
1000
bg-amber-100→bg-amber-1000Click to copy class

Teal

Accent
100
200
300
400
500
600
700
800
900
1000
bg-teal-100→bg-teal-1000Click to copy class

Semantic

Error
#ff3b45
Errors, alerts, problems
Success
#22c55e
Success states, positive
Warning
#f59e0b
Caution, pending actions

Surface & Opacity

Semi-transparent values for glass effects and subtle borders.

Card Surface
rgba(255,255,255,0.05)
5% white opacity
Border Default
rgba(255,255,255,0.10)
10% white opacity
Border Subtle
rgba(255,255,255,0.06)
6% white opacity
Muted Text
rgba(255,255,255,0.60)
Secondary text

Gradients

Brand Gradient

Hero text, brand accents

CTA Gradient

Primary buttons, CTAs

CSS Custom Properties

Import CSS variables for use without Tailwind. Available at @finitless/design-system/styles.

/* Import standalone CSS variables */
@import '@finitless/design-system/styles/variables.css';

/* Use in your styles */
.my-element {
  background: var(--color-brand-primary);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

/* Color scales available */
var(--color-gray-100) through var(--color-gray-1000)
var(--color-blue-100) through var(--color-blue-1000)
/* ... all 10 color scales */

Tailwind Config

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

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

The preset includes all brand colors, 10-step scales, backgrounds, gradients, and semantic tokens.