Style System

The django-logikal component system comes with a standard light and dark color theme, which is automatically included when using the component_head() function.

You may override the standard color theme or define your own custom color theme using the following CSS variables:

Colors
Surfaces

  • --color-white – Defaults to #ffffff.

  • --color-black – Defaults to #000000.

  • --color-surface-palegray – Defaults to #f9f9f9.

  • --color-surface-lightgray – Defaults to #f4f4f4.

  • --color-surface-gray – Defaults to #eeeeee.

  • --color-surface-deepgray – Defaults to #e2e2e2.

  • --color-surface-lightpurple – Defaults to #6642e7.

  • --color-surface-purple – Defaults to #5b33d6.

  • --color-surface-deeppurple – Defaults to #4f29bf.

  • --color-surface-lightred – Defaults to #c02046.

  • --color-surface-red – Defaults to #ab1a3d.

Shadows

  • --color-surface-white-shadow – Defaults to #a1a1a15c.

  • --color-surface-palegray-shadow – Defaults to #9999995c.

Text

  • --color-text-gray – Defaults to #ababab.

  • --color-text-deepgray – Defaults to #848484.

  • --color-text-lightpurple – Defaults to #7155f1.

  • --color-text-purple – Defaults to #5b33d6.

  • --color-text-deeppurple – Defaults to #38198e.

  • --color-text-red – Defaults to #aa144e.

Theme
Areas

  • --theme-color-body – Defaults to var(--color-white).

  • --theme-color-body-content – Defaults to var(--color-black).

  • --theme-color-group – Defaults to var(--color-surface-palegray).

  • --theme-color-group-content – Defaults to var(--color-black).

  • --theme-color-group-outline – Defaults to var(--color-surface-lightgray).

  • --theme-color-group-shadow – Defaults to var(--color-surface-white-shadow).

  • --theme-color-subgroup – Defaults to var(--color-surface-lightgray).

  • --theme-color-subgroup-content – Defaults to var(--color-black).

  • --theme-color-subgroup-outline – Defaults to var(--color-surface-gray).

  • --theme-color-subgroup-shadow – Defaults to var(--color-surface-palegray-shadow).

Elements
Active

  • --theme-color-active – Defaults to var(--color-surface-purple).

  • --theme-color-active-content – Defaults to var(--color-white).

  • --theme-color-active-outline – Defaults to var(--color-surface-purple).

  • --theme-color-active-highlight – Defaults to var(--color-surface-lightpurple).

  • --theme-color-active-highlight-content – Defaults to var(--color-white).

  • --theme-color-active-highlight-outline – Defaults to var(--color-surface-lightpurple).

  • --theme-color-active-hit – Defaults to var(--color-surface-deeppurple).

  • --theme-color-active-hit-content – Defaults to var(--color-white).

  • --theme-color-active-hit-outline – Defaults to var(--color-surface-deeppurple).

Neutral

  • --theme-color-neutral – Defaults to transparent.

  • --theme-color-neutral-content – Defaults to var(--color-black).

  • --theme-color-neutral-content-hint – Defaults to var(--color-text-gray).

  • --theme-color-neutral-outline – Defaults to var(--color-black).

  • --theme-color-neutral-highlight – Defaults to transparent.

  • --theme-color-neutral-highlight-content – Defaults to var(--color-black).

  • --theme-color-neutral-highlight-outline – Defaults to var(--color-surface-lightpurple).

  • --theme-color-neutral-hit – Defaults to transparent.

  • --theme-color-neutral-hit-content – Defaults to var(--color-black).

  • --theme-color-neutral-hit-outline – Defaults to var(--color-surface-deeppurple).

  • --theme-color-neutral-disabled – Defaults to transparent.

  • --theme-color-neutral-disabled-content – Defaults to var(--color-text-deepgray).

  • --theme-color-neutral-disabled-outline – Defaults to var(--color-surface-deepgray).

  • --theme-color-neutral-error – Defaults to transparent.

  • --theme-color-neutral-error-content – Defaults to var(--color-black).

  • --theme-color-neutral-error-outline – Defaults to var(--color-surface-red).

  • --theme-color-neutral-error-highlight – Defaults to transparent.

  • --theme-color-neutral-error-highlight-content – Defaults to var(--color-black).

  • --theme-color-neutral-error-highlight-outline – Defaults to var(--color-surface-lightred).

Text

  • --theme-color-text-active – Defaults to var(--color-text-purple).

  • --theme-color-text-highlight – Defaults to var(--color-text-lightpurple).

  • --theme-color-text-hit – Defaults to var(--color-text-deeppurple).

  • --theme-color-text-error – Defaults to var(--color-text-red).

In addition to the theme colors, you may also override the style system’s other design characteristics via the following CSS variables:

Units
Typography
Font families

  • --font-family-body – Defaults to "lato", sans-serif.

  • --font-family-display – Defaults to "lato", sans-serif.

  • --font-family-monospace – Defaults to "roboto-mono", monospace.

Font sizing

  • --font-size-body-normal – Defaults to 1rem/1.5rem.

  • --font-size-display-small – Defaults to 1rem/1.5rem.

  • --font-size-display-normal – Defaults to 1.5rem/1.5rem.

  • --font-size-display-large – Defaults to 2.25rem/2.25rem.

  • --font-size-monospace-normal – Defaults to 0.875rem/1.5rem.

Lengths
Gaps

  • --length-gap-subelement – Defaults to 0.25rem.

  • --length-gap-element – Defaults to 0.5rem.

  • --length-gap-group – Defaults to 1rem.

  • --length-gap-group-large – Defaults to 3rem.

Radii

  • --length-radius-element – Defaults to 0.375rem.

  • --length-radius-group – Defaults to 0.75rem.

Edges

  • --length-edge – Defaults to 0.0625rem.

Shadows

  • --length-shadow-element-small – Defaults to 0.025rem 0.0375rem 0.05rem.

  • --length-shadow-element-normal – Defaults to 0.025rem 0.05rem 0.0625rem -0.075rem.

  • --length-shadow-element-large – Defaults to 0.0625rem 0.125rem 0.15rem -0.15rem.

  • --length-shadow-group-small – Defaults to 0.025rem 0.0375rem 0.05rem.

  • --length-shadow-group-normal – Defaults to 0.05rem 0.1rem 0.125rem -0.05rem.

  • --length-shadow-group-large – Defaults to 0.125rem 0.25rem 0.325rem -0.1rem.

  • --length-shadow-group-xlarge – Defaults to 0.25rem 0.625rem 0.75rem -0.15rem.

Text

  • --length-text-indent – Defaults to 2em.

  • --length-margin-header – Defaults to calc(4.172rem - var(--length-gap-group-large)/2.618) 0 calc(var(--length-gap-group-large)/2.618 + 2.578rem).

  • --length-margin-header-tagline – Defaults to 1.5rem 0 0.

  • --length-margin-subheader – Defaults to 2.75rem 0 1.75rem.

  • --length-margin-paragraph – Defaults to 1.5rem 0.

  • --length-margin-paragraph-small – Defaults to 0.5rem 0 1rem.

Elements

  • --length-logo-height – Defaults to 1em.

  • --length-button-icon – Defaults to 1.25em.

  • --length-element – Defaults to 15rem.

  • --length-form – Defaults to 18.75rem.

  • --length-card-normal – Defaults to 22rem.

  • --length-text – Defaults to 40em.

Splits

  • --split-equal – Defaults to 1fr 1fr.

  • --split-golden-ratio – Defaults to 1.618fr 1fr.

  • --split-golden-ratio-reverse – Defaults to 1fr 1.618fr.

Theme
Typography

  • --theme-font-display-small – Defaults to bold var(--font-size-display-small) var(--font-family-display).

  • --theme-font-display-normal – Defaults to bold var(--font-size-display-normal) var(--font-family-display).

  • --theme-font-display-normal-subtitle – Defaults to italic var(--font-size-display-normal) var(--font-family-display).

  • --theme-font-display-large – Defaults to bold var(--font-size-display-large) var(--font-family-display).

  • --theme-font-body-normal – Defaults to var(--font-size-body-normal) var(--font-family-body).

  • --theme-font-body-normal-emphasis – Defaults to bold var(--font-size-body-normal) var(--font-family-body).

  • --theme-font-monospace-normal – Defaults to var(--font-size-monospace-normal) var(--font-family-monospace).

Outlines

  • --theme-outline-group – Defaults to var(--length-edge) solid var(--theme-color-group-outline).

  • --theme-outline-subgroup – Defaults to var(--length-edge) solid var(--theme-color-subgroup-outline).

  • --theme-outline-active – Defaults to var(--length-edge) solid var(--theme-color-active-outline).

  • --theme-outline-active-highlight – Defaults to var(--length-edge) solid var(--theme-color-active-highlight-outline).

  • --theme-outline-active-hit – Defaults to var(--length-edge) solid var(--theme-color-active-hit-outline).

  • --theme-outline-neutral – Defaults to var(--length-edge) solid var(--theme-color-neutral-outline).

  • --theme-outline-neutral-highlight – Defaults to var(--length-edge) solid var(--theme-color-neutral-highlight-outline).

  • --theme-outline-neutral-hit – Defaults to var(--length-edge) solid var(--theme-color-neutral-hit-outline).

  • --theme-outline-neutral-disabled – Defaults to var(--length-edge) solid var(--theme-color-neutral-disabled-outline).

  • --theme-outline-neutral-error – Defaults to var(--length-edge) solid var(--theme-color-neutral-error-outline).

  • --theme-outline-neutral-error-highlight – Defaults to var(--length-edge) solid var(--theme-color-neutral-error-highlight-outline).

Shadows

  • --theme-shadow-element – Defaults to var(--length-shadow-element-small) var(--theme-color-subgroup-shadow), var(--length-shadow-element-normal) var(--theme-color-subgroup-shadow), var(--length-shadow-element-large) var(--theme-color-subgroup-shadow).

  • --theme-shadow-group – Defaults to var(--length-shadow-group-small) var(--theme-color-group-shadow), var(--length-shadow-group-normal) var(--theme-color-group-shadow), var(--length-shadow-group-large) var(--theme-color-group-shadow), var(--length-shadow-group-xlarge) var(--theme-color-group-shadow).

  • --theme-shadow-subgroup – Defaults to var(--length-shadow-group-small) var(--theme-color-subgroup-shadow), var(--length-shadow-group-normal) var(--theme-color-subgroup-shadow), var(--length-shadow-group-large) var(--theme-color-subgroup-shadow), var(--length-shadow-group-xlarge) var(--theme-color-subgroup-shadow).

Tip

Remember that you can always override any style in your own stylesheets. However, the standard values are a result of a meticulous design process, so make sure to do any adjustments with great care for usability and a relentless focus on good design principles.