Sign in

A3 design system

The visual language of A3 product websites. This page is built on the same tokens as the rest of the site: the samples below show real values, not a picture of them.

Five qualities of the visual language

Trust

A calm light presentation, high contrast and no decorative noise.

Concreteness

Every block explains a specific function, scenario or result rather than an abstract promise.

Editorial expression

Large typography, asymmetric grids and varying block scales create rhythm without heavy animation.

Materiality

Illustrations look like physical compositions of paper, ceramics and graphite instead of template 3D objects.

Family resemblance

Palette, typography, radii and responsive behaviour are the same across all A3 products. What changes is the subject and the composition.

Palette

Eight base colours. Every derived shade is computed from them, so changing a base value changes the whole site.

#F5F6FA--c-bgPage background and soft surfaces
#FFFFFF--c-surfaceCards, fields, text on dark
#212527--c-inkBody text, dark panels, buttons
#6B6B6B--c-mutedSecondary text and inactive states
#51C247--c-successSuccess and confirmation
#DF720C--c-warningWarning and manual review
#E83437--c-errorError and critical state
#6C5CE7--c-accentFocus, active link, single accent

Usage rules

  • The primary button is always dark, the white button lives only inside a dark panel.
  • Green, orange and red carry meaning. They are never used as decoration.
  • Purple appears sparingly: the underline of an active item, focus, a link.
  • A new colour never lands in a component directly: a semantic token comes first.
  • Pure black is not used: the dark tone is colder and sits better on the background.

Typography

Golos Text, self hosted. The typeface suits Cyrillic, extended Latin and a product tone of voice.

Text rules

  • The first screen heading takes no more than two lines on desktop.
  • Body text is limited to roughly 44 to 65 characters per line.
  • Uppercase is not used as a permanent decorative device.
  • Em and en dashes are not used: a full stop, colon or comma instead.
  • Copy stays concrete: function, condition, result, limitation.
Display headingThe platform brings document flow, finance and people into one perimeter
Section headingThe platform brings document flow, finance and people into one perimeter
Card headingThe platform brings document flow, finance and people into one perimeter
Body textThe platform brings document flow, finance and people into one perimeter
Secondary textThe platform brings document flow, finance and people into one perimeter
Caption and metadataThe platform brings document flow, finance and people into one perimeter

Shape and surfaces

Three radii cover the whole interface. Shadows are cold and very soft, and are not applied to every white surface by default.

Surface types

  • The page background with no container, when the grid already creates hierarchy.
  • A white card with a thin cold border.
  • A soft card without a coloured border on the background.
  • A dark panel for one important statement or a final call to action.
28pxCards, large images, dark panels
12pxFields, compact chips, inner surfaces
999pxButtons, switches, filters

Components

The base elements in their real implementation.

Buttons

Status badges

SuccessAttentionErrorInformation

Form field

The label always sits above the field, the placeholder never replaces it.

Motion

Motion supports hierarchy rather than demonstrating technology.

  • Section reveal: opacity and a 22 pixel shift over 0.65 seconds.
  • Page transition: opacity and a 10 pixel shift over about 0.28 seconds.
  • A button lifts by 2 pixels on hover and compresses slightly on press.
  • A clickable card lifts by 5 pixels and picks up a soft shadow.
  • With reduced motion enabled the animations become practically instant.

What we never do

  • Large purple or blue containers without a semantic reason.
  • Identical white cards in three columns across every section in a row.
  • A first screen made of text and a gradient blob.
  • Emoji instead of an interface icon or a flag.
  • Buttons of different colours and names for the same action.
  • Decorative figures with no source behind them.
  • Heavy animation with no fallback for reduced motion.

Need A3 brand materials?

We send the logo, colour palette and presentation templates on request, and help bring your materials in line with the platform style.

Discuss your task