Skip to content
mkasymov.ru logo

Звездный вокальный тренер Михаил Касымов приглашает к себе на обучение

mkasymov.ru

A sophisticated, high-end educational brand that blends classical authority with modern accessibility. The aesthetic is clean and editorial, utilizing stark contrasts and serif typography to convey prestige and expertise in vocal training.

premium
editorial
classical
clean
authoritative
minimal
educational

Color Palette

Colors

Light Mode

#222222

primary

#ffffff

background

#000000

text

#7e7e7e

secondaryText

#7e7e7e

muted

#e8e8e8

border

#e00000

accent

Dark Mode

#000000

background


Typography

Fonts

Times New Roman

body
400
system

Noto Sans

heading
400
500
google-fonts

Arial, sans-serif

Arial

body
400
system

Noto Sans

body
400
google-fonts

Arial, sans-serif

body

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox


Components

Design System

ЗАПИСЬ НА УРОК
outline
60px
#ffffff
secondary
secondary
5px
#ffffff#ffffff

Voice & Tone

Personality

Visual Energy

4/10

Design Era

classic-editorial

Emotional Tone

trustworthy-premium

Target Audience

Adults and children seeking high-quality, professional vocal instruction in Moscow, likely valuing prestige, quality of space, and expert mentorship.

Comparable Brands

MasterClass
The New York Times
Sotheby's
Apple Education

Brand Rules

Dos & Don'ts

Do

  • Use Noto Sans (weights 400, 500) for all headings in sentence-case, and Times New Roman (weight 400) for body text to maintain an editorial, classic feel.
  • Primary Call-to-Action buttons must be pill-shaped (border-radius: 60px), using an outline style with #000000 border and #ffffff text, labeled 'ЗАПИСЬ НА УРОК'.
  • Maintain a high-contrast monochrome palette: use #222222 for primary text/elements and #ffffff for backgrounds in light mode; invert to #000000 background with white text in dark mode.
  • Apply the accent color #e00000 sparingly, strictly for highlighting key value propositions or secondary interactive elements, never as a dominant background.
  • Keep all UI elements flat with zero box-shadows and zero gradients to ensure a clean, modern, and distraction-free interface.
  • Use Arial (weight 400) as a fallback for body text if Times New Roman is unavailable, ensuring consistent 400 weight across sans-serif fallbacks.
  • Maintain ample whitespace around content blocks; avoid cluttered layouts to reflect the 'best space in Moscow' premium positioning.
  • Use secondary buttons with #ffffff background and #ffffff text (likely for dark mode contexts or specific contrast needs) with a small 5px border-radius for subtle distinction from primary CTAs.

Don't

  • Do not use title case for headings; strictly adhere to sentence-case conventions for all headings.
  • Do not use emojis, exclamations, or playful language in copy; maintain a formal, matter-of-fact tone with moderate vocabulary.
  • Do not apply any box-shadows, gradients, or depth effects to cards, buttons, or images; the design must remain strictly flat.
  • Do not use serif fonts for headings; reserve Times New Roman exclusively for body copy to preserve the editorial hierarchy.
  • Do not use bright or saturated colors other than #e00000 as an accent; avoid neon colors or multi-color palettes.
  • Do not use rounded corners on secondary elements (like input fields or small tags); reserve the 60px pill shape only for primary CTAs.
  • Do not mix font families within the same paragraph; stick to Noto Sans for headings and Times New Roman/Arial for body.
  • Do not use all-caps for body text; reserve capitalization for specific UI labels or the primary CTA button text.

Design Assets

Visual Elements

Design asset
svg150×150
Design asset
svg150×150
Design asset
svg150×150
Design asset
svg150×150
Design asset
png83×91
Design asset
webp402×482

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/mkasymov.ru -->
<!-- Extracted: 2026-08-29T20:33:36.040Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Звездный вокальный тренер Михаил Касымов приглашает к себе на обучение"
description: "A sophisticated, high-end educational brand that blends classical authority with modern accessibility. The aesthetic is clean and editorial, utilizing stark contrasts and serif typography to convey prestige and expertise in vocal training."
colors:
  primary: "#222222"
  tertiary: "#e00000"
  neutral: "#7e7e7e"
  surface: "#ffffff"
  on-surface: "#000000"
  on-surface-secondary: "#7e7e7e"
  border: "#e8e8e8"
  surface-dark: "#000000"
typography:
  headline-lg:
    fontFamily: "Noto Sans"
    fontSize: "34px"
    fontWeight: "400"
    lineHeight: "34px"
  headline-md:
    fontFamily: "Noto Sans"
    fontSize: "18px"
    fontWeight: "500"
    lineHeight: "18px"
  body-md:
    fontFamily: "Times New Roman"
    fontSize: "16px"
    fontWeight: "400"
rounded:
  sm: "5px"
  md: "60px"
  lg: "100px"
  full: "9999px"
components:
  button-outline:
    textColor: "#ffffff"
    rounded: "60px"
    padding: "0px"
    fontSize: "14px"
    fontWeight: "400"
    borderColor: "#000000"
    borderWidth: "1px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#ffffff"
    rounded: "5px"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "400"
    borderWidth: "1px"
---

# Звездный вокальный тренер Михаил Касымов приглашает к себе на обучение — Design System

## Overview

The visual identity establishes a commanding presence through editorial minimalism, merging the gravitas of classical tradition with the clarity of modern digital interfaces. This aesthetic draws direct inspiration from the authoritative layouts of The New York Times and the refined luxury of Sotheby's, ensuring that every interaction feels curated and prestigious. The design atmosphere is not casual or playful; it is serious, focused, and intellectually stimulating, designed to elevate the perception of vocal training from a hobby to a masterclass in artistry. Stark contrasts define the user experience, utilizing deep, near-black tones against expansive white space to guide the eye with precision and reduce cognitive load. This approach aligns with the Sage and Ruler archetypes, projecting an image of unassailable expertise and high standards. The interface avoids decorative clutter, prioritizing content hierarchy and readability to foster trust and authority. By adopting a clean, systematic structure reminiscent of Apple Education, the design ensures that the sophisticated brand personality remains accessible, creating an environment where users feel they are engaging with elite instruction. The overall effect is one of quiet confidence, where the absence of noise amplifies the value of the expertise offered.

**Key characteristics:**

- Vibe — premium, editorial, classical, clean, authoritative, minimal
- Archetypes — The Sage, The Ruler
- Comparable to — MasterClass, The New York Times, Sotheby's, Apple Education
- Design era — classic-editorial
- Emotional tone — trustworthy-premium
- Target audience — Adults and children seeking high-quality, professional vocal instruction in Moscow, likely valuing prestige, quality of space, and expert mentorship.
- Visual energy — 4/10 (moderate)

## Colors

The palette relies on a strict binary of #222222 and #ffffff to convey absolute clarity and sophistication. The near-black primary color replaces standard black to reduce visual strain while maintaining high contrast, signaling premium quality and depth. The white surface provides a sterile, gallery-like backdrop that ensures content remains the focal point. This restrained approach eliminates ambiguity, reinforcing the brand's authoritative and timeless character through pure, unadulterated contrast.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#222222` | Near-Black |
| accent / tertiary | `#e00000` | Red |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#7e7e7e` | Gray |
| border | `#e8e8e8` | Lavender |
| muted | `#7e7e7e` | Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| background | `#000000` | Black |

## Typography

The type system pairs Times New Roman with Noto Sans to bridge classical heritage and modern functionality. Serif headings invoke the editorial weight of The New York Times, establishing immediate credibility and tradition. Sans-serif body text ensures high legibility and contemporary accessibility, balancing the formality of the display type. This hierarchy communicates that while the art of singing is rooted in history, the training method is current, precise, and professionally structured.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Times New Roman | body | system | 400 |
| Noto Sans | heading | google-fonts | 400, 500 |
| Arial | body | system | 400 |
| Noto Sans | body | google-fonts | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Heading 2 | Noto Sans | 34px | 400 | 34px | — |
| Heading 3 | Noto Sans | 18px | 500 | 18px | — |
| Body | Times New Roman | 16px | 400 | — | — |

### Conventions

- Heading case — sentence-case

## Shapes

Border-radius scale:

- `sm` — 5px
- `md` — 60px
- `lg` — 100px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#ffffff`
- Radius — `60px`
- Padding — `0px`
- Font size — `14px`
- Font weight — `400`
- Border — `1px solid #000000`
- Sample copy — "ЗАПИСЬ НА УРОК"

**Secondary**

- Background — `#ffffff`
- Text — `#ffffff`
- Radius — `5px`
- Padding — `0px`
- Font size — `16px`
- Font weight — `400`

## Do's and Don'ts

### Do

- Use Noto Sans (weights 400, 500) for all headings in sentence-case, and Times New Roman (weight 400) for body text to maintain an editorial, classic feel.
- Primary Call-to-Action buttons must be pill-shaped (border-radius: 60px), using an outline style with #000000 border and #ffffff text, labeled 'ЗАПИСЬ НА УРОК'.
- Maintain a high-contrast monochrome palette: use #222222 for primary text/elements and #ffffff for backgrounds in light mode; invert to #000000 background with white text in dark mode.
- Apply the accent color #e00000 sparingly, strictly for highlighting key value propositions or secondary interactive elements, never as a dominant background.
- Keep all UI elements flat with zero box-shadows and zero gradients to ensure a clean, modern, and distraction-free interface.
- Use Arial (weight 400) as a fallback for body text if Times New Roman is unavailable, ensuring consistent 400 weight across sans-serif fallbacks.
- Maintain ample whitespace around content blocks; avoid cluttered layouts to reflect the 'best space in Moscow' premium positioning.
- Use secondary buttons with #ffffff background and #ffffff text (likely for dark mode contexts or specific contrast needs) with a small 5px border-radius for subtle distinction from primary CTAs.

### Don't

- Do not use title case for headings; strictly adhere to sentence-case conventions for all headings.
- Do not use emojis, exclamations, or playful language in copy; maintain a formal, matter-of-fact tone with moderate vocabulary.
- Do not apply any box-shadows, gradients, or depth effects to cards, buttons, or images; the design must remain strictly flat.
- Do not use serif fonts for headings; reserve Times New Roman exclusively for body copy to preserve the editorial hierarchy.
- Do not use bright or saturated colors other than #e00000 as an accent; avoid neon colors or multi-color palettes.
- Do not use rounded corners on secondary elements (like input fields or small tags); reserve the 60px pill shape only for primary CTAs.
- Do not mix font families within the same paragraph; stick to Noto Sans for headings and Times New Roman/Arial for body.
- Do not use all-caps for body text; reserve capitalization for specific UI labels or the primary CTA button text.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 7/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 4/10 | technical |

### Copywriting style

- Avg. sentence length — 6 words
- Vocabulary — moderate
- Jargon — some
- CTA style — benefit-focused phrases with open-ended indicators
- Rhetorical devices — repetition, ellipsis

### Sample copy

> Современное обучение в лучшем пространстве Москвы.

> Любой уровень вашей подготовки.

> Для взрослых и детей.

> Все включено +

> Консультация

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | jpg | [link](brands/mkasymov.ru/logo-0.jpg) | 95% |
| favicon | — | png | [link](brands/mkasymov.ru/logo-1.png) | 95% |
| favicon | — | png | [link](brands/mkasymov.ru/logo-2.png) | 95% |
| favicon | — | png | [link](brands/mkasymov.ru/logo-3.png) | 95% |

## Sources

- Official brand guidelines — https://www.simpler.so/media-kit
- Live brand page — https://extractvibe.com/brand/mkasymov.ru
- Raw JSON — https://extractvibe.com/api/brand/mkasymov.ru
- DESIGN.md (this file) — https://extractvibe.com/api/brand/mkasymov.ru/design.md
- Extracted — 2026-08-29T20:33:36.040Z
- Generator — ExtractVibe vv1
- Quality score — 100/100
226 lines · 9,973 bytesView raw
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md

Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/mkasymov.ru \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.