---
title: Quick start
description: Bind an environment, author a module, and emit CSS.
url: https://docs-v3-preview.elastic.dev/distillate/getting-started/quick-start
---

# Quick start
Three calls cover the happy path: bind, author, emit.

## Bind

```ts
import { createDistillery, cq, lightDark } from '@elastic/distillate';

const distillery = createDistillery({
  prefix: 'eui',
  themeScope: '.eui-view',
  theme: {
    colors: {
      ink: lightDark('#111', '#eee'),
      accent: lightDark('#06c', '#8cf'),
      surface: lightDark('#fff', '#000'),
    },
    gap: cq('8px', '2cqi'),
  },
});
```

`prefix` must be a CSS identifier segment. `themeScope` is the selector that wraps emitted theme-variable declarations. Theme-tree keys match `/^[A-Za-z_][A-Za-z0-9_]*$/`. Strings and `lightDark` leaves become theme vars named `cssVarName(prefix, path)`; `cq` / `scaleToken` leaves inline. Differing `lightDark` values fold into `light-dark(...)`.

## Author

```ts
const demo = distillery.createStyleModule('demo', ({ css, tokens }) => ({
  root: css`
    color: ${tokens.colors.ink}; 
    padding: ${tokens.gap}; 
  `,
}));
```


## Emit

A full readable stylesheet:
```ts
distillery.renderStyles(distillery.stylesheetCollector());
```

A compact artifact that includes only `demo.handles.root`:
```ts
const collector = distillery.artifactCollector('compact');
collector.use(demo.handles.root);
distillery.renderStyles(collector);
```

Those outputs are asserted in [`docs/examples/`](https://github.com/elastic/distillate/tree/main/docs/examples). Next: [your first stylesheet](https://docs-v3-preview.elastic.dev/distillate/getting-started/your-first-stylesheet), [declare and select variations](https://docs-v3-preview.elastic.dev/distillate/guides/theming), or skip to [naming and output](https://docs-v3-preview.elastic.dev/distillate/concepts/naming-and-output).