CDN
Background patterns are included in the main framework bundle.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ak-hosting/ak-systems-css@v2.0.2/dist/ak-design-system.min.css">
Pattern Types
Dots
ak-bg-pattern-dots
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-dots ak-bg-pattern-subtle">...</div>
Grid
ak-bg-pattern-grid
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-grid ak-bg-pattern-subtle">...</div>
Stripes
ak-bg-pattern-stripes
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-stripes ak-bg-pattern-subtle">...</div>
Checker
ak-bg-pattern-checker
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-checker ak-bg-pattern-subtle">...</div>
Waves
ak-bg-pattern-waves
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-waves ak-bg-pattern-primary">...</div>
Pattern Colors & Sizes
Accent + Large
ak-bg-pattern-accent ak-bg-pattern-lg
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-grid ak-bg-pattern-accent ak-bg-pattern-lg">...</div>
Muted + Small
ak-bg-pattern-muted ak-bg-pattern-sm
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-dots ak-bg-pattern-muted ak-bg-pattern-sm">...</div>
Art Backgrounds
Hero
ak-bg-art-hero
<div class="ak-bg-background ak-bg-art ak-bg-art-hero">...</div>
Mesh
ak-bg-art-mesh
<div class="ak-bg-background ak-bg-art ak-bg-art-mesh">...</div>
Custom Variables
You can tune patterns with CSS variables.
--ak-bg-pattern-size / --ak-bg-pattern-thickness / --ak-bg-pattern-ink
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-stripes" style="--ak-bg-pattern-size:32px;--ak-bg-pattern-thickness:2px;--ak-bg-pattern-ink:var(--ak-color-primary);">...</div>