Crpt Brand Design System Deep Dive

1. Brand Overview

Crpt’s visual language is unapologetically functional. The moment you land on crpt.ru, you feel the brand leaning into a government–enterprise aesthetic: clean, minimal, and no decorative fluff. This isn’t a consumer brand chasing lifestyle imagery — it’s a platform for serious, regulated digital infrastructure. The design says: We’re official. We’re precise. We’re here to handle compliance-level data.

The color choices reinforce that. Black (#000000) is ever-present — in text, headers, menus — grounding everything in clarity. The blues (#63afe6 and #004f9f) are sharp, business-like, and lean toward the corporate technology palette rather than playful or pastel tones. These blues aren’t “startup teal” — they’re closer to state-backed tech systems, evoking trust, authority, and clarity. The interface uses them sparingly: CTAs, pagination bullets, and hover states get the blue treatment, while most of the UI sits in a neutral black/white space.

Typography is consistent and deliberate. The single type family, Circe, is used everywhere: headings, buttons, links, body copy. It’s a geometric sans with a clean modern feel, but not overly slick — perfect for a brand that wants to be readable in Russian, handle uppercase system labels, and still look professional. There’s no mixing of serif and sans, no secondary display font. That’s a choice: one font, many weights, consistent tone.

Layout-wise, the site is built on a 4px-based spacing scale (confirmed by token extraction), with some large spacings (65px and 90px) repeated heavily — suggesting a rhythm of generous section padding to separate content blocks. Breakpoints range from tiny mobile (320px) to full HD (1920px), meaning they’ve accounted for a wide spectrum of device widths.

Component styling is flat — no shadows, no gradients. Borders are minimal, often 0px or just a single side for dividers. Buttons are rectangular, no rounded corners. Even hover states avoid animation flourish — just a solid color swap. This is a brand that values precision and predictability over visual play.

If you’re building for Crpt, you’re building for clarity, authority, and efficiency. There’s zero tolerance for ornamental UI. Everything is tokenized, everything is measurable, everything feels like it could be printed in a government manual.

2. Color System

2.1 Primary Colors

The dominant brand color is black (#000000). It’s the default for text, headers, and menus. This works because it’s the highest-contrast, most legible choice against white. In Crpt’s design, black isn’t just text — it’s a structural color. It’s the anchor.

The secondary force is light blue (#63afe6). This is used for buttons and interactive pagination bullets. It’s bright enough to stand out against black and white, but not neon. There’s an underlying corporate tone here — more “enterprise SaaS” than “consumer app.”

A deeper navy blue (#004f9f) exists in the palette, but is less common. It’s probably an accent for specific elements or alternative states. The extracted data doesn’t list usage sources for it — meaning it might be reserved for secondary CTAs or certain branding contexts.

Psychology-wise: black = authority, blue = trust. This is textbook for regulated industries.

Competitor comparison: Many government or compliance platforms use similar palettes — think EU digital services, Russian government portals. Crpt’s twist is the light blue, which adds a touch of friendliness without breaking the seriousness.

2.2 Complete Palette

2.3 Color Relationships

Black on white is perfect for accessibility — easily exceeds WCAG AAA for normal text.

Light blue (#63afe6) on black has decent contrast but doesn’t hit AAA for small text — so it’s smart they use it for large buttons or bullets. The navy (#004f9f) offers better contrast against white and works for text over white backgrounds.

Dark mode? Not evident in extracted data — this system is designed for light backgrounds.

2.4 Usage Guide

Works well:

• Black text on white background — always legible.
• Light blue buttons on white — draw attention without screaming.
• Navy accents for subtle hierarchy.

Avoid:

• Light blue text on white for small sizes — contrast drops.
• Mixing multiple blues in the same component — confuses hierarchy.
• Using black for large background fills — would feel heavy and oppressive.

3. Typography

3.1 Font Families

Primary font: Circe
No fallbacks listed — probably a self-hosted webfont.
No Google Fonts or Adobe Fonts integration detected.

Circe is clean, geometric, and works well for uppercase headings. It’s consistent across headings, links, and buttons.

3.2 Type Scale

3.3 Hierarchy

Headings jump aggressively — from 70px to 50px for major links, then down to 20px for body-ish link styles. This creates a clear visual ladder. The uppercase transform on big headings and buttons adds to the “system UI” feel — everything feels labeled, official.

Line heights are tight for large sizes (1.14, 1.15) — good for keeping headlines compact. Smaller text gets looser line height (1.68) for readability.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 4px grid.

Values extracted:

4.2 Layout

Breakpoints:

• 320px
• 460px
• 540px
• 750px
• 840px
• 860px
• 960px
• 1024px
• 1025px
• 1100px
• 1240px
• 1920px

This suggests a granular responsive approach — not just standard mobile/tablet/desktop. Likely fine-tuned for specific device classes.

5. Visual Elements

Border radius: None. All extracted values are 0px. Buttons, inputs, cards — all rectangular.

Shadow system: None. Flat design.

Borders: Minimal — often single-side (0px 1px 0px 0px solid white) for dividers. Some inputs have 0px 0px 4px solid white — unusual, possibly a bottom border highlight.

6. Components

6.1 Buttons

Variant 1:

• Default:
  Background: #63afe6
  Text: #000000
  Padding: 0px
  Border radius: 0px
  Border: none
  Box shadow: none
  Font: Circe, 16px, weight 400
• Hover:
  Background: rgb(78, 81, 84) (dark grey)

Variant 2:

• Default:
  Background: #ffffff
  Text: #000000
  Same structure as above
• Hover:
  Background: rgb(78, 81, 84)

No focus or active states extracted — so you’ll need to define them if building an accessible system.

6.2 Links

Link style 1:

• Default: Blue (rgb(0, 0, 238)), underline
• Hover: Blue (rgb(46, 123, 204)), underline

Link style 2:

• Default: White text, no underline, weight 700
• Hover: Blue (rgb(46, 123, 204)), underline

6.3 Forms

Inputs: Minimal. Some have 0px 0px 4px solid white — likely bottom borders. No hover or focus styles extracted.

6.4 Cards

No explicit card styles in data — likely flat white backgrounds, no shadows, rectangular.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-light-blue: #63afe6;
  --color-navy-blue: #004f9f;
  --color-swiper-theme: #007aff;

  /* Typography */
  --font-primary: "Circe", sans-serif;
  --h1-size: 70px;
  --h1-weight: 700;
  --h1-line-height: 1.14;
  --h1-transform: uppercase;
  --link-lg-size: 50px;
  --link-lg-weight: 700;
  --link-lg-line-height: 1.15;
  --link-lg-transform: uppercase;
  --body-size: 20px;
  --body-weight: 400;
  --body-line-height: 1.15;
  --button-size: 20px;
  --button-weight: 700;
  --button-line-height: 1.15;
  --button-transform: uppercase;
  --small-text-size: 16px;
  --small-text-weight: 400;
  --small-text-line-height: 1.15;
  --link-sm-size: 14px;
  --link-sm-weight: 700;
  --link-sm-line-height: 1.15;
  --link-sm-transform: uppercase;

  /* Spacing */
  --space-1: 1px;
  --space-18: 18px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-50: 50px;
  --space-60: 60px;
  --space-65: 65px;
  --space-90: 90px;
  --space-100: 100px;

  /* Border Radius */
  --radius-none: 0px;

  /* Component States */
  --btn-primary-bg: #63afe6;
  --btn-primary-color: #000000;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-color: #000000;
  --btn-hover-bg: rgb(78, 81, 84);
  --link-default-blue: rgb(0, 0, 238);
  --link-hover-blue: rgb(46, 123, 204);
  --link-default-white: #ffffff;
}

8. AI Coding Assistant Prompt

# Crpt Design System Specification

You are a Crpt design expert. Build UIs matching their visual language exactly.

## Brand Context
Crpt’s design is functional, flat, and authority-focused. It uses minimal colors, a single geometric sans font, and rectangular components. Interaction is subtle — mostly color changes — with no shadows or gradients.

## Color Palette
- Black: #000000 — Base text, headers, menus
- Light Blue: #63afe6 — Primary buttons, interactive bullets
- Navy Blue: #004f9f — Accent, secondary actions
- Swiper Theme Blue: #007aff — Carousel navigation accents

## Typography
Font family: "Circe", sans-serif

| Element      | Size  | Weight | Line Height | Transform   | Use For          |
|--------------|-------|--------|-------------|-------------|------------------|
| Heading-1    | 70px  | 700    | 1.14        | Uppercase   | Page titles      |
| Link Large   | 50px  | 700    | 1.15        | Uppercase   | Hero links       |
| Body Link    | 20px  | 400    | 1.15        | None        | Inline links     |
| Button       | 20px  | 700    | 1.15        | Uppercase   | Primary actions  |
| Subheading   | 18px  | 400    | 1.68        | None        | Section labels   |
| Small Link   | 16px  | 400    | 1.15        | None        | Footer links     |
| Small Button | 16px  | 400    | 1.15        | None        | Secondary actions|
| Tiny Link    | 14px  | 700    | 1.15        | Uppercase   | Menu items       |

## Spacing & Grid
Base: 4px grid  
Scale: 1px, 18px, 20px, 25px, 30px, 50px, 60px, 65px, 90px, 100px  
Use 65px and 90px as primary section paddings.

## Border Radius
- none: 0px — All components

## Shadows & Depth
Flat design — no shadows. Use borders for separation.

## Component Specifications

### Primary Button
Default:
- Background: #63afe6
- Text color: #000000
- Padding: 0px
- Radius: 0px
- Border: none
- Font: Circe, 16px, weight 400
Hover:
- Background: rgb(78, 81, 84)
Focus:
- Outline: 2px solid #004f9f (add for accessibility)
Disabled:
- Opacity: 0.5

### Secondary Button
Default:
- Background: #ffffff
- Text color: #000000
- Same structure as primary
Hover:
- Background: rgb(78, 81, 84)

### Navigation Links
Style 1:
- Default: rgb(0, 0, 238), underline
- Hover: rgb(46, 123, 204), underline

Style 2:
- Default: #ffffff, no underline, weight 700
- Hover: rgb(46, 123, 204), underline

### Input Fields
- Border: 0px 0px 4px solid #ffffff
- Radius: 0px
- Background: transparent or white depending on usage
- Focus: add visible outline for accessibility

### Cards
- Background: #ffffff
- Radius: 0px
- Padding: multiples of 20px or 30px
- Border: subtle single-side divider

## Layout & Responsive Rules
- Breakpoints: 320px, 460px, 540px, 750px, 840px, 860px, 960px, 1024px, 1025px, 1100px, 1240px, 1920px
- Page padding: 20px mobile, 65px desktop
- Section gap: 65px or 90px

## Interaction Rules
- Transition: 150ms ease for hover/focus background changes
- Focus indicators mandatory for accessibility

## DO List
- Use ONLY colors from palette
- Maintain 4px grid
- Use Circe for all text
- Keep corners sharp (0px radius)
- Use section paddings consistently (65px, 90px)
- Add focus outlines to interactive elements
- Keep hover transitions subtle

## DON'T List
- Add shadows
- Use rounded corners
- Invent new colors
- Animate hover states beyond color change
- Reduce contrast below WCAG AA

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #63afe6;
  color: #000000;
  padding: 0;
  border-radius: 0;
  font-family: "Circe", sans-serif;
  font-size: 16px;
  font-weight: 400;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: rgb(78, 81, 84); }
.btn-primary:focus { outline: 2px solid #004f9f; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Secondary Button
```css
.btn-secondary {
  background: #ffffff;
  color: #000000;
  padding: 0;
  border-radius: 0;
  font-family: "Circe", sans-serif;
  font-size: 16px;
  font-weight: 400;
  border: none;
  transition: background 150ms ease;
}
.btn-secondary:hover { background: rgb(78, 81, 84); }
```

### Input Field
```css
.input {
  border: 0px solid transparent;
  border-bottom: 4px solid #ffffff;
  border-radius: 0;
  font-family: "Circe", sans-serif;
  font-size: 16px;
  background: transparent;
}
.input:focus { outline: 2px solid #004f9f; outline-offset: 2px; }
```

9. Summary

TL;DR — Crpt’s design system is flat, sharp-cornered, and color-disciplined. Black and blue dominate, Circe handles all typography, and spacing is structured on a 4px grid with large section paddings.

Brand Keywords:

• authority-flat
• corporate-minimal
• compliance-focused
• sharp-geometry
• blue-black discipline