Source: https://learn.nodegx.io/build/describing-a-look
Summary: How to tell Claude the look you want in plain words, and how NodeGX's style names let you change a colour once and have it change everywhere.

# Describing how it should look

You don't need design words to get the look you want. Describe the feeling, point at examples, and say what to change. NodeGX keeps your app's look in a set of named styles, so a change in one place changes it everywhere.

## Start with the feeling

Tell Claude four things:

- **The mood.** Calm, friendly, serious, playful, professional.
- **The colours.** "Dark green and cream" is enough. If you have exact colours, give their colour codes (a `#` followed by six letters and numbers, like `#2E5E4E`). Brand guidelines usually list them.
- **Examples you like.** A website or app, and what you like about it: "lots of white space", "big photos".
- **Who it's for.** A look for children is different from one for accountants.

```text
I want this app to feel [calm and friendly].
Colours: [dark green and cream].
I like the look of [website], especially [what you like about it].
The people using it are [who].
```

NodeGX has five ready-made starting looks: **Modern** (the default), **Minimal**, **Playful**, **Enterprise** and **Soft**. If you're not sure where to start, ask Claude: "Which of the NodeGX starting looks fits this app best?"

## Say what to change

Once you can see the app, say what to change in plain words. The more exact you are, the fewer rounds it takes.

| Instead of | Try |
|---|---|
| "The spacing is weird" | "More space between the cards" |
| "Make it stand out more" | "Bigger headings on every page" |
| "It looks harsh" | "Rounder corners on the buttons, and a soft shadow under the cards" |
| "Change the colours" | "Make the main colour dark green, and the background cream" |

A screenshot with an arrow on it works very well. Paste or drag it into the message box.

## Style names: change it once, it changes everywhere

NodeGX keeps your app's look in a set of **style names** (designers call them **design tokens**). A style name is a name for one choice, like the app's main colour, which NodeGX calls **primary**.

Claude uses the style names rather than the actual colours and sizes. Every button says "use primary" instead of "use this exact green". So when you change primary, every button, link and heading that uses it changes with it. The look stays consistent, and a change is one edit instead of fifty.

The style names cover:

- **Colours:** the main colour, the background, the text, an accent colour, a colour for warnings and deleting, and lighter and darker shades.
- **Space:** the gaps between things and the room around them.
- **Text:** sizes, boldness, the space between lines and between letters, and the fonts.
- **Corners and borders:** how round the corners are and how thick the borders are.
- **Shadows and gradients:** soft shadows under things, and backgrounds that fade from one colour to another.
- **Movement:** how fast things move when they animate, and how they speed up and slow down.

NodeGX also comes with ready-made styles for common parts, like buttons, headings and cards, plus sets of icons and stock photos Claude can use.

To change something everywhere, ask for the style, not the one thing you're looking at:

```text
Change the main colour to dark green everywhere. Use the style names,
so I can change it again later in one place.
```

If you only want one thing to be different, say so: "Just this button, not the others."

::: everything How style names are stored
Style names are CSS custom properties, like `--primary` or `--space-4`. A part of the page that uses one stores the value `var(--primary)`, not a colour code. Only the values you change from the defaults are saved, in the project's `nodegx.project.json` file under `metadata.designTokens`. The starting looks are sets of those changes.
:::

## Quick reference

- Describe the mood, the colours, examples you like, and who it's for.
- Not sure? Ask which NodeGX starting look fits: Modern, Minimal, Playful, Enterprise or Soft.
- Be exact: "more space between the cards", "bigger headings".
- Send a screenshot with an arrow.
- Change a style name once and it changes everywhere. For a one-off, say "just this one".