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

# Style Library

> Centralized design system for brand consistency

## Overview

The **Style Library** is the centralized system that stores all your **design tokens**. It ensures visual consistency and lets you update the design of all emails by changing tokens once. Think of it like a brand kit built specifically for email.

## Core Principle

<CardGroup cols={2}>
  <Card title="Centralization">
    All styles are defined **once** in the Style Library.
  </Card>

  <Card title="Reference, don't duplicate">
    Emails and components **reference** these tokens instead of using manual color codes.
  </Card>

  <Card title="Automatic propagation">
    Change a token, and all elements using it update **automatically**.
  </Card>

  <Card title="Enforced consistency">
    You can only use styles defined in the library → guarantees brand consistency.
  </Card>
</CardGroup>

## Token Types

### Colors

Colors are reusable tokens you define once (e.g., "Primary", "Background").

<CardGroup cols={2}>
  <Card title="Structure">
    * **Name**: Human-readable name (e.g., "Primary Orange")
    * **Value**: Color code (e.g., "#F97316")
    * **Usage**: Where it can be used (button, text, background)
  </Card>

  <Card title="Usage">
    Used in color pickers for elements.
  </Card>
</CardGroup>

### Text Styles

Text styles define your typography (size, weight, font family).

<CardGroup cols={2}>
  <Card title="Structure">
    * **Name**: e.g., "Heading 1", "Body Text"
    * **Font Size**: e.g., "32px"
    * **Font Weight**: Bold, normal, etc.
    * **Font Family**: Your chosen font
    * **Line Height**: Spacing between lines
  </Card>

  <Card title="Usage">
    Applied to Text and Button elements.
  </Card>
</CardGroup>

### Button Styles

Button styles define complete button appearance.

<CardGroup cols={2}>
  <Card title="Structure">
    * **Name**: e.g., "Primary CTA"
    * **Background Color**: Reference to a color token
    * **Text Style**: Reference to a text style
    * **Padding**: Inner spacing
    * **Border Radius**: Rounded corners
  </Card>

  <Card title="Usage">
    Applied to Button elements.
  </Card>
</CardGroup>

### Link Styles

Link styles define how links look within text.

<CardGroup cols={2}>
  <Card title="Structure">
    * **Name**: e.g., "Standard Link"
    * **Color**: Link color
    * **Decoration**: Underline or none
    * **Font Weight**: Bold or normal
  </Card>

  <Card title="Usage">
    Applied to links within Text elements.
  </Card>
</CardGroup>

## Managing the Style Library

### Adding Tokens

<Steps>
  <Step title="Access Style Library">
    Open "Style Library" from the main navigation menu.
  </Step>

  <Step title="Add a token">
    Click "Add" in the appropriate section (Color, Text Style, Button Style, Link Style).
  </Step>

  <Step title="Configure">
    Fill in the token properties (name, values, etc.).
  </Step>

  <Step title="Save">
    The token is immediately available in all editors.
  </Step>
</Steps>

### Modifying Tokens

When you modify an existing token:

<Warning>
  **All emails and components using that token automatically update** with the new value.
</Warning>

<Info>
  This is the main advantage of the Style Library: one central change propagates everywhere instantly.
</Info>

### Deleting Tokens

<Warning>
  Before deleting a token, check its usage to see which emails/components use it.
</Warning>

If a token is in use, you'll need to replace it in elements that use it before deleting.

## Importing Styles

You can import styles from an existing email:

<Steps>
  <Step title="In email editor">
    Select "Import styles" option from an existing email.
  </Step>

  <Step title="Automatic extraction">
    Mailkick automatically identifies colors and styles used in the email.
  </Step>

  <Step title="Add to library">
    Save the extracted styles to your Style Library for reuse.
  </Step>
</Steps>

## Best Practices

<AccordionGroup>
  <Accordion title="Consistent naming">
    Use clear names (e.g., "Primary", "Secondary", "Heading 1", "Body").
  </Accordion>

  <Accordion title="Reuse existing tokens">
    Reuse tokens rather than creating duplicates.
  </Accordion>

  <Accordion title="Test after changes">
    After modifying a token, check a few emails using that token to ensure the result looks correct.
  </Accordion>
</AccordionGroup>

## Benefits

<CardGroup cols={2}>
  <Card title="🎨 Consistency">
    No off-brand colors or fonts.
  </Card>

  <Card title="⚡ Maintenance">
    One central change updates all emails.
  </Card>

  <Card title="🚀 Productivity">
    Select pre-defined styles instead of manually entering values.
  </Card>

  <Card title="🔄 Rebranding">
    Change your entire brand look by modifying a few tokens.
  </Card>
</CardGroup>