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

# UI Customizations

> Customize the appearance of the authentication screens to match your design

OwnID provides a set of CSS custom properties (variables) that allow you to customize the appearance of the authentication screens to match your application's design. These variables control various aspects of the drawer's style, including colors, text, and input fields.

### Available CSS Custom Properties

```css theme={null}
  --ownid-flow-color-primary: #0072EF;
  --ownid-flow-color-primary-hover: #0165FF;
  --ownid-flow-color-primary-disabled: #97C0FF;
  --ownid-flow-color-text-primary: #050102;
  --ownid-flow-color-secondary: #64748B;
  --ownid-flow-font-family: "Helvetica Neue", Helvetica,  sans-serif;
  --ownid-flow-letter-spacing: .5px;

  --ownid-flow-title-font-size: 22px;
  --ownid-flow-title-font-weight: 500;
  --ownid-flow-title-line-height: 44px;

  --ownid-flow-description-font-size: 16px;
  --ownid-flow-description-font-weight: 300;
  --ownid-flow-description-line-height: 23.2px;

  --ownid-flow-note-font-size: 14px;
  --ownid-flow-note-font-weight: 300;
  --ownid-flow-note-line-height: 20.3px;

  --ownid-flow-input-border-color: #E2E8F0;
  --ownid-flow-input-border-focus-color: var(--ownid-flow-color-secondary);
  --ownid-flow-input-border-radius: 10px;
  --ownid-flow-input-font-size: 16px;
  --ownid-flow-input-font-weight: 300;
  --ownid-flow-input-line-height: 24px;
  --ownid-flow-input-background-color: #FFF;
  --ownid-flow-input-placeholder-color: #76767D;
  --ownid-flow-input-color: #000;
  --ownid-flow-input-disabled-color: #737373;
  --ownid-flow-input-error-color: #ED0D00;

  --ownid-flow-btn-color: #FFF;
  --ownid-flow-btn-background-color: var(--ownid-flow-color-primary);
  --ownid-flow-btn-hover-background-color: var(--ownid-flow-color-primary-hover);
  --ownid-flow-btn-disabled-background-color: var(--ownid-flow-color-primary-disabled);
  --ownid-flow-btn-border-radius: 10px;
  --ownid-flow-btn-border: 1px solid var(--ownid-flow-btn-background-color);
  --ownid-flow-btn-font-size: 18px;
  --ownid-flow-btn-font-weight: 500;
  --ownid-flow-btn-line-height: 23px;
  --ownid-flow-btn-text-transform: none;

  --ownid-flow-btn-secondary-color: var(--ownid-flow-color-primary);
  --ownid-flow-btn-secondary-hover-color: var(--ownid-flow-color-primary-hover);
  --ownid-flow-btn-secondary-disabled-color: var(--ownid-flow-color-primary-disabled);
  --ownid-flow-btn-secondary-border-radius: 10px;
  --ownid-flow-btn-secondary-border: none;
  --ownid-flow-btn-secondary-background-color: none;
  --ownid-flow-btn-secondary-font-size: 14px;
  --ownid-flow-btn-secondary-font-weight: 300;
  --ownid-flow-btn-secondary-line-height: 20px;
  --ownid-flow-btn-secondary-text-transform: none;

  --ownid-flow-btn-tertiary-color: var(--ownid-flow-color-text-primary);
  --ownid-flow-btn-tertiary-hover-color: var(--ownid-flow-color-primary-hover);
  --ownid-flow-btn-tertiary-border: 1px solid var(--ownid-flow-color-text-primary);
  --ownid-flow-btn-tertiary-background-color: transparent;
  --ownid-flow-btn-tertiary-font-size: 18px;
  --ownid-flow-btn-tertiary-font-weight: 500;
  --ownid-flow-btn-tertiary-line-height: 20px;
```

### Customization Example

To customize the OwnID drawer, you can override these CSS custom properties in your stylesheet. Here's an example of how to change the primary color, hover color, and disabled color of the drawer:

```css theme={null}
ownid-flow {
  --ownid-drawer-font-family: "Comic Sans MS", Arial, serif;
  --ownid-flow-color-primary: #0072EF;
  --ownid-flow-color-primary-hover: #0165FF;
  --ownid-flow-color-primary-disabled: #97C0FF;
  --ownid-flow-color-text-primary: #050102;
  --ownid-flow-color-secondary: #64748B;
}
```