> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nettify.no/llms.txt
> Use this file to discover all available pages before exploring further.

# Change colors and design

> Adjust colors, backgrounds, shadows and other visual details in the editor

## How to change colors and design

The manual editor gives you full control over the visual appearance of every element. You can adjust colors, backgrounds, borders, shadows and more.

***

## Available design tools

<Steps>
  <Step title="Select the element you want to style">
    Click **"Select element"** and click on the element you want to change the appearance of.
  </Step>

  <Step title="Use the tools in the panel">
    Depending on the element type, you get access to different design tools:
  </Step>
</Steps>

### Text color

Change the color of text in headings, paragraphs and buttons. Use the color picker or enter a color code (e.g. `#333333`).

### Background color

Change the background color of sections, boxes and other elements. Perfect for creating contrast or highlighting important content.

### Gradient

Create a gradual color transition (gradient) as a background. Enter a CSS gradient or use the color pickers.

### Border

Add or change borders around elements. You can adjust thickness, style and color. For example: `1px solid #E5E7EB` gives a thin, light gray border.

### Rounded corners

Make the corners of elements round. The value is set in pixels (0-50px). Higher value = rounder corners.

### Shadow

Add a shadow effect for depth. Choose between predefined styles or create your own.

### Opacity

Adjust the opacity of an element from fully visible (1) to invisible (0).

***

## Typography

You can also adjust font settings for text elements:

<CardGroup cols={2}>
  <Card title="Font size" icon="text-height">
    Change the size of the text (8-100px).
  </Card>

  <Card title="Font weight" icon="bold">
    Make the text thinner or thicker (light, normal, semi-bold, bold, etc.).
  </Card>

  <Card title="Text color" icon="droplet">
    Choose a color from the color picker or enter a hex value.
  </Card>
</CardGroup>

***

## Tips for good design

<AccordionGroup>
  <Accordion title="Keep it consistent">
    Use the same colors throughout the entire website. Choose 2-3 main colors and stick to them.
  </Accordion>

  <Accordion title="Watch the contrast">
    Text should have good contrast against the background. Dark text on a light background (or vice versa) is always safe.
  </Accordion>

  <Accordion title="Less is more">
    Don't use too many different colors, shadows or effects. A clean and simple design looks more professional.
  </Accordion>
</AccordionGroup>