AK Design System

EN DE TR

AK Design System

A lightweight, modern CSS framework for rapid prototyping and production-ready applications.

Overview

Build beautiful, responsive interfaces with our comprehensive component library.

Lightweight

Minimal footprint with maximum impact. Only 14KB minified and gzipped.

Themeable

Built with CSS variables for easy customization. Light and dark modes included.

Responsive

Mobile-first approach ensures your UI looks great on all devices.

Getting Started

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ak-hosting/ak-systems-css@v2.0.2/dist/ak-design-system.min.css">

Typography

View All Variants

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a standard paragraph with a link and some text.

This is a larger paragraph that stands out more.

This is a smaller paragraph for less important information.

Design is not just what it looks like and feels like. Design is how it works.

— Steve Jobs
This is inline code

Colors

Primary Colors

Primary

--ak-primary

Accent

--ak-accent

Secondary

--ak-secondary

Status Colors

Success

--ak-success

Warning

--ak-warning

Danger

--ak-danger

Info

--ak-info

Backgrounds

View All Variants

Patterns (dots, grid, stripes, waves) and decorative backgrounds. Uses the system colors defined via CSS variables.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ak-hosting/ak-systems-css@v2.0.2/dist/ak-design-system.min.css">

Buttons

View All Variants

Button Variants

Button Sizes

Button States

Button with Icon

Loaders

View All Variants

A comprehensive framework for loading indicators including spinners, dots, progress bars, and advanced animations.

Spinner

Dots

Wave

Forms

View All Variants
We'll never share your email with anyone else.

Selection Controls

View All Variants

Modern selection controls including cards, segmented controls, and enhanced toggles.

Selection Cards

Segmented Controls

Toggles

Upload

View All Variants

Drag and drop file upload zones with various styles and states.

Drop files here or click to upload

SVG, PNG, JPG or GIF (max. 800x400px)

Cards

View All Variants

Basic Card

This is a basic card with a header and content.

Card image

Card with Image

This card includes an image at the top.

Card with Footer

This card includes a footer with actions.

Alerts

View All Variants

Information

This is an informational message.

Success

Your action was completed successfully.

Warning

Please be careful with this action.

Error

Something went wrong. Please try again.

Modals

View All Variants

Success

Your action was completed successfully.

Layout Components

View All Variants

Hero Section

Perfect for landing pages and prominent call-to-action sections.

Welcome to AK Systems

Building the future of digital infrastructure with modern design principles.

<section class="ak-hero"> <div class="ak-hero-content"> <h1 class="ak-hero-title">Welcome to AK Systems</h1> <p class="ak-hero-subtitle">Building the future...</p> <div class="ak-hero-actions"> <button class="ak-btn ak-btn-primary">Get Started</button> <button class="ak-btn ak-btn-outline">Learn More</button> </div> </div> </section>

Image Utilities

Responsive images and object-fit utilities for flexible image handling.

Responsive Image (ak-img-fluid)

Responsive image

Automatically scales to container width

Thumbnail (ak-img-thumbnail)

Thumbnail

Gallery-style with border and padding

Object Cover (ak-object-cover)

Cover

Fills container, maintains aspect ratio

Object Contain (ak-object-contain)

Contain

Fits within container, shows full image

<!-- Responsive Image --> <img src="image.jpg" class="ak-img-fluid ak-rounded" alt="Responsive Image"> <!-- Thumbnail --> <img src="thumb.jpg" class="ak-img-thumbnail" alt="Thumbnail"> <!-- Object Fit --> <img src="avatar.jpg" class="ak-w-20 ak-h-20 ak-object-cover ak-rounded-full">

Tables

View All Variants
Name Email Role Status Actions
John Doe john@example.com Admin Active
Jane Smith jane@example.com User Pending
Robert Johnson robert@example.com User Inactive

Extended Components

View All Variants

Avatars

SM
MD
LG
A
B
C
+3

Navigation

Breadcrumbs

Pagination

Chatbot UI

Open Demo

New embedded assistant layouts for support, sales widgets and product copilots.

Support shell Floating widget Copilot

Hints & Accordion

View Tooltip Page

Tooltips and popovers now have a dedicated demo page with positions, sizes, and richer examples.

Accordion Item 1
Content for the first accordion item. It expands and collapses.
Accordion Item 2
Content for the second accordion item.

Misc Components

Badges

Default Secondary Outline Destructive Success

Progress

Switch

Dropdown

Actions

Utilities

Spacing

p-1
p-2
p-3
p-4
p-6
p-8

Flex

Item 1
Item 2
Item 3
Left
Center
Right
Aligned with icon

Grid

Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5
Grid Item 6

Text Alignment

Left aligned text

Center aligned text

Right aligned text

New Utility Helpers

customer-support-with-a-very-long-address@example-application-domain.test

Side
ORDER-2026-VERY-LONG-IDENTIFIER-WITHOUT-SPACES