Start a check

Brand guidelines

The GOSTER identityMark, colour, type and form in one place.

Everything you need to create materials in the platform's style: downloadable logos, named colour tokens, a type scale, an icon library and live components.

Download the logoView the palette

Palette

Colours

Tokens have two layers. The palette defines raw colours; semantic roles are what components use. Components reference roles, so inverse surfaces and dark mode work without changing individual components.

View in dark mode

The values below update to the same roles with different colours.

Palette

Paper

Light-theme backgrounds and surfaces.

Sand

Rules, borders and hard shadows.

Ink

Text and dark surfaces.

Teal

Primary brand colour.

Clay

Accent for labels, arrows and highlights.

Dark theme

A deep background with the same green undertone and lighter colours.

Roles

Surfaces

Text

Borders

Brand and accent

Statuses

Charts

Chart palette

Separate from the deliberately muted interface palette, so data series remain distinguishable. The sequence and steps have been checked for contrast, including protanopia. Recheck accessibility when changing them.

Type

Typography

Golos Text is the product's single typeface, designed for Cyrillic and Latin text. Weight and spacing distinguish headings from body text. Fonts are bundled locally without external requests.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 No. — “ ” GOST 7.32-2017

Weights

  • Formatting compliance
    Regular
  • Formatting compliance
    Medium
  • Formatting compliance
    Semibold
  • Formatting compliance
    Bold
  • Formatting compliance
    Black

Display scale

Fluid sizes grow with the viewport.

  • Document
    Hero
  • Document
    Page heading
  • Document
    Section heading

Text scale

One scale for public pages and workspaces. The system does not use fractional steps such as 13.5 px.

  • Check formatting against a standard
    Large card heading
  • Check formatting against a standard
    Third-level heading
  • Check formatting against a standard
    Lead
  • Check formatting against a standard
    Large text
  • Check formatting against a standard
    Primary text
  • Check formatting against a standard
    Dense text
  • Check formatting against a standard
    Small text
  • Check formatting against a standard
    Utility caption

Letter spacing

  • Formatting compliance
    Display headings
  • Formatting compliance
    Dense text
  • Formatting compliance
    Small-cap labels

Type

Icons

One icon library for the whole product: components request icons by purpose, with shapes and line weights defined centrally. Add icons to the library instead of embedding SVG markup.

43 of 43

Form

Shape

The form is precise and typographic: small radii, thin rules and offset shadows without blur. Soft shadows are reserved for elements floating above the page.

Radii

  • Badge
  • Input
  • Button
  • Card
  • Pill

Shadows

In dark mode, the same shadow tokens use a lighter treatment. Switch the theme in “Colours” to see the examples change.

  • Card

    An unblurred offset is the primary treatment.

  • Large block

    The same offset with a greater spread.

  • Soft shadow

    Only for elements floating above the page.

  • Modal

    The topmost layer.

Rules

Standard border — --color-border
Strong border — --color-border-strong
Paper rule — --color-rule-ghost

Building blocks

Components

The set is deliberately compact: six button variants, six badge tones and three surface types cover the product. Add a variant only when none of the existing options fits its purpose.

Buttons

  • primaryPrimary action
  • secondarySecondary action
  • tertiaryUtility
  • textAction link
  • dangerDestructive action
  • inverseOn a dark surface

Badges and marks

  • Neutralneutral
  • Brandprimary
  • Accentaccent
  • Successsuccess
  • Attentionwarning
  • Errordanger
Ready indicator

Notifications

A notification reports an event. It appears above the content at the right edge, persists across navigation and disappears automatically. The progress bar shows the remaining time and pauses on hover. Select an example to try it.

  • info
  • success
  • warning
  • danger

Inline note

Information needed here: what will be checked, what is already paid for, or why a form could not be submitted. The note stays in the page while relevant, with a simple tone indicator.

We automatically check measurable DOCX properties. Requirements needing human judgement remain in the manual checklist.

Formatting paid for

Documents available: 1. Choose a document and start formatting.

Operation result

The document's current state: how checking or formatting ended and what to do next. The layout places status on the left, the result in the middle and the next action on the right.

FormattingFailed

The document has not been changed

The component exceeded its time limit.

Stage
Clause 6.1.1
FormattingDone

Document formatted

All automatically checked requirements have been met.

Score
100/100

Surfaces

Standard

Border and raised background. Used for lists and forms.

With an offset shadow

An accent treatment, used selectively.

Clickable

Responds on hover when the entire card is a link.