Lorem Ipsum — Style Preview
A typography and component playground. Use the ⚙ Options panel (top-right) to switch themes, layouts, fonts, sizes, density, radius, and section styles live.
Typography Scale
Lorem ipsum dolor
Consectetur adipiscing
Sed do eiusmod tempor
Ut labore et dolore magna
The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow.
Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!
const hello = "world";
Body Copy
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Unordered List
- Adipiscing — sed do eiusmod tempor incididunt ut labore
- Ut enim ad minim veniam, quis nostrud exercitation
- Duis aute irure dolor in reprehenderit in voluptate
- Excepteur sint occaecat cupidatat non proident
Ordered List
- Install the stylesheet via CDN or self-host
- Link it inside your
<head>tag - Apply the appropriate semantic classes
- Customize the CSS variables as needed
Keyboard Shortcuts
Press Ctrl + K to open the search, or Escape to dismiss it. Use ↑ ↓ to navigate results.
Blockquote
"The art of writing is the art of discovering what you believe." — Gustave Flaubert
Code & Highlights
Inline Code
Use the renderAssets() function with a slug argument to populate the asset grid. Pass null to skip grouping.
Block Highlight
<link rel="stylesheet" href="https://assets.kelpw.ing/style/ammonite.css">
Preformatted
/* Apply a preset theme */
ADoc.init('css');
const themes = ['ammonite', 'ocean', 'twilight', 'forest'];
themes.forEach(t => console.log(`Theme: ${t}`));
function greet(name) {
return `Hello, ${name}!`;
}Callouts
Use the custom theme builder to generate a unique palette from any accent and background colour combination.
Stylesheets are served with Access-Control-Allow-Origin: * and can be fetched cross-origin from any domain.
Linking to the CDN directly means you'll receive updates automatically — pin to a versioned file if you need stability.
Do not use the !important override pattern inside shared component libraries — it breaks cascade inheritance.
Buttons
Badges & Tags
Badges
Tags
Form Elements
Stat Cards
Progress Bars
Typography coverage
Component coverage
Theme completeness
Accessibility (WCAG AA)
Avatars & Dividers
Content below a labelled divider. Use dividers to separate logically distinct groups of controls or sections within the same panel.
Colour Palette
All colours are driven by CSS custom properties on :root. Swapping a theme re-defines these variables and every component updates automatically.
Table
| Theme | Accent | Background | Mode |
|---|---|---|---|
| Ammonite | #76ff8d | #3d4c37 | Dark |
| Ocean | #7eb8ff | #1e2d3d | Dark |
| Twilight | #c084fc | #2d1f3d | Dark |
| Ember | #ff8c42 | #3d2a1e | Dark |
| Rose | #ff7eb3 | #3d1f2d | Dark |
| Slate | #94a3b8 | #1e2533 | Dark |
| Midnight | #60a5fa | #0a0e1a | Dark |
| Dawn | #2d6a4f | #f5f0e8 | Light |
| Paper | #7c3aed | #fafaf9 | Light |
| Forest | #34d399 | #0d1f15 | Dark |
| Arctic | #0ea5e9 | #f0f8ff | Light |
| Copper | #f59e0b | #1c1407 | Dark |
| Void | #e879f9 | #050507 | Dark |
| Sakura | #e11d7a | #fff5f9 | Light |