Elite Team Design System — CDN Documentation

Quick Start

Add two lines to any HTML page to start using the design system:

<link rel="stylesheet" href="https://cdn.design.eliteteam.ly/design-system/v1/design-system.css">
<script src="https://cdn.design.eliteteam.ly/design-system/v1/design-system.js"></script>

For the latest stable version, use /latest/ instead of /v1/:

<link rel="stylesheet" href="https://cdn.design.eliteteam.ly/design-system/latest/design-system.css">
<script src="https://cdn.design.eliteteam.ly/design-system/latest/design-system.js"></script>

Installation Steps

Add CDN Links

Copy the CSS and JavaScript links above and paste them into your page.
Use Components

Start using any component from the library. All components work out of the box.
Customize Colors

Override the --primary CSS variable in your own styles to match your brand.
Enable Dark Mode

The system supports dark mode automatically. Use the toggle button in the navbar.

Note: The system auto-initializes. No manual function calls required. All interactive components (dropdowns, modals, tabs, accordions) work immediately.

Design Tokens

All design tokens are available as CSS custom properties. Override them in :root to customize the system.

Color Palette

--primary

#758CB8

--primary-hover

#667DA8

--primary-active

#586E98

--primary-light

#E8EDF5

--success

#7BA88E

--error

#B88383

--warning

#C4A87A

--info

#8AA3B8

Badge Colors

--badge-slate

#8A9BA8

--badge-teal

#7AA8A3

--badge-rose

#C49A9A

--badge-amber

#C4A87A

--badge-mint

#8AB89A

--badge-lavender

#A89AC4

--badge-sage

#9AAC8A

--badge-coral

#C48A8A

--badge-sky

#8AACB8

--badge-plum

#A88AB8

Spacing (8pt Grid)

All spacing values are multiples of 8. Available: --space-0 through --space-13 (0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96px).

0

4

8

12

16

20

24

32

40

48

56

64

Typography Scale

Token	Size	Line Height	Weight
7xl	56px	64px	700
6xl	48px	56px	700
5xl	40px	48px	600
4xl	32px	40px	600
3xl	28px	36px	600
2xl	24px	32px	600
xl	20px	28px	600
lg	18px	26px	500
base	16px	24px	400
sm	14px	20px	400
xs	12px	16px	400

Shadows

--shadow-1 through --shadow-5 — increasing elevation levels.

Border Radius

--radius-sm (4px), --radius-md (8px), --radius-lg (12px), --radius-xl (16px).

Components

All components are styled with CSS classes. Below are usage examples for each component.

Buttons

Variants

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-danger">Danger</button>

Sizes: .btn-sm (32px), .btn-md (40px, default), .btn-lg (48px).

Badges

10 Colors Slate Teal Rose Amber Mint Lavender Sage Coral Sky Plum

<span class="badge badge-slate">Slate</span>
<span class="badge badge-teal">Teal</span>

Sizes: .badge-sm, .badge (default), .badge-lg.

Inputs

Text Input

Label Helper text

With Error Error message

<div class="input-group">
  <label>Label</label>
  <input class="input-field" placeholder="Enter text..." />
  <span class="input-helper">Helper text</span>
</div>

Dropdown

Single Select

<div class="dropdown-container">
  <button class="dropdown-trigger">Select <span class="icon icon-chevron-down"></span></button>
  <div class="dropdown-panel">
    <div class="dropdown-search"><input type="text" placeholder="Search..." /></div>
    <div class="dropdown-option">Option 1</div>
  </div>
</div>

Switch

Toggle

Off On

Disabled

<div class="switch-group">
  <label>Off</label>
  <label class="switch">
    <input type="checkbox" />
    <span class="slider"></span>
  </label>
  <label>On</label>
</div>

Modal

Dialog

<div class="modal-overlay" id="myModal">
  <div class="modal">
    <div class="modal-header">
      <h2>Title</h2>
      <button class="modal-close"><span class="icon icon-x"></span></button>
    </div>
    <div class="modal-body">Content</div>
    <div class="modal-footer">
      <button class="btn btn-secondary">Cancel</button>
      <button class="btn btn-primary">Confirm</button>
    </div>
  </div>
</div>

Toast Notifications

Variants

ETDesignSystem.showToast('success', 'Success', 'Action completed.');

KPI Cards

12,847

Total Users

+12.5%

843

Active Sessions

+8.2%

94.7%

Uptime

-1.3%

2.4s

Avg. Response

-0.4s

<div class="kpi-grid">
  <div class="kpi-card">
    <div class="kpi-value">12,847</div>
    <div class="kpi-label">Total Users</div>
    <span class="kpi-trend up"><span class="icon icon-arrow-up"></span> +12.5%</span>
  </div>
</div>

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

<div class="table-wrap">
  <table>
    <thead><tr><th>Name</th><th>Status</th></tr></thead>
    <tbody>
      <tr><td>Name</td><td><span class="status-badge active">Active</span></td></tr>
    </tbody>
  </table>
</div>

Tabs

Content for Tab One.

Content for Tab Two.

Content for Tab Three.

<div class="tabs">
  <button class="active" data-tab="tab1">Tab 1</button>
  <button data-tab="tab2">Tab 2</button>
</div>
<div class="tab-content">
  <div class="tab-pane active" id="tab1">Content 1</div>
  <div class="tab-pane" id="tab2">Content 2</div>
</div>

Accordion

Content for section one.

Content for section two.

Content for section three.

<div class="accordion">
  <div class="accordion-item open">
    <button class="accordion-header">Title <span class="icon icon-chevron-down"></span></button>
    <div class="accordion-body">Content</div>
  </div>
</div>

Progress Bar

Loading68%

<div class="progress">
  <div class="progress-bar" style="width:68%;"></div>
</div>

Avatar

User Avatars

JD

MK

SP

ET

JD

MK

SP

+3

<div class="avatar">JD</div>
<div class="avatar avatar-sm">JD</div>
<div class="avatar avatar-lg">JD</div>
<div class="avatar-group">
  <div class="avatar">JD</div>
  <div class="avatar">MK</div>
</div>

Breadcrumb

<nav class="breadcrumb">
  <a href="#">Home</a>
  <span class="separator"><span class="icon icon-chevron-right"></span></span>
  <a href="#">Components</a>
  <span class="separator"><span class="icon icon-chevron-right"></span></span>
  <span class="current">Current</span>
</nav>

Cards

Basic Card

A standard card with header, body, and optional footer.

Footer content

Elevated Card

Has a subtle shadow for depth.

Elevated style

Interactive Card

Hover lifts the card. Click triggers an action.

Click me

<div class="card">
  <div class="card-header">Title</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

Pagination

<div class="pagination">
  <button disabled><span class="icon icon-chevron-left"></span></button>
  <button class="active">1</button>
  <button>2</button>
  <button>3</button>
  <button><span class="icon icon-chevron-right"></span></button>
</div>

JavaScript API

All functionality is exposed via the global window.ETDesignSystem object.

Method	Description
`init()`	Manually initialize all components (auto-called on DOM ready).
`setTheme(theme)`	Switch theme (`'light'` or `'dark'`).
`getPreferredTheme()`	Return the user's preferred theme.
`showToast(type, title, message)`	Display a toast notification. Types: `success`, `error`, `warning`, `info`.
`initDropdown(container)`	Initialize a dropdown inside a container element.
`initModal(overlay)`	Initialize a modal overlay.
`initTabs(container)`	Initialize tabs inside a container.
`initAccordion(container)`	Initialize an accordion.
`initSwitches()`	Update switch labels dynamically.
`createIcon(name, size, color)`	Create an icon element.
`injectIcon(element, name, size, color)`	Inject an icon into an element.
`replaceWithIcon(element, name, size, color)`	Replace an element with an icon.

// Example: Show a toast notification
ETDesignSystem.showToast('success', 'Welcome', 'Design system loaded successfully.');

// Example: Switch to dark mode
ETDesignSystem.setTheme('dark');

// Example: Create an icon
var icon = ETDesignSystem.createIcon('home', 24, '#758CB8');
document.body.appendChild(icon);

Icons Library

All 1743 icons from Lucide icon set.

Usage: <span class="icon icon-home"></span>

Page 1 / 1

Versioning

v1.x — Stable release. No breaking changes within minor versions.
latest/ — Always points to the latest stable version.
v2.0 — Will introduce breaking changes. A migration guide will be provided.
All previous versions remain available at https://cdn.design.eliteteam.ly/design-system/v{version}/.

Version strategy follows Semantic Versioning (SemVer).

Browser Compatibility

Chrome (latest 2 versions)
Firefox (latest 2 versions)
Safari (latest 2 versions)
Edge (latest 2 versions)
iOS Safari & Android Chrome (latest versions)

Internet Explorer 11 is not supported.

The system works with:

Plain HTML websites
React applications
Vue applications
Next.js applications
WordPress
Static hosting environments

Best Practices

Override tokens in your own stylesheet. Never edit the CDN files directly.
Use the 8pt grid — all spacing values are multiples of 8.
Reuse components — don't create custom styles when a system component exists.
Enable dark mode — the system respects prefers-color-scheme and local storage.
Accessibility — all components are keyboard-navigable with proper ARIA attributes.
Performance — use the combined design-system.css and design-system.js in production.
Cache — versioned files can be cached indefinitely. Use /latest/ for always-fresh.

Troubleshooting

Components not initializing? Ensure the DOM is ready (auto-init handles this).
Theme not persisting? Check that localStorage is available and not blocked.
Icons not showing? Ensure you're using the icon classes correctly: <span class="icon icon-home"></span>
Style conflicts? All component classes are specific. Use the et- prefix for your own classes to avoid conflicts.
CDN not loading? Ensure your network allows access to cdn.design.eliteteam.ly.

ELITE TEAMDESIGN SYSTEM