Design system gianlucacaico.com →

Use it · One line

Use it anywhere

The kit is one stylesheet hosted here. Paste it into any page or prototype that takes HTML and it picks up this look.

1
Add the look

Paste this line inside the page's head. Colours, type, buttons, glass and cards come with it. Version 1 only ever gets changes that won't break your page; anything bigger would arrive as version 2 at its own address.
```
<link rel="stylesheet" href="https://gianlucacaico.com/design-system/v1/gc.css">
```
2
Add the interactions

Only needed for segmented controls. Everything else works without it.
```
<script src="https://gianlucacaico.com/design-system/v1/gc.js" defer></script>
```

3

Make it yours

Your playground settings, ready to paste after the first line.

<style>
  :root{
    --accent:#635BFF;
    --accent-deep:#4B44D6;
    --accent-2:#EB5D76;
    --round:1;
    --glass-blur:20px;
  }
</style>

4

Copy the components you need

Every component in the demo has its code underneath, ready to paste.

Open the demo
5
Use the tokens in other tools

The kit's colours, card art and layout as a JSON file, laid out like the W3C design tokens format, for design tools, build tools or agents.
```
https://gianlucacaico.com/design-system/tokens.json
```

A proof of concept. Class names match gianlucacaico.com, and the kit is served from here, so any change to it reaches every page that uses it.