# LO-TEK in plain HTML
The rulebook for LO-TEK in a project without a build step: hand-written HTML,
where the browser loads the files directly. If you use a bundler, React, Astro
or Datastar, or the server produces the markup, another file in this folder
applies.
This is @lo-tek/interfaces 0.36.0. The file is generated by the package and
follows its version, so it can never say anything other than the code next to
it.
## Short version
1. **One `` to `lotek.css`, before everything else.** Without it, the
components look unstyled. The answer is then to add the link, never to
write your own CSS to make them look right.
2. **Use only the classes and elements in the tables below.** `lt-modal`,
`lt-datepicker` and `data-variant="outlined"` exist in other design
systems, not in LO-TEK. If you are unsure whether something exists, it is
listed here or it does not exist.
3. **No hard-coded colours or pixels.** `var(--lt-color-…)` and
`var(--lt-spacing-…)`.
4. **Web components are registered once with `defineLt*()`** in a
`
```
The field becomes invalid when the error text shows, not by switching a class:
```js
const name = document.getElementById("name")
const error = name.closest("lt-field").querySelector(".lt-error-text")
error.hidden = name.value.trim() !== ""
```
TypeScript does not belong in a `