Article as a card
An <article> is a self-contained surface: white ground,
black outline, offset shadow. No wrapper class needed.
A visual default layer
Semantic HTML in, designed UI out.
Every element on this page is plain, class-free HTML. Nothing here uses
class, style, or JavaScript. Delete the
<link> in the head and reload to see the same markup
rendered with browser defaults — see plain.html
for that comparison.
Typography
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
A normal paragraph sets the reading rhythm: strong text
carries weight, emphasis leans, a mark is highlighted,
deleted text and inserted text record edits,
CSS gets a hint on hover, and
a link is unmistakably a link. Press
Ctrl + K to search. Inline const x = 1
keeps its own face. Water is H2O, and the area is 12m2.
Small text is for captions, footnotes, and metadata.
HTML stays simple. CSS does the hard work.
— the whole idea
Lists
- Unordered item
-
Nested list
- Second level
- Second level
- Unordered item
- Analyse the visual reference
- Extract the design tokens
- Map tokens onto native selectors
- Token
- A named design value stored as a CSS custom property.
- Layer
- A cascade bucket that keeps author CSS above library CSS.
Preformatted
<link rel="stylesheet" href="default-ui.css">
<h1>Tambah Buku</h1>
<button type="submit">Simpan</button>
Forms
Actions
Data
| Judul | Penulis | Tahun | Stok |
|---|---|---|---|
| Laskar Pelangi | Andrea Hirata | 2005 | 12 |
| Bumi Manusia | Pramoedya Ananta Toer | 1980 | 7 |
| Cantik Itu Luka | Eka Kurniawan | 2002 | 4 |
| Total stok | 23 | ||
Semantic elements
Article with its own header and footer
Landmarks nest without extra markup.
Interactive elements
What is a design token?
A named value — colour, size, radius, shadow — stored once as a CSS custom property and reused everywhere.
Why no classes?
Because semantic HTML already describes intent. The stylesheet reads that intent through element, attribute, and state selectors.