@aeryflux/design

Minimalist design tokens and Tailwind preset for the AeryFlux ecosystem

Philosophy

• Minimal: Only essential elements, no decoration
• Dark-first: Optimized for dark interfaces
• Consistent: Same tokens across all apps
• Accessible: High contrast, readable typography

Installation

npm install @aeryflux/design

Quick Start

Option 1: Tailwind CSS Preset (Recommended)

// tailwind.config.js
export default {
  presets: [require('@aeryflux/design/tailwind')],
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
}

Option 2: CSS Custom Properties

@import '@aeryflux/design/css';

Option 3: JavaScript Tokens

import { colors, typography, spacing } from '@aeryflux/design';
import tokens from '@aeryflux/design'; // or import all

TypeScript Support

Full TypeScript definitions included:

import type { Colors, Typography, DesignTokens } from '@aeryflux/design';

Design Tokens

Colors

Brand

| Token | Value | Usage | |-------|-------|-------| | --color-primary | #00ff88 | CTAs, accents, success states | | --color-secondary | #00d4ff | Links, highlights, interactive |

Surfaces

| Token | Value | Usage | |-------|-------|-------| | --color-bg-base | #050508 | Page background | | --color-bg-elevated | #0a0a0f | Cards, modals, panels | | --color-bg-subtle | #111118 | Hover states, borders |

Text

| Token | Value | Usage | |-------|-------|-------| | --color-text-primary | #ffffff | Headings, important text | | --color-text-secondary | #a0a0a0 | Body text, descriptions | | --color-text-muted | #666666 | Captions, metadata |

Semantic

| Token | Value | Usage | |-------|-------|-------| | --color-success | #00ff88 | Success, valid | | --color-error | #ff4444 | Errors, destructive | | --color-warning | #ffaa00 | Warnings, caution | | --color-info | #00d4ff | Information |

Typography

Font Families

| Token | Value | Usage | |-------|-------|-------| | --font-display | 'HemiHead', system-ui | Headings, brand | | --font-body | 'Inter', system-ui | Body text | | --font-mono | 'JetBrains Mono', monospace | Code, data |

Font Sizes

| Token | Value | Usage | |-------|-------|-------| | --text-xs | 0.75rem | Captions | | --text-sm | 0.875rem | Small text | | --text-base | 1rem | Body | | --text-lg | 1.125rem | Large body | | --text-xl | 1.25rem | Small headings | | --text-2xl | 1.5rem | Headings | | --text-3xl | 2rem | Large headings | | --text-4xl | 2.5rem | Display |

Font Weights

| Token | Value | |-------|-------| | --font-normal | 400 | | --font-medium | 500 | | --font-semibold | 600 | | --font-bold | 700 |

Spacing

Base unit: 4px

| Token | Value | |-------|-------| | --space-1 | 0.25rem (4px) | | --space-2 | 0.5rem (8px) | | --space-3 | 0.75rem (12px) | | --space-4 | 1rem (16px) | | --space-6 | 1.5rem (24px) | | --space-8 | 2rem (32px) | | --space-12 | 3rem (48px) | | --space-16 | 4rem (64px) |

Borders

| Token | Value | |-------|-------| | --radius-sm | 4px | | --radius-md | 8px | | --radius-lg | 12px | | --radius-full | 9999px | | --border-width | 1px | | --border-color | #1a1a1f |

Effects

| Token | Value | |-------|-------| | --shadow-sm | 0 1px 2px rgba(0,0,0,0.5) | | --shadow-md | 0 4px 6px rgba(0,0,0,0.5) | | --shadow-lg | 0 10px 15px rgba(0,0,0,0.5) | | --glow-primary | 0 0 20px rgba(0,255,136,0.3) | | --glow-secondary | 0 0 20px rgba(0,212,255,0.3) |

Animation

| Token | Value | |-------|-------| | --duration-fast | 100ms | | --duration-normal | 200ms | | --duration-slow | 300ms | | --easing-default | cubic-bezier(0.4, 0, 0.2, 1) | | --easing-bounce | cubic-bezier(0.68, -0.55, 0.265, 1.55) |

Guidelines

Layout

• Max content width: 1200px
• Grid: 12 columns, 24px gutter
• Mobile breakpoint: 640px
• Tablet breakpoint: 1024px

Components

Buttons

Primary:   bg-primary, text-bg-base, hover:glow-primary
Secondary: bg-transparent, border-primary, text-primary
Ghost:     bg-transparent, text-secondary, hover:bg-subtle

Inputs

Default:   bg-bg-elevated, border-color, text-primary
Focus:     border-primary, glow-primary
Error:     border-error

Cards

Default:   bg-bg-elevated, radius-lg, border-color
Hover:     border-primary (subtle)

Inspiration

• OpenClaw - Minimalist dark UI
• Focus on content, not decoration
• Subtle gradients and glows for depth
• High contrast for readability

Apps Using This System

| App | Description | |-----|-------------| | Lumos | Landing page | | Haki | Learn-to-code | | Atlas | Mobile globe app | | Holocron | Admin panel |

Contributing

See CONTRIBUTING.md for guidelines on adding tokens and submitting pull requests.

Changelog

See CHANGELOG.md for version history.

License

MIT