Style System

The django-logikal components are based on a flexible style system, which can be modified to the needs of any project. Development will typically start with adjusting the typography and colors to follow the appropriate brand guidelines. The default values for the layout variables should already be sufficient for most projects, however, adjustments can be made when necessary.

Tip

Remember that you can always override any style in your own style sheets. 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.

Typography

Font Families

A font family is typically a collection of fonts, often organized by weight (e.g. light, regular, bold, heavy) and style (e.g. italic, regular). The style system ships with the following default font families:

Font Theme

The font theme defines the individual semantic font roles that can be used during development, including the size, leading, weight and style of a font in a given role.

Important

Font sizing and leading variables should only be used in the definition of the semantic font roles – they should never be used directly in CSS declarations.

For reference, the style system’s default font sizing and leading definitions and semantic font roles are as follows:

Color

Color Palette

The color palette is the set of colors available in a given project.

The django-logikal component system comes with a standard light and dark color palette based on our company design system, however, projects will typically want to use their own color palette, and overwrite the color theme declarations as necessary.

Important

The individual colors should never be used directly in a design – instead, they should be assigned to a semantic role (via the color theme), and the semantic role should be used in the actual CSS declarations.

For reference, the color palette shipping with the component system is as follows:

Color Theme

A color theme assigns the color palette colors to semantic roles. The standard roles of the component system are as follows:

Color theme (light mode)

Areas

--theme-color-body: var(--color-white);

--theme-color-body-content: var(--color-black);

--theme-color-body-content-active: var(--color-magic-purple);

--theme-color-body-content-active-highlight: var(--color-magic-purple-content-highlight);

--theme-color-body-content-active-hit: var(--color-magic-purple-content-hit);

--theme-color-body-content-disabled: var(--color-solid-gray);

--theme-color-body-outline: transparent;

--theme-color-section: var(--color-deep-blue);

--theme-color-section-content: var(--color-white);

--theme-color-section-outline: transparent;

--theme-color-popover: var(--color-light-gray);

--theme-color-popover-content: var(--color-black);

--theme-color-popover-outline: var(--color-light-gray);

Elements

Active

--theme-color-active: var(--color-magic-purple);

--theme-color-active-content: var(--color-white);

--theme-color-active-outline: var(--color-magic-purple);

--theme-color-active-highlight: var(--color-magic-purple-surface-highlight);

--theme-color-active-highlight-content: var(--color-white);

--theme-color-active-highlight-outline: var(--color-magic-purple-surface-highlight);

--theme-color-active-hit: var(--color-magic-purple-surface-hit);

--theme-color-active-hit-content: var(--color-white);

--theme-color-active-hit-outline: var(--color-magic-purple-surface-hit);

Danger

--theme-color-danger: var(--color-bright-pink);

--theme-color-danger-content: var(--color-white);

--theme-color-danger-outline: var(--color-bright-pink);

--theme-color-danger-highlight: var(--color-bright-pink-surface-highlight);

--theme-color-danger-highlight-content: var(--color-white);

--theme-color-danger-highlight-outline: var(--color-bright-pink-surface-highlight);

--theme-color-danger-hit: var(--color-bright-pink-surface-hit);

--theme-color-danger-hit-content: var(--color-white);

--theme-color-danger-hit-outline: var(--color-bright-pink-surface-hit);

Neutral

--theme-color-neutral: transparent;

--theme-color-neutral-content: var(--color-black);

--theme-color-neutral-content-hint: var(--color-solid-gray);

--theme-color-neutral-outline: var(--color-black);

--theme-color-neutral-highlight: transparent;

--theme-color-neutral-highlight-content: var(--color-black);

--theme-color-neutral-highlight-outline: var(--color-magic-purple-surface-highlight);

--theme-color-neutral-hit: transparent;

--theme-color-neutral-hit-content: var(--color-black);

--theme-color-neutral-hit-outline: var(--color-magic-purple-surface-hit);

--theme-color-neutral-disabled: var(--color-light-gray);

--theme-color-neutral-disabled-content: var(--color-solid-gray);

--theme-color-neutral-disabled-outline: var(--color-solid-gray);

--theme-color-neutral-error: transparent;

--theme-color-neutral-error-content: var(--color-black);

--theme-color-neutral-error-outline: var(--color-bright-pink);

--theme-color-neutral-error-highlight: transparent;

--theme-color-neutral-error-highlight-content: var(--color-black);

--theme-color-neutral-error-highlight-outline: var(--color-bright-pink-surface-highlight);

Color theme (dark mode)

Layout

Consistency in padding and margin values is paramount in good web application design. Appropriate spacing helps the user conceptually separate different areas in a user interface, which in turn makes the user interface easier to use.

Spacing & Splits

The style system comes with the following semantic spacing and splitting elements:

Text Margins

The style system generally aligns the space before and after headings according to the golden ratio, and uses multiples of body leading as the total height to achieve baseline consistency in multi-column text arrangements. For subheadings we switch to using an equal spacing, as the difference between the golden ratio major and minor segments at that scale is too subtle to be interpreted as an intentional design choice.

Elements

The element sizes defined by the style system are as follows: