Design System v2.0

ELITE TEAM
DESIGN SYSTEM PORTAL

Single Source of Truth for Elite Team UI/UX — soft enterprise clarity across all platforms.

8pt Grid Inter + Noto Sans Soft UI Dark Mode Cross-Platform

Getting Started

Everything you need to start building with the Elite Team Design System — from tokens to components.

1

Install Tokens

Copy the design-tokens.json or DESIGN.md into your project. All spacing, colors, and typography are defined as variables.

2

Choose Platform

The system works across Web (React/Vue/Svelte), Flutter, or Static HTML/CSS/JS.

3

Apply Components

Use the documented components below. Each one follows the 8pt grid and uses system tokens. No custom styling needed.

4

Customize Primary

Override the --primary CSS variable or update the JSON to match your brand. The system adapts seamlessly.

Pro tip: Download the full JSON or Markdown files from the Downloads section below to use with any AI agent or chat model.

Design Philosophy

"Soft enterprise clarity" — a balance between professional sophistication and approachable warmth. Every decision reinforces a thoughtful, mature design system built for serious work.

✦

Soft & Warm

Warm gray/neutral tones replace harsh whites and blacks. Every surface feels inviting yet professional.

◈

Muted Palette

Desaturated, sophisticated colors create calm interfaces. No high-saturation or jarring contrasts.

⊞

8pt Grid

Every spacing decision is a multiple of 8. Consistency creates rhythm and reduces cognitive load.

◌

Breathable Layout

Whitespace over borders. Spacing creates hierarchy, not heavy boxes or harsh outlines.

Design Tokens

The atomic building blocks of the Elite Team design system — colors, typography, spacing, shadows, and radii.

Color Palette

Primary
#758CB8
Primary Hover
#667DA8
Primary Active
#586E98
Primary Light
#E8EDF5
Primary Dark
#4A5F85
Success
#7BA88E
Warning
#C4A87A
Error
#B88383
Info
#8AA3B8
Neutral
#A8A8A8

Badge Palette (Full Spectrum)

Slate
#8A9BA8
Teal
#7AA8A3
Rose
#C49A9A
Amber
#C4A87A
Mint
#8AB89A
Lavender
#A89AC4
Sage
#9AAC8A
Coral
#C48A8A
Sky
#8AACB8
Plum
#A88AB8

Typography

7xl / Display
Aa
6xl / Hero
Aa
5xl / Section Title
Aa
4xl / Heading 1
Aa
3xl / Heading 2
Aa
2xl / Heading 3
Aa
xl / Heading 4
Aa
lg / Subheading
Aa
base / Body
The quick brown fox jumps over the lazy dog.
sm / Small
The quick brown fox jumps over the lazy dog.
xs / Tiny
The quick brown fox jumps over the lazy dog.

Spacing (8pt Grid)

0
4
8
12
16
20
24
32
40
48
56
64

Shadows

Level 1
Level 2
Level 3
Level 4
Level 5

Border Radius

sm 4px
md 8px
lg 12px
xl 16px
round

Components Library

Interactive examples of all system components. Each component follows the 8pt grid and soft UI principles. Every element is documented with its tokens and usage.

Buttons

Variants & Sizes

Tokens Used

Background: --primary, --primary-hover
Text: --text-inverse
Spacing: --space-* (8pt grid)
Radius: --radius-md
Shadow: --shadow-2 (hover)
Transition: --transition-fast

Usage: Use .btn with variant classes. Sizes: .btn-sm (32px), .btn-md (40px), .btn-lg (48px).

Badges

Full Spectrum
Slate Teal Rose Amber Mint Lavender Sage Coral Sky Plum
Small Small Large Large

Tokens Used

Colors: --badge-* (10 variants)
Sizes: .badge-sm, .badge, .badge-lg
Radius: --radius-sm
Typography: 0.6875rem / 500

Usage: Use .badge + color variant. Sizes: .badge-sm (16px), .badge (20px), .badge-lg (24px).

Inputs

Text Inputs
Helper text goes here
This field has an error

Tokens Used

Border: --border-color
Background: --bg-primary
Text: --text-primary
Focus: --primary + --primary-light
Error: --error
Spacing: --space-* (8pt grid)

Usage: Use .input-field with .input-group. Add .error for error states. Floating label uses .input-float.

Custom Dropdown

Single Select

Tokens Used

Border: --border-color
Background: --bg-primary, --bg-surface
Shadow: --shadow-4
Radius: --radius-md
Selected: --primary-light

Usage: Structure: .dropdown-container > .dropdown-trigger + .dropdown-panel. Includes search and keyboard navigation.

Switch Toggle

Toggle

Tokens Used

Checked: --primary
Unchecked: #C8C8C8 (#555 dark)
Knob: #fff / #ddd
Transition: --transition-base
Shadow: --shadow-1

Usage: Use .switch with hidden checkbox. Labels update automatically. Supports :disabled and :checked states.

Modal

Modal Dialog

Tokens Used

Backdrop: rgba(0,0,0,0.4) + blur(4px)
Surface: --bg-surface
Shadow: --shadow-5
Radius: --radius-lg
Animation: fadeIn / modalIn

Usage: Add .open to .modal-overlay. Includes focus trap and Escape key support.

Toast Notifications

Toast Variants

Tokens Used

Success: --success
Error: --error
Warning: --warning
Info: --info
Shadow: --shadow-4
Animation: toastIn slide from right

Usage: Call showToast(type, title, message). Auto-dismisses after 5s. Max 5 visible.

KPI Cards

Metrics
12,847
Total Users
↑ +12.5%
843
Active Sessions
↑ +8.2%
94.7%
Uptime
↓ -1.3%
2.4s
Avg. Response
↑ -0.4s

Tokens Used

Value: --text-primary / 2rem / 700
Label: --text-secondary / 0.8125rem
Trend Up: --success
Trend Down: --error
Spacing: --space-4

Usage: Use .kpi-grid > .kpi-card. Trend: .up or .down.

Table

Name Status Role Last Active
Sarah Chen Active Design Lead 2 min ago
Marcus Rivera Pending Developer 1 hour ago
Priya Patel Active Product Manager 15 min ago
James Kim Inactive Designer 3 days ago
Elena Vogt Active Engineer 42 min ago

Tokens Used

Header: --bg-secondary / --text-secondary
Hover: --bg-primary
Borders: --border-color / --border-light
Status: --success / --warning / --error
Spacing: --space-3 / --space-4

Usage: Wrap in .table-wrap for responsive overflow. Status: .status-badge .active|pending|inactive.

Pagination

Page Navigation

Tokens Used

Active: --primary / #fff
Hover: --primary (border/color)
Disabled: opacity:0.4
Radius: --radius-sm
Spacing: --space-1

Usage: Use .pagination with button elements. Add .active to current page. Disabled for prev/next when at ends.

Tabs

Tab Navigation

Content for Tab One — built with the Elite Team design system.

Content for Tab Two — all components share the same tokens.

Content for Tab Three — consistent spacing and typography.

Tokens Used

Active: --primary (border + text)
Inactive: --text-muted
Hover: --text-primary
Border: --border-color
Spacing: --space-2 / --space-4

Usage: .tabs > button with data-tab. Content: .tab-pane with matching ID. Add .active to show.

Accordion

Collapsible Sections
Content for section one. Accordions help organize content in a compact space while maintaining readability.
Content for section two. Each item is independent and follows the 8pt grid for spacing.
Content for section three. The accordion uses soft borders and gentle transitions.

Tokens Used

Border: --border-light
Background: --bg-surface
Text: --text-primary / --text-secondary
Hover: --bg-primary
Transition: --transition-fast

Usage: .accordion > .accordion-item > .accordion-header + .accordion-body. Add .open to expand.

Progress Bar

Progress Indicator
Loading68%
Uploading100%

Tokens Used

Track: --bg-secondary
Fill: --primary
Height: 6px
Radius: 3px
Label: --text-muted / 0.75rem

Usage: .progress > .progress-bar with width set inline. Use .progress-label for labels.

Skeleton Loaders

Loading States

Tokens Used

Base: --bg-secondary
Animation: skeletonPulse (opacity)
Radius: --radius-sm
Spacing: --space-* (8pt grid)

Usage: Add .skeleton to any element. Use .skeleton-text, .skeleton-circle, .skeleton-card for common patterns.

Avatars

User Avatars
JD
MK
SP
ET
LM
JD
MK
SP
+3

Tokens Used

Background: --primary-light
Text: --primary / #fff
Radius: 50%
Sizes: 32px / 40px / 56px
Group: -8px overlap

Usage: .avatar with initials. Sizes: .avatar-sm, .avatar-lg. Group: .avatar-group.

Breadcrumb

Navigation Trail

Tokens Used

Links: --text-secondary → --primary
Current: --text-primary / 500
Separator: --text-muted
Spacing: --space-2
Typography: 0.875rem

Usage: .breadcrumb with a links and .separator spans. Current page: .current.

Card Variations

Card Styles
Basic Card
A standard card with header, body, and optional footer.
Footer content
Elevated Card
Has a subtle shadow for depth. Hover increases shadow.
Elevated style
Interactive Card
Hover lifts the card slightly. Click to trigger an action.
Click me

Tokens Used

Surface: --bg-surface
Border: --border-light
Radius: --radius-lg
Shadow: --shadow-2 / --shadow-4
Hover: translateY(-2px) + --shadow-3

Usage: .card with .card-header, .card-body, .card-footer. Add .card-elevated or .card-interactive for variations.

Layout System

12-column grid, containers, and spacing principles that create airy, breathable interfaces.

12 cols
6 cols
6 cols
4 cols
4 cols
4 cols
3 cols
3 cols
3 cols
3 cols

Container: Max width 1280px, gutter 24px. Spacing follows the 8pt grid — every margin, padding, and gap is a multiple of 8.

Dark Mode

Fully supported dark/light toggle. Defaults to user preference. All components adapt seamlessly.

Light Mode

Warm off-white backgrounds with soft charcoal text. The default, airy experience.

Slate Teal Rose

Dark Mode

Soft charcoal-gray tones with warm text. Easy on the eyes, never pure black.

Slate Teal Rose

Toggle dark mode using the ☽ / ☀ button in the navbar. Your preference is saved.

Cross-Platform Mapping

The design system translates seamlessly across Web, Flutter, and Static implementations.

🌐

Web

React / Vue / Svelte components with CSS custom properties. Fully responsive.

📱

Flutter

Dart implementation with ThemeData. All tokens mapped to Flutter's design system.

📄

Static

Pure HTML/CSS/JS for marketing sites, landing pages, and documentation.

◈

Design Tokens

JSON / YAML token definitions for cross-platform consistency.

Token Mapping: Colors → CSS variables / Flutter Colors / SCSS variables. Spacing → rem units / Flutter EdgeInsets / CSS spacing.

Example Applications

Real-world patterns and layouts built with the Elite Team design system.

📊

Dashboard

KPI cards, charts, and data tables in a clean, scannable layout.

⚙

Admin Panel

Settings, user management, and system controls with side navigation.

🏠

Landing Page

Hero sections, feature grids, and call-to-action components.

👤

Profile Page

User information, activity feeds, and preference controls.

All examples are built using the same component library — consistent, cohesive, and on-brand.

Downloads

Download the complete Elite Team Design System as JSON or Markdown. Use with any AI agent or chat model.

JSON Format

Structured token data for AI agents, design tools, and programmatic use. Contains all tokens, components, and rules.

Markdown Format

Human-readable documentation in Markdown. Perfect for README files, docs, and AI context.

Note: The primary color is not hardcoded in the files. Override --primary in CSS or update the primary field in the JSON to match your brand.