Skip to main content

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.

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

  --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: 
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;
}