Design Overview

Aatman AI Design System is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Typography

Our typography system is built on **Space Grotesk** for headings and **Inter** for body text. It is optimized for readability, hierarchy, and a distinct technical aesthetic.

Headings

Heading 1 / 48px Space Grotesk Bold

Digital Frontier

Heading 2 / 36px Space Grotesk Bold

Neural Network Architecture

Heading 3 / 30px Space Grotesk SemiBold

Predictive Analytics Model

Heading 4 / 20px Space Grotesk Medium

Incremental Learning Update

Body & Special

Lead Paragraph / 18px

Aatman UI provides a robust set of typographical tools to create immersive and professional AI-driven experiences with minimal effort.

Body Text / 14px

The primary body font is Inter, chosen for its exceptional clarity on high-resolution screens. It pairs perfectly with our geometric heading font to maintain a balanced look.

Gradient Accent

Empowering the Next Generation of Intelligence.

font-family: 'Space Grotesk', sans-serif;

Color Palette

Our color system is designed for high-contrast, accessibility, and a futuristic AI aesthetic. It uses deep backgrounds paired with vibrant primary accents and subtle surface elevations.

Brand & Accents

Primary

Core Action Color

#6366f1

Secondary

Supportive Accents

#ec4899

Primary Glow

Interaction States

#818cf8

Neutral Surfaces

Background

#0a0a0f

Surface

#13131f

Elements

rgba(255,255,255,0.05)

Subtle Borders

rgba(255,255,255,0.02)

Button Components

A comprehensive showcase of interactive button elements. Features primary neon gradients, secondary glass-outlines, ghost buttons, and icon-only variations across multiple states. Designed for high visibility and clear interaction feedback.

Type	Default	Hover (Glow)	Active	Disabled	Loading
Primary Gradient Fill
Secondary Glass Outline
Ghost Text Only
Icon Only Circular

verified

Best Practices

Use primary buttons for the main action on a screen (e.g., Submit, Save).
Secondary buttons are for alternative actions (e.g., Cancel, Go Back).
Maintain consistent spacing (16px) between grouped buttons.

warning

Don'ts

Avoid using multiple primary buttons in a single view.
Do not use ghost buttons for critical actions as they have low prominence.
Never use disabled buttons for actions that are temporarily unavailable due to loading; use the loading state instead.

Implementation

import { Button } from '@aatman/ui';

// Primary Button
<Button variant="primary" size="lg">
  Save Changes
</Button>

// Secondary Button with Icon
<Button variant="secondary" icon="delete">
  Delete
</Button>

AI Prompt Input

Beta Component v1.2.0

A specialized, glassmorphic multi-line input designed for generative AI contexts. Features intelligent state-aware lighting effects, integrated tool actions, and a futuristic aesthetic.

Interactive Demo

State: Focused (Active)

124/1000

State: Disabled (System Busy)

System is currently processing previous request...

Properties

Prop	Type	Default
state	'default' \| 'focus' \| 'disabled' \| 'error'	'default'
glowColor	string (hex)	cyan
showTools	boolean	true
maxLength	number	1000

Accessibility

check_circle Keyboard Navigation

Full keyboard support for input focus and internal tool buttons using standard tab indexing.

check_circle Focus Indicators

High-visibility glow rings ensure focus state is perceptible for users with low vision.

warning Glass Contrast

Ensure background images behind the glass panel do not compromise text legibility. Use the provided `glass-bg` utility for safe contrast levels.

UI Controls

Selection controls that allow users to select options, toggle settings, and make choices within the interface.

Checkboxes

Option One

check

Selected Option

Switches

Notifications

Biometric Auth

Radio Buttons

Standard AI

Enhanced Model

Cards (Glassmorphism)

Glass Card

Standard content container with backdrop blur and subtle border.

Hover Effect

Interact with this card to see the hover state and border glow.

Total Users

12,345

+15% vs last month

Alerts

Communicative feedback messages designed to capture attention without breaking the user flow. Built with adaptive glassmorphism and semantic neon accents.

info

System Update

A new version of the inference engine is available. Check the changelog for details.

check_circle

Model Trained Successfully

Your custom dataset has been indexed and the model is now ready for deployment.

warning

Quotas Approaching Limit

You have used 85% of your token quota for this month. Consider upgrading your plan.

error

Inference Failure

The server encountered an error while processing your request. Please try again later.

Toasts

Ephemeral, non-intrusive notifications for transient system events. Designed to float above content with high-fidelity glass depth and integrated actions.

Standard Notification

notifications

Message Received

You have 3 new messages from Alex.

Interactive Toast

cloud_upload

Project Exported

"Annual_Report_2026.pdf" is ready.

Urgent Warning

notification_important

Connection Lost

Check your network settings.

Progress

Indicators for asynchronous operations and task completion states. Includes linear progress bars, cyclic hunters, and specialized loading states.

Standard Progress 65%

Gradient Indeterminate

Cyberpunk Pulse

Processing

hourglass_empty

Inference

bolt

settings_backup_restore

Syncing Data...

Node: US-EAST-1

Premium Collection NEW

3D Tilt Effect

Holographic

Chat Interface

Can you explain the difference between supervised and unsupervised learning?

You • 10:42 AM

Certainly. The core difference lies in how the algorithms are trained and the nature of the data they utilize.

Supervised Learning

Uses labeled datasets. Think of it as learning with a teacher holding the answer key.

Unsupervised Learning

Uses unlabeled datasets. The algorithm explores data to find hidden patterns.

Aatman-4-Turbo • 10:42 AM

Marketplace Widgets

Marketing

SEO Blog Post Generator

Act as an SEO expert with 10 years of experience. Write a comprehensive, keyword-rich blog post...

visibility 1.2k star 4.9

System Analytics

A comprehensive overview of system foundational performance, monitoring metrics, and node status across the global inference network.

System Performance auto_graph

98.4% Optimal

Active Nodes

1,248 +12 active

Security Tier shield_locked

12% Threat Level

Inference Memory memory

74%

Total allocated 12.4 GB

System Monitoring

Process Name	Status	CPU	Memory	Disk I/O
Inference Engine v2	Running	12.4%	2.4 GB	840 KB/s
Token Service	Running	4.2%	128 MB	12 KB/s
Security Patch	Syncing	45.8%	1.2 GB	45 MB/s