Installation

Include one CSS file – done. Optionally add a theme override for custom brand colors.

<link rel="stylesheet" href="glasskit.css">  <link rel="stylesheet" href="theme-override.css">  <html data-theme="dark">  <html data-theme="light">

Design Tokens

All visual values are controlled via CSS Custom Properties.

Color Palette

Token	Dark Value	Usage
`--gl-color-primary`	#f5a623	Primary color, buttons, active elements
`--gl-color-primary-dark`	#d4692a	Gradient end value
`--gl-color-text`	#ffffff	Default text color
`--gl-color-text-muted`	rgba(255,255,255,0.60)	Secondary text
`--gl-color-success`	#34c759	Success status
`--gl-color-error`	#ff3b30	Error status

Glass Surfaces

Token	Value	Usage
`--gl-surface-1`	rgba(…, 0.08)	Subtlest surface (status)
`--gl-surface-2`	rgba(…, 0.10)	Default (inputs, cards)
`--gl-surface-3`	rgba(…, 0.14)	Nav pills, badges
`--gl-surface-4`	rgba(…, 0.16)	Hover states
`--gl-surface-5`	rgba(…, 0.22)	Strong hover
`--gl-surface-milk-strong`	rgba(…, 0.75)	Secondary button

Spacing & Radii

Token	Value	Token	Value
`--gl-space-2xs`	4px	`--gl-radius-xs`	8px
`--gl-space-xs`	8px	`--gl-radius-sm`	12px
`--gl-space-sm`	12px	`--gl-radius-input`	14px
`--gl-space-md`	16px	`--gl-radius-btn`	16px
`--gl-space-lg`	20px	`--gl-radius-card`	24px
`--gl-space-xl`	24px	`--gl-radius-full`	9999px
`--gl-space-2xl`	32px	`--gl-radius-pill`	50%

Theming (Light / Dark)

The theme is controlled via data-theme on the <html> element.

// Theme per JavaScript wechseln: function toggleTheme() { const html = document.documentElement; const current = html.getAttribute('data-theme'); html.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark' ); }

Background

The glass effect requires a colored background.

Class	Description
`.glass-bg`	Full background with aurora light effects
`.glass-bg--has-tab-bar`	Modifier: bottom padding for tab bar
`.glass-bg--has-tab-bar-floating`	Modifier: bottom padding for floating tab bar + accessory

Navigation Bar

Pill-Buttons

Round icon buttons for navigation and actions.

Class	Description
`.glass-pill`	Standard glass circle (46×46px)
`.glass-theme-toggle`	Pill with moon/sun icon switch

Tab-Bar

Fixed bottom navigation with glass background and optional badge.

<nav class="glass-tab-bar"> <button class="glass-tab-bar__item is-active"> <span class="glass-tab-bar__icon"></span> <span class="glass-tab-bar__label">Start</span> </button> <button class="glass-tab-bar__item"> <span class="glass-tab-bar__icon">  <span class="glass-tab-bar__badge">3</span> </span> <span class="glass-tab-bar__label">Contracts</span> </button> </nav>

Tab-Bar – Floating

Pill-shaped, centered, floating variant inspired by iOS 26 Liquid Glass. Pair with an optional .glass-tab-bar__accessory capsule (e.g. search, compose) — sits next to the bar with its own glass material. The active tab gets a soft radial Spotlight halo instead of the underline dot.

Accessory accent variants

Add --accent, --success, or --error to highlight the accessory with a colored capsule (filled background, white icon).

Class	Description
`.glass-tab-bar-dock`	Wrapper: fixed bottom-center, holds bar + accessory
`.glass-tab-bar-dock--accessory-left`	Modifier: place accessory on the left
`.glass-tab-bar--floating`	Modifier on `.glass-tab-bar`: pill shape, max-content width
`.glass-tab-bar__accessory`	Standalone glass capsule next to the bar
`.glass-tab-bar__accessory--accent`	Filled with primary color
`.glass-tab-bar__accessory--success`	Filled with success color
`.glass-tab-bar__accessory--error`	Filled with error color
`.glass-bg--has-tab-bar-floating`	Background padding helper for the floating variant

Title

Capture Contracts
& Upload

<h1 class="glass-title">Seitentitel</h1>

Card

Photograph your document, verify edges, and upload in batch.

Class	Description
`.glass-card`	Base glass surface
`.glass-card--glow`	Light → milky gradient + light streak
`.glass-card__icon`	Centered icon wrapper
`.glass-card__text`	Description text

Buttons

Class	Description
`.glass-btn`	Base (56px, full width)
`--primary`	Colored gradient
`--secondary`	Milky white
`--tertiary`	Subtle glass
`--sm`	44px height
`--lg`	64px height
`--auto`	Auto width

Badge

Standard Aktiv Fertig Fehler

<span class="glass-badge glass-badge--primary">Aktiv</span>

Avatar

S

M

L

Divider

Status Notice

No documents captured yet.

<div class="glass-status"> <svg viewBox="0 0 24 24"></svg> <p>No documents captured yet.</p> </div>

List

Grouped settings-style container for stacked rows. Items support a leading icon, title + optional subtitle, and a trailing element (chevron, value, button). Dividers between items are drawn automatically — no extra markup needed.

Settings style (icon + title + subtitle + trailing)

iOS 26.4 Update

2.1 GB · Available now
Apple One

Family — renews Apr 28

$22.95
Notifications
View all subscriptions

<ul class="glass-list"> <li class="glass-list__item glass-list__item--interactive"> <span class="glass-list__leading"><svg>...</svg></span> <div class="glass-list__content"> <div class="glass-list__title">iOS 26.4 Update</div> <div class="glass-list__subtitle">2.1 GB · Available now</div> </div> <div class="glass-list__trailing"><svg>...</svg></div> </li>  <li class="glass-list__item glass-list__item--center">View all</li> </ul>

Compact menu (centered text, no icons)

Share document
Duplicate
Delete

<ul class="glass-list"> <li class="glass-list__item glass-list__item--center glass-list__item--interactive">Share document</li> <li class="glass-list__item glass-list__item--center glass-list__item--interactive">Duplicate</li> <li class="glass-list__item glass-list__item--center glass-list__item--interactive glass-list__item--danger">Delete</li> </ul>

Grouped sections with large icons

Recommendations

Review downloaded media

Save up to 1.38 GB. Review all videos and audio files downloaded on your device and remove them as needed.
AusweisApp Bund

Version 2.5.1

24 MB

Audiobooks

Ghost in the Machine

Partially watched

237.1 MB
View all downloads

<div class="glass-list__section-header">Recommendations</div> <ul class="glass-list"> <li class="glass-list__item glass-list__item--interactive"> <span class="glass-list__leading glass-list__leading--lg"><svg>...</svg></span> <div class="glass-list__content"> <div class="glass-list__title">Review downloaded media</div> <div class="glass-list__subtitle glass-list__subtitle--wrap">Multi-line description...</div> </div> <div class="glass-list__trailing"> <span class="glass-list__value">24 MB</span> <svg>...</svg> </div> </li> <li class="glass-list__item glass-list__item--accent glass-list__item--center">View all</li> </ul>

Class reference

Class	Description
`.glass-list`	Grouped surface container
`.glass-list--flush`	Edge-to-edge variant (no side margin / radius). Assumes parent has `--gl-space-lg` horizontal padding.
`.glass-list--bare`	Strips background, border & shadow — for embedding inside `.glass-popover` or `.glass-card`.
`.glass-list__item`	List row (use `<li>`, `<a>`, or `<button>`)
`.glass-list__section-header`	Section label above a `.glass-list` — uppercase, small, muted
`.glass-list__item--interactive`	Adds hover / focus / active states
`.glass-list__item--center`	Centered single-text variant with ellipsis truncation
`.glass-list__item--danger`	Red text for destructive actions
`.glass-list__item--accent`	Primary-colored text for accent actions
`.glass-list__leading`	Leading slot (28×28, holds an icon SVG)
`.glass-list__leading--lg`	Large leading slot (40×40, rounded square, supports `<img>`)
`.glass-list__content`	Flexible middle slot — takes remaining width, enables truncation
`.glass-list__title`	Primary text (medium weight, ellipsis)
`.glass-list__subtitle`	Secondary text (small, muted, ellipsis)
`.glass-list__subtitle--wrap`	Multi-line subtitle (up to 3 lines, clamped with ellipsis)
`.glass-list__trailing`	Trailing slot — chevron, value, button, badge
`.glass-list__value`	Muted text inside `.glass-list__trailing` (e.g. file size)

Dividers between rows are rendered automatically via ::after. Items with a leading icon get an icon-aligned inset; items without get a standard left/right padding inset. The last item never has a divider. SVG icon convention: 24px for leading, 18px for trailing, stroke: currentColor, stroke-width: 2.

Modal

Centered dialog with blur overlay. Visibility is controlled via the .is-active class on the overlay element — toggling it requires a tiny bit of JavaScript.

<div class="glass-modal-overlay" id="my-modal"> <div class="glass-modal"> <div class="glass-modal__header"> <h2 class="glass-modal__title">Delete document?</h2> </div> <div class="glass-modal__body"> <p>This action cannot be undone.</p> </div> <div class="glass-modal__footer"> <button class="glass-modal__action" onclick="closeModal()">Cancel</button> <button class="glass-modal__action glass-modal__action--danger">Delete</button> </div> </div> </div> <script> // Open / close by toggling .is-active on the overlay (NOT on .glass-modal) function openModal() { document.getElementById('my-modal').classList.add('is-active'); } function closeModal() { document.getElementById('my-modal').classList.remove('is-active'); } </script>

Class reference

Class	Description
`.glass-modal-overlay`	Fullscreen blur overlay
`.glass-modal-overlay.is-active`	Visible + animated
`.glass-modal`	Dialog container (max-width 340px)
`__header / __title`	Title area
`__body`	Content area
`__footer / __action`	Action bar
`__action--primary`	Primary action
`__action--danger`	Dangerous action

Note: the .is-active class belongs on the .glass-modal-overlay, not on .glass-modal itself. The overlay handles the fullscreen backdrop, and its :is-active state triggers both the backdrop fade-in and the inner dialog's scale-up animation.

Toast

Visible via .is-visible. Variants: --success, --error, --warning.

Document uploaded successfully!

<div class="glass-toast glass-toast--success"> <svg class="glass-toast__icon">...</svg> <span class="glass-toast__text">Success!</span> </div>

Popover

Anchored dropdown / menu container. Wrap a trigger and a .glass-popover in a .glass-popover-anchor. Visibility is controlled via the .is-open class — toggling it requires a tiny bit of JavaScript.

<div class="glass-popover-anchor"> <button class="glass-btn glass-btn--secondary" onclick="togglePop(this)">Open menu</button> <div class="glass-popover"> <ul class="glass-list glass-list--bare"> <li class="glass-list__item glass-list__item--interactive">Share</li> <li class="glass-list__item glass-list__item--interactive">Delete</li> </ul> </div> </div> <script> // Note: do NOT name the function `togglePopover` — collides // with the native HTMLElement.togglePopover() API method. function togglePop(btn) { btn.nextElementSibling.classList.toggle('is-open'); } </script>

Class reference

Class	Description
`.glass-popover-anchor`	Positioning context for the popover (wraps trigger + popover)
`.glass-popover`	Floating glass surface, hidden until `.is-open`
`.glass-popover.is-open`	Visible state — fade + scale animation
`.glass-popover--top`	Opens upward (above the trigger)
`.glass-popover--start`	Aligns left edge with trigger
`.glass-popover--end`	Aligns right edge with trigger

Note: name your toggle function anything except togglePopover — that name collides with the native HTMLElement.togglePopover() method from the HTML Popover API and inline onclick handlers will throw a NotSupportedError.

Input

Contract Name

Error State Please enter a valid email address

<div class="glass-input-group"> <label class="glass-label">Label</label> <input class="glass-input" type="text"> <span class="glass-hint">Help text</span> </div>

Textarea

Select

<select class="glass-select"> <option>Please select…</option> </select>

Search

Toggle Switch

Aktiviert Deaktiviert

<label class="glass-toggle"> <input class="glass-toggle__input" type="checkbox"> <span class="glass-toggle__track"> <span class="glass-toggle__thumb"></span> </span> <span class="glass-toggle__label">Label</span> </label>

Checkbox

Selected Not selected

Radio Button

Option A Option B

Range Slider

Image Quality 75%

Progress Bar

Class	Description
`.glass-progress`	Base container
`--sm / --lg`	Track height: 4px / 12px
`--success / --error`	Color variants

Accordion

The detailed answer to this question.

The answer to question two.

Utilities

Stack (vertikal)

.gl-stack .gl-stack--xs (8px) .gl-stack--sm (12px) .gl-stack--md (16px) .gl-stack--lg (20px) .gl-stack--xl (24px)

Row (horizontal)

.gl-row .gl-row--xs (8px) .gl-row--sm (12px) .gl-row--md (16px)

Margin Top

.gl-mt-sm (12px) .gl-mt-md (16px) .gl-mt-lg (20px) .gl-mt-xl (24px)

Margin Bottom

.gl-mb-sm (12px) .gl-mb-md (16px) .gl-mb-lg (20px) .gl-mb-xl (24px)

Text

.gl-text-center .gl-text-muted .gl-text-sm

Layout

.gl-px (padding horizontal) .gl-w-full (width: 100%) .gl-flex-1 (flex: 1)

📋 All Classes at a Glance

Component	Classes	Modifier / States
Background	`.glass-bg`	`--has-tab-bar`
Navigation	`.glass-nav`	–
Pill-Button	`.glass-pill`	–
Theme-Toggle	`.glass-theme-toggle`	–
Title	`.glass-title`	–
Card	`.glass-card`	`--glow`
Button	`.glass-btn`	`--primary`, `--secondary`, `--tertiary`, `--sm`, `--lg`, `--auto`
Badge	`.glass-badge`	`--primary`, `--success`, `--error`
Avatar	`.glass-avatar`	`--sm`, `--lg`
Divider	`.glass-divider`	–
Status	`.glass-status`	–
List	`.glass-list`	`--flush`, `--bare`, `__item--interactive`, `__item--center`, `__item--danger`, `__item--accent`, `__leading--lg`, `__subtitle--wrap`, `__value`, `__section-header`
Popover	`.glass-popover`	`--top`, `--start`, `--end`, `.is-open`
Input	`.glass-input`	`--error`, `:disabled`
Textarea	`.glass-textarea`	–
Select	`.glass-select`	–
Search	`.glass-search`	–
Toggle	`.glass-toggle`	`:checked`
Checkbox	`.glass-checkbox`	`:checked`
Radio	`.glass-radio`	`:checked`
Range	`.glass-range`	–
Progress	`.glass-progress`	`--sm`, `--lg`, `--success`, `--error`
Modal	`.glass-modal-overlay`	`.is-active`
Toast	`.glass-toast`	`--success`, `--error`, `--warning`, `.is-visible`
Tab-Bar	`.glass-tab-bar`	`.is-active` auf Items
Tab-Bar Floating	`.glass-tab-bar-dock` + `.glass-tab-bar--floating`	`__accessory`, `__accessory--accent`/`--success`/`--error`, `--accessory-left`
Accordion	`.glass-accordion`	`.is-open` auf Items

🤖 AI / LLM Reference

GlassKit ships with SKILL.md – a structured, machine-readable component reference designed for AI assistants, LLMs, and code-generation tools.

Feature	Description
Copy-paste HTML	All 24 components with exact nesting and BEM hierarchy
Design token tables	Colors, surfaces, blur, radii, spacing, shadows, typography
State class mapping	`is-active`, `is-open`, `is-visible`, `:checked` – where each belongs
Composition patterns	6 full page layouts: Login, Dashboard, Form, Modal, Settings, Progress
Common mistakes	Frequent errors and their corrections

Attach or reference SKILL.md when asking an AI to generate GlassKit HTML for production-ready output.

# File location glasskit/SKILL.md # Also included in the npm package npm install @jungherz-de/glasskit node_modules/@jungherz-de/glasskit/SKILL.md

Installation

Design Tokens

Color Palette

Glass Surfaces

Spacing & Radii

Theming (Light / Dark)

Background

Navigation Bar

Pill-Buttons

Tab-Bar

Tab-Bar – Floating

Accessory accent variants

Title

Capture Contracts& Upload

Card

Buttons

Badge

Avatar

Divider

Status Notice

List

Settings style (icon + title + subtitle + trailing)

Compact menu (centered text, no icons)

Grouped sections with large icons

Class reference

Modal

Delete document?

Class reference

Toast

Popover

Class reference

Input

Textarea

Select

Search

Toggle Switch

Checkbox

Radio Button

Range Slider

Progress Bar

Accordion

Utilities

Stack (vertikal)

Row (horizontal)

Margin Top

Margin Bottom

Text

Layout

📋 All Classes at a Glance

🤖 AI / LLM Reference

Capture Contracts
& Upload