# Custom color, fonts

### 1- Custom colors

We use CSS variables for 3 main theme colors: **Primary color**, **Secondary color,** and **Neutrals color,** following the [Tailwindcss style](https://tailwindcss.com/docs/customizing-colors).

You can find them in the **app/styles/app.css** file

```css
:root {

  /* For rgb(240 249 255) */
  --c-primary-50: 240, 249, 255;
  --c-primary-100: 224, 242, 254;
  ...
  --c-primary-900: 12, 74, 110;

  --c-secondary-50: 240, 253, 244;
  ...
  --c-secondary-900: 20, 83, 45;

  --c-neutral-50: 249, 250, 251;
  ...
  --c-neutral-900: 17, 24, 39;
}
```

**Primary, Secondary color:**

These are the splashes of color that should appear the most in your UI, and are the ones that determine the overall "look" of the site. Use these for things like primary actions, links, navigation items, icons, accent borders, or text you want to emphasize.

**Neutrals color:**

These are the colors you will use the most and will make up the majority of your UI. Use them for most of your text, backgrounds, and borders, as well as for things like secondary buttons and links.

**How to custom color?**

You just need to change the color values in those CSS variables.

When defining your colors this way, make sure that the format of your CSS variables is correct for the color function you are using. You’ll want to use spaces if using the modern [space-separated syntax](https://css-tricks.com/the-expanding-gamut-of-color-on-the-web/#aa-a-tale-of-new-syntaxes), and commas if using legacy functions like `rgba` or `hsla`:

```scss
  :root {
    /* For rgb(255 115 179 / <alpha-value>) */
    --color-primary-50: 255 115 179;

    /* For hsl(198deg 93% 60% / <alpha-value>) */
    --color-primary-50: 198deg 93% 60%;

    /* For rgba(255, 115, 179, <alpha-value>) */
    --color-primary-50: 255, 115, 179;
  }
```

### 2- Custom fonts

We use css variables for 2 main theme fonts: **Display fonts** and **Body font**

```css
:root {
  --font-display: Poppins;
  --font-body: Poppins;
}
```

**Display font:**

User for heading tag: H1 to H5 and other title tags, font size bigger than 16px

**Body font:**

User for main font smaller than 14px

**How to custom fonts?**

1. Add your new font folder to the **app/styles/fonts/** folder.
2. Go to the **app/styles/custom\_font.css** file
3. Customize `@font-face` with your font<br>

   ```css
   @font-face {
     font-family: Your_Font;
     font-weight: 600;
     src: url('./fonts/Your_Font/Your_xxxx-SemiBold.ttf');
   }

   :root {
     --font-display: Your_Font;
     --font-body: Your_Font;
   }
   ```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nghiaxchis.gitbook.io/ciseco-hydrogen-shopifys-headless-theme/cisecos-features/custom-color-fonts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.