# LO-TEK in Astro
The rulebook for LO-TEK in an Astro project.
An `.astro` file is HTML with frontmatter above it. The stylesheets are
imported there, and the builder functions are used directly in the template,
since Astro supports spreading like JSX. What is particular is that all of
this runs at build time: out comes plain HTML, and `lt` is gone once the page
is built. Zero JavaScript sent to the browser.
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. **Import the stylesheets in the frontmatter**, `tokens.css` first. Without
them, the components look unstyled. The answer is then to add the import,
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. **`defineLt*()` belongs in a `
```
`customElements` exists only in the browser, so the registration cannot be in
the frontmatter. A `