Sixty Design System

STEP 0: Select Model Profile

Before proceeding, ask the user to select which model profile to use:

Economy — Fastest, lowest cost
Balanced — Good balance of speed & accuracy
Thorough — Most accurate, highest cost

Use the AskUserQuestion tool with these options.

Note: Based on selection, appropriate models will be assigned:

Economy: Simple styling, minor UI updates
Balanced: Standard component building, design system implementation
Thorough: Complex patterns, multi-component systems

Production-ready design system with clean minimal light mode and premium glassmorphic dark mode. Built for Next.js/React with Tailwind CSS.

Core Principles

Light Mode: Pure white backgrounds (#FFFFFF, #FCFCFC), high contrast text (gray-900/gray-700), clean borders (gray-200), minimal shadows.

Dark Mode (Glassmorphism): Deep backgrounds (gray-950: #030712), glass cards with bg-gray-900/80 backdrop-blur-sm, subtle borders with opacity (border-gray-700/50), no shadows.

Essential Patterns

Theme-Aware Classes (Use These First)

// Backgrounds
"bg-white dark:bg-gray-950"              // Page background
"bg-white dark:bg-gray-900/80 backdrop-blur-sm"  // Cards
"bg-[#FCFCFC] dark:bg-gray-900"          // Secondary surfaces

// Text
"text-gray-900 dark:text-gray-100"       // Primary
"text-gray-700 dark:text-gray-300"       // Secondary
"text-gray-500 dark:text-gray-400"       // Tertiary

// Borders
"border-gray-200 dark:border-gray-700/50"  // Standard
"border-gray-300 dark:border-gray-800/50"  // Emphasized

// Interactive states
"hover:bg-gray-50 dark:hover:bg-gray-800/30"

Card Pattern

// Standard card
<div className="bg-white dark:bg-gray-900/80 dark:backdrop-blur-sm 
                border border-gray-200 dark:border-gray-700/50
                rounded-xl p-6 shadow-sm dark:shadow-none">
  {children}
</div>

Button Variants

// Primary (blue)
"bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-4 py-2.5 font-medium transition-colors"

// Secondary
"bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 
 text-gray-900 dark:text-gray-100 rounded-lg px-4 py-2.5 font-medium"

// Ghost
"bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800/50 
 text-gray-700 dark:text-gray-300 rounded-lg px-4 py-2.5"

Input Fields

"bg-white dark:bg-gray-800/50 
 border border-gray-300 dark:border-gray-700/50 
 text-gray-900 dark:text-gray-100 
 rounded-lg px-4 py-2.5 
 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"

Setup Requirements

Dependencies

npm install tailwindcss class-variance-authority clsx tailwind-merge

tailwind.config.js

module.exports = {
  darkMode: ['class', '[data-theme="dark"]'],
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
}

Utility Function (lib/utils.ts)

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Quick Reference

Element	Light	Dark
Page BG	`#FFFFFF`	`gray-950` (#030712)
Card BG	`white` + `shadow-sm`	`gray-900/80` + `backdrop-blur-sm`
Border	`gray-200`	`gray-700/50`
Text Primary	`gray-900`	`gray-100`
Text Secondary	`gray-700`	`gray-300`
Shadow	`shadow-sm` / `shadow-md`	`shadow-none`

Glassmorphism Rules

DO:

Use backdrop-blur-sm (4px) for cards/modals, backdrop-blur-xl (24px) for premium surfaces
Combine blur with semi-transparent backgrounds: bg-gray-900/80
Add inset highlights: inset 0 1px 0 rgba(255,255,255,0.05)
Include webkit prefix: -webkit-backdrop-filter
Use shadow-none in dark mode

DON'T:

Use backdrop blur without semi-transparent backgrounds
Stack more than 2-3 glass layers
Use heavy shadows with glass effects
Apply glassmorphism in light mode
Exceed blur(24px) for performance

Icons (Lucide React)