МАТЧАСТЬ / BRAND & DESIGN SYSTEM / DOCUMENT 39 / 03.09.2026

Бренд и дизайн-система «Матчасти»

Рекомендованная визуальная и продуктовая система для медиа, бизнес-реестра, publishing workflow и AI/Search analytics в одном продукте. Главная идея: «Матчасть» должна выглядеть как современная редакционно-техническая инфраструктура доверия. Не как AI-стартап с неоновым мозгом, не как SEO-сервис с десятками цветных score, не как деловой портал из 2012 года. Визуальный язык строится вокруг источника, факта, сигнала, документа, связи и измерения.

Editorial × Productпубличные материалы читаются как современное медиа, кабинет работает как точный B2B-инструмент

Evidence firstsource, verification, methodology и status заметнее декоративного AI

Graphite + Orangeнейтральная база и один узнаваемый signal accent

Data without noiseтаблицы, direct labels, pp/counts и restrained charts вместо score carnival

1. Бренд-задача

«Матчасть» должна сделать проверяемость визуально ощутимой. Когда пользователь видит компанию, статью, отчёт или AI observation, интерфейс должен постоянно отвечать: кто это утверждает, что подтверждено, какой источник, когда наблюдалось и что делать дальше.

BRAND IDEA SOURCE → FACT → RELATION → PUBLICATION → OBSERVATION → PROOF → NEXT ACTION Visual language: precise editorial technical calm traceable.

2. Что означает название

Русское «Матчасть» имеет сильную семантику: устройство предмета, фактическая основа, знание механики, понимание того, как что-то реально устроено. Для продукта это хорошо совпадает с Entity Graph, источниками, методологией и доказательной аналитикой.

3. Риск названия

Фраза «учи матчасть» иногда звучит снисходительно. Бренд нельзя строить на тоне экзаменатора, который знает лучше клиента.

NOT: "Мы научим вас матчасти" BETTER: "Проверяемая бизнес-информация" "Публикации, источники и доказательства" "Знать, что видно"

4. Brand promise

Публиковать знания компании так, чтобы их можно было найти, проверить, связать с источниками и измерить.

5. Brand attributes

Атрибут	Как выглядит	Чего избегаем
Точный	источники, даты, denominators, статусы	магические score
Спокойный	нейтральная база, минимум декоративного шума	неон, hype gradients everywhere
Редакционный	сильная типографика, длинное чтение, ясные подписи	лендинг из одинаковых SaaS-карточек
Технический	mono accents, diagrams, structured data	визуальная «хакерщина»
Проверяемый	source provenance всегда рядом	анонимные утверждения
Современный	чистая система компонентов и motion	деловой портал с тяжёлыми рамками

6. Brand positioning in one line

МАТЧАСТЬ Проверяемые бизнес-публикации и измерение видимости.

7. Альтернативная короткая строка

Публикации. Источники. Доказательства.

8. Продуктовая строка

Публикуйте экспертные материалы, проверяйте Search/AI visibility и получайте следующий обоснованный шаг.

9. Не делать слоган «видимость в ChatGPT» главным брендом

Модели и каналы меняются. Бренд должен пережить конкретную AI-платформу.

10. Master brand

Public Russian: Матчасть Latin/domain: Mathchast mathchast.com Do not alternate: MatChast MathChast Math-chast МАТ.ЧАСТЬ.

11. Логотип: рекомендованное направление

Сначала wordmark. Символ вторичен. Название короткое и фонетически характерное, поэтому первые месяцы полезнее закреплять само слово.

12. Wordmark

Матчасть Case: Title case preferred Marketing caps: МАТЧАСТЬ only for labels / covers Domain: mathchast.com

13. Почему не постоянный ALL CAPS

ALL CAPS усиливает industrial/technical характер, но для длинных редакционных страниц может выглядеть жёстко и «ведомственно». Title case делает бренд человеческим.

14. Символ: направление A

SOURCE BRACKET [ • ] Meaning: statement inside source/context Can evolve into: citation chip favicon loading marker.

15. Символ: направление B

ENTITY LINK two nodes one precise connection Meaning: company ↔ expert claim ↔ source article ↔ entity.

16. Символ: направление C

DOCUMENT MARK rectangular page + one orange verification notch Meaning: public durable record.

17. Какое направление выбрать

Для первого design sprint протестировать 3 wordmark+mark families, но brand should work без символа. Самая сильная концепция на уровне продукта - source bracket / evidence mark.

18. Чего не должно быть в логотипе

NO: brain robot sparkles atom π calculator gear magnifying glass SEO arrow chat bubble neural-network cliché rocket.

19. Почему

Они либо делают бренд generic AI/tech, либо сужают «Матчасть» до математики/образования.

20. Основная визуальная идея

TECHNICAL EDITORIALISM white/graphite space precise typography thin rules source annotations orange signal data blue mono metadata real evidence procedural diagrams.

21. Public site vs product UI

Нужны два режима одной системы.

Режим	Цель	Плотность
Reader / Public	читать, доверять, исследовать	просторно
Workspace / Product	сравнивать, управлять, принимать решения	плотно

22. Public site light-first

Для статей, исследований, компаний и methodology рекомендован светлый базовый фон. Длинное чтение и документальный характер лучше поддерживает paper-like светлая поверхность.

23. Dark не исчезает

Dark: marketing hero data preview product optional theme special research cover Light: articles company profiles methodology search/topic pages default public reading.

24. Product dashboard

Dashboard поддерживает system/light/dark, но не проектируется сначала только в dark theme.

25. Цветовая система

Ink 950
#0B0D10

Paper 50
#F7F7F5

Signal Orange
#FF7A1A

Orange Text
#C2410C

Evidence Blue
#2563EB

Verified Green
#15803D

26. Signal Orange

#FF7A1A Use: primary brand field highlight chart focal mark selected state cover accent On dark: can be text/icon On white: do NOT use for small body text.

27. Accessibility detail

Примерный contrast ratio #FF7A1A against #0B0D10 is about 7.46:1, while against white only about 2.61:1. Поэтому яркий orange хорош на dark surface или как fill с тёмным текстом. Для orange text на light surface использовать более тёмный token, например #C2410C, который даёт около 5.18:1 against white.

28. Primary button

Light/Dark: background #FF7A1A text #0B0D10 Avoid: white text on bright orange.

29. Neutral palette

Ink 950 #0B0D10 Ink 900 #11151A Ink 800 #1A2028 Gray 700 #384250 Gray 500 #667281 Gray 300 #C8CDD4 Gray 200 #E2E5E9 Gray 100 #EFF1F3 Paper 50 #F7F7F5 White #FFFFFF

30. Status colors

Evidence blue: observed / information Verified green: verification success Warning amber: needs attention / partial Critical red: blocked/error Gray: unknown / inactive Orange: brand/selection NOT generic success.

31. Brand orange should not mean «success»

Так brand color remains brand, а status semantics остаются stable.

32. Never rely on color alone

Atlassian's data-visualization guidance explicitly recommends additional shapes, labels or patterns and warns against using color as the only meaning carrier. Это особенно важно для before/after, status and platform comparisons.

33. Typography recommendation

IBM Plex Sans + IBM Plex Mono для launch.

34. Почему IBM Plex

IBM Plex официально поддерживает Cyrillic and more than 100 languages, имеет Sans/Mono/Serif families и строился как typeface для global technology brand. Для «Матчасти» это хороший ready-made баланс editorial + engineering.

35. Primary typography

Headings: IBM Plex Sans Medium / Semibold Body: IBM Plex Sans Regular Data / IDs / code / timestamps: IBM Plex Mono Regular / Medium.

36. Serif?

IBM Plex Serif можно протестировать только для long-form research/editorial pull-quotes. Не создавать третью типографическую систему на MVP без сильной причины.

37. Why not Geist as primary

Vercel's Geist is an excellent benchmark for precise minimal developer typography, but current official Vercel font presentation does not position Cyrillic support as a core strength. Русский продукт должен выбирать typeface after explicit Cyrillic testing, not because English screenshots look modern.

38. Type scale public

Display XL 64/68 Display L 52/58 H1 44/50 H2 34/40 H3 26/32 Lead 20/30 Body L 18/30 Body 16/26 Small 14/21 Meta 12/18.

39. Type scale product

Page H1 28/34 Section H2 20/26 Card title 16/22 Body 14/21 Table 13/19 Meta 12/18 Micro 11/16 Dense, but never 10px dashboards.

40. Reading column

Article body: 680–760 px Research: 760–820 px when charts/tables need room Full-width: only media/data not paragraph text.

41. Typography principle

Atlassian's typography guidance emphasizes readability and visual hierarchy. IBM's type scale similarly adapts line height to text size. Для «Матчасти» body text must feel like publishing, not compressed admin UI.

42. Layout grid

Base unit: 4 px Spacing: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 Public max width: 1280–1440 Product: fluid with max useful width.

43. 12-column marketing grid

Desktop: 12 cols Tablet: 8 Mobile: 4 But: article content uses semantic reading column, not forced 12-col fragments.

44. Corner radius

4: micro / tag 8: inputs/buttons 12: cards 16: major panels 24: marketing hero only.

45. Avoid bubble UI

Не делать каждую строку pill, каждую секцию card и каждую карточку с radius 24. Product becomes toy-like.

46. Borders

Default: 1px neutral rule Use borders for: provenance table structure separation Avoid: heavy shadows.

47. Elevation

Level 0: page Level 1: card Level 2: popover/dropdown Level 3: modal Mostly: border + surface before shadow.

48. Icon system

One stroke family 16 / 20 / 24 px 1.5–2 px stroke Icons support: action status entity type Never: decorative emoji-style mix.

49. Icon semantic families

Company Expert Article Case Research Source Verified Observed Citation Search AI Report Recommendation Agency.

50. AI icon

Avoid a sparkle icon as universal AI symbol. Use provider logos where permitted or neutral «AI systems» label/icon.

51. Core brand graphic

Evidence lines. Thin rule segments, nodes, source numbers and one signal-orange point can become a scalable proprietary visual motif.

SOURCE 12 ──────────●──────── observed 03.09.26 ENTITY A ─── claim ─── SOURCE B

52. Procedural visual system

Instead of buying endless stock illustrations, build 3–4 coded generative systems that can produce covers, report dividers and social cards from real content metadata.

53. Visual family A: Source Map

Inputs: source domains entity nodes citation frequency topic Output: abstract graph with one orange focal source.

54. Visual family B: Signal Field

Inputs: prompt observations platforms presence/absence Output: dot/line field not literal chart for editorial cover.

55. Visual family C: Document Stack

Inputs: content type company date verified count Output: abstract pages annotations rules source markers.

56. Visual family D: Entity Grid

Inputs: company expert product topic relations Output: technical relationship diagram.

57. Procedural system advantages

consistent cheap at scale machine-generated brand-native derived from metadata not fake evidence works animated/static.

58. Decorative vs evidentiary visuals

Critical distinction: procedural/AI-generated art can decorate a story, but must never look like documentary proof.

59. Evidence images

Evidence: real screenshot real chart real document excerpt real person/company photo real source page real dataset visualization Decorative: generated object abstract graph procedural texture.

60. AI-generated imagery policy

Allowed: abstract/editorial decoration concept illustration Avoid: fake executives fake offices fake customer scenes fake documents fake product screenshots fake conference photos.

61. No AI cliché library

No blue robots, glowing brains, cyber faces, neon server corridors, holographic hands or random 3D glass spheres as default visual language.

62. Photography

Preferred: real expert portrait real company/product real place documentary detail source-specific image. Treatment: natural neutral limited color grading.

63. Portrait style

Simple background eye-level no excessive corporate retouch crop: 1:1 / 4:5 consistent lighting when commissioned.

64. Company logos

Use official logo assets and preserve clear space/aspect. Never recolor every client logo orange to fit brand.

65. Public homepage visual hierarchy

1. What Mathchast is 2. Search/company entry 3. Current research/materials 4. Product proof 5. For business 6. For agencies 7. Methodology 8. Pricing.

66. Homepage hero

H1: Публикации, которые можно проверить Lead: Companies / Experts / Sources / Search / AI Primary CTA: Найти компанию or Опубликовать материал Secondary: Как это работает.

67. Do not hero with 8 floating metric cards

It immediately makes the platform look like an analytics SaaS and hides publishing/editorial identity.

68. Search is a brand behavior

A prominent search field makes «Матчасть» feel like a knowledge resource, not just seller landing page.

69. Company page anatomy

Company header Verification state Official facts Topics/products Experts Publications Confirmed cases Reviews/references Media portfolio Credentials Sources / history.

70. Company header should not show «Trust Score 87»

Doc 36 explicitly rejects early reputation composite scoring.

71. Better trust summary

✓ Компания подтверждена 4 подтверждённых кейса 7 независимых отзывов 18 внешних публикаций 3 активных сертификата.

72. Verification badge

Text: Компания подтверждена Icon: check/seal Tooltip/link: что именно подтверждено. Never: blue check alone with ambiguous meaning.

73. Evidence chip

SOURCE Official website OBSERVED 03 Sep 2026 VERIFIED Counterparty confirmed Each: distinct semantics.

74. Article page anatomy

Content type Title Deck Author/expert Company relation Published/updated Commercial disclosure Verification summary Article Evidence blocks Sources Entity links Related material.

75. Disclosure design

Commercial/editorial disclosure sits near the title, in ordinary readable typography. Not hidden in gray footer text.

76. Article source citations

Inline: [1] [2] or descriptive: Источник: Росстат Hover: title/date/domain Bottom: full Sources section.

77. Source card

Publisher Title Date URL domain Source type Accessed/observed date Optional archived state.

78. Quote design

Quote Person Role Organization Verification context No: giant decorative quotation marks that overpower attribution.

79. Fact callout

ПОДТВЕРЖДЕНО КЛИЕНТОМ Время обработки: −32% Source: case confirmation 12 Aug 2026.

80. Methodology callout

МЕТОДОЛОГИЯ 40 prompts 3 platforms RU 3 baseline runs [Подробнее]

81. Research page

Hero Key findings Methodology Dataset scope Charts Interpretation Limitations Sources Download/export Related entities.

82. Research visual identity

Research gets strongest procedural visual system and restrained editorial typography. It should feel like a reusable citation source.

83. Tables

Header sticky when useful numeric right-aligned labels left mono optional for IDs row hover subtle zebra only if long dense table download/source actions explicit.

84. Numbers

Use tabular numerals where available Format: 36% +8 п.п. 18/50 12 Sep 2026 12 900 ₽ Avoid: 36.0000%

85. Before/After card

Mention Rate 36% → 44% +8 п.п. 18/50 → 22/50 Evidence: Repeated observational [Methodology]

86. No oversized «+39%» green card

Doc 34 requires pp and denominators. Visual design must enforce methodology, not tempt marketing exaggeration.

87. AI Visibility dashboard

Top: 4 primary metrics Then: platform matrix topic matrix sources watched URLs prompt explorer Bottom: raw evidence / methodology.

88. Metric hierarchy

Core: Mention Rate Recommendation Rate SoV Citation Rate Secondary: source mix platform topics fact accuracy Never: 12 equal KPI cards.

89. Dashboard metric card

Metric name Value Delta denominator period data quality tiny sparkline optional No: decorative gauge.

90. Gauge charts

Avoid speedometer/gauge unless there is a meaningful fixed threshold. Most visibility metrics are better as number + trend + denominator.

91. Data visualization defaults

Atlassian recommends single-color charts as default and adding categorical colors only when needed, typically limiting visible categories to roughly 5–6. «Матчасть» should adopt the same restraint.

92. Chart palette

Primary series: orange or blue Comparison: neutral gray Competitors: limited categorical set Status: semantic colors No rainbow line chart with 14 brands.

93. Competitor charts

Client: orange Competitors: neutral/categorical Top 4 + Other Direct labels: preferred.

94. Platform comparison

ChatGPT Gemini Perplexity Use: platform label/logo same metric scale small multiples Avoid: three unrelated chart styles.

95. Color blindness

Support: direct labels line patterns marker shapes icons table alternative Color: secondary cue.

96. Data table alternative

Every important chart should have an accessible table/text representation when practical.

97. Chart annotations

Publication Provider change External PR Search anomaly Prompt set change Use: vertical rule + label not hidden tooltip only.

98. No silent smoothing

If chart uses weekly average or smoothing, label methodology.

99. Missing data

Missing: gap / dashed / N/A Never: zero. Provider error: status icon tooltip.

100. Preliminary data

Final: solid Preliminary: lighter fill / dashed area label "предварительные".

101. Data quality status

ROBUST DIRECTIONAL PARTIAL NON-COMPARABLE Use: text badge + icon Do not: green/yellow/red only.

102. Next Best Action card

HIGH PRIORITY Собрать кейс по безопасности AI-агентов Why: 3 evidence bullets Effort: Medium Needs: CTO + metric [Создать бриф]

103. Recommendation priority

Priority can use subtle status token, but recommendation remains evidence-first. No «82/100 opportunity score» giant circle.

104. Workspace navigation

Overview Publications Visibility Search Proof Reputation Recommendations Reports Company Team / Billing.

105. Agency navigation

Portfolio Clients Pitches Publications Reports Recommendations Credits Team.

106. Workspace switcher

Agency / Direct Client Brand Always visible: current context Prevent: editing wrong client.

107. Context header

Cross-client SaaS must never rely on user memory alone. Current client/company name should remain visible in major workspace views.

108. Command palette

⌘K / Ctrl+K Search: clients companies experts articles reports recommendations P1.

109. Tables first in operations UI

Publications, clients, reports and credits are operational objects. Use clear tables/list views before elaborate card mosaics.

110. Table row density

Comfortable: 48–52 px Compact optional: 36–40 px Mobile: card/list transform.

111. Status column

IN REVIEW NEEDS CLIENT PUBLISHED MEASURING REPORT READY Text status, not colored dot alone.

112. Forms

Label above helper text inline validation clear required fields save state no placeholder-as-label.

113. Long forms

Case / verification: sections progress save draft evidence upload review summary Not: one 80-field page.

114. Verification form design

Fact value source evidence status Show: what becomes public what stays private.

115. Upload evidence

Privacy context sits next to upload. User should know whether a contract excerpt is public, moderator-only or deleted after verification.

116. Empty states

Bad: "Nothing here" Good: "У компании пока нет подтверждённых кейсов. Добавьте кейс или пригласите контрагента подтвердить существующий."

117. Empty state should not always sell

If no action needed, do not manufacture a purchase CTA.

118. Loading states

Skeleton: same geometry as result AI run: show progress/state not fake percentage unless known.

119. Long-running AI checks

QUEUED RUNNING PARTIAL READY ERROR Include: completed/expected when real.

120. Error design

What failed What data is safe What user can do Whether retry automatic When last successful snapshot existed.

121. Unknown is a first-class state

Design system must visually distinguish unknown from false/zero/no.

122. Motion principles

Fast: 120–180ms micro Standard: 180–240ms panel Complex: ≤320ms Use: opacity/transform Avoid: decorative slow easing.

123. Motion purpose

orientation state change hierarchy continuity Not: show-off.

124. Reduced motion

Respect prefers-reduced-motion. Charts and generative visuals need non-animated fallback.

125. Homepage procedural animation

Subtle: source nodes lines document signals Interaction: cursor/scroll optional No: GPU-heavy 3D blocking content.

126. Performance budget matters to brand

«Точный и быстрый» product cannot ship a 12 MB animated hero before article text.

127. Accessibility target

WCAG 2.2 AA as product target. W3C recommends WCAG 2.2 as current standard for future applicability.

128. WCAG 2.2 product implications

focus not obscured keyboard navigation target size accessible authentication consistent help redundant-entry avoidance contrast semantic structure labels/errors.

129. Focus state

2–3 px ring clearly visible not clipped works light/dark Orange alone: may not be enough against all surfaces.

130. Target size

WCAG 2.2 adds Target Size (Minimum) at AA. Product controls should be designed with comfortable hit areas rather than tiny icon actions, especially tables/mobile.

131. Contrast policy

Normal text: target ≥4.5:1 Large text/UI graphics: follow WCAG applicable criteria Test: every semantic token pair light and dark.

132. Accessible authentication

No cognitive puzzle as only login path. Support password managers/passkeys/OTP flows that do not require transcription where possible.

133. Screen reader semantics

headings landmarks buttons tables form labels status live regions chart descriptions No: div soup.

134. Language

html lang="ru" English model/product names: natural inline use screen-reader tested.

135. Content design principles

Current GOV.UK publishing guidance starts from user need, recommends choosing the right amount/format/place for content, keeping it current and writing clearly for the web. Linear similarly emphasizes clarity and avoiding invented terminology.

136. Voice: core rule

Сначала факт и действие, затем объяснение.

137. Voice traits

clear specific calm evidence-based plain Russian professional not pompous.

138. Avoid vocabulary

революционный магический взломать AI доминировать в ChatGPT гарантированная видимость идеальный рейтинг уникальная нейросеть game-changing.

139. Preferred vocabulary

наблюдали зафиксировали подтверждено источник выборка период методология изменилось ограничение рекомендуем.

140. Product terminology

Use plain labels: "Публикации" not "Content Assets" "Источники" not "Knowledge Authority Inputs" "Следующий шаг" not "Prescriptive Intelligence".

141. Technical terms when useful

AI Visibility Search Proof Prompt Set Share of Voice First occurrence: short explanation and methodology link.

142. Status copy

GOOD: "Google пока не наблюдался" BAD: "SEO failed" GOOD: "Нет сопоставимых данных" BAD: "Visibility = 0".

143. Confidence copy

"Наблюдение устойчивое" "Данных пока мало" "Методика изменилась" Not: "AI уверен на 93%" without real method.

144. Article cover system

Type: CASE / RESEARCH / OPINION / NEWS Title: max 2–4 lines Visual: procedural/data/photo Brand: small Mathchast mark Company: logo only where appropriate.

145. Cover must work without illustration

Strong typography + type label + metadata should already produce a credible editorial card.

146. Social card 1200×630

Mathchast mark content type headline one visual signal source/research label domain. Avoid: full article paragraph.

147. Telegram card / vertical social

4:5 template large 2–4 line headline one data point source marker orange signal Series: consistent grid.

148. Data quote card

44% Mention Rate +8 п.п. on fixed 50-prompt set Company Period Methodology link.

149. Never crop methodology from public case graphic

If number can be misread without denominator/window, the card needs them.

150. Email design

Plain editorial HTML logo one CTA strong status text small tables no huge banner image Emails: must remain useful with images blocked.

151. Report/PDF design

Cover Executive summary Core metrics Evidence Before/After Sources Limitations Next action Methodology footer.

152. Agency co-branding

Agency logo Client logo Mathchast measurement provenance Allowed: agency accent on cover Not: remove methodology/source.

153. Print colors

Reports need print-friendly light mode regardless of dashboard theme. Do not rely on black full-page backgrounds in every PDF.

154. Design tokens

Primitive: color.orange.500 space.4 radius.2 Semantic: bg.canvas text.primary border.subtle action.primary status.verified chart.client Component: button.primary.bg badge.verified.text.

155. Why tokens

Atlassian describes design tokens as single source of truth for UI decisions. Для «Матчасти» semantic tokens are especially useful because public light pages and product dark mode need different concrete colors while preserving meaning.

156. Token naming

GOOD: color.text.primary color.status.warning color.chart.competitor BAD: color.gray4 orange-button-final-2.

157. Light/dark mapping

color.bg.canvas: light #F7F7F5 dark #0B0D10 color.text.primary: light #11151A dark #F7F7F5 color.action.primary: #FF7A1A both, with validated text color.

158. Component library P0

Button Link Input Textarea Select Checkbox Radio Tabs Badge Tag Tooltip Popover Dialog Toast Table Pagination Breadcrumb Card Callout Avatar Logo Empty state Skeleton.

159. Domain components P0

EntityBadge VerificationBadge SourceChip DisclosureLabel EvidenceBlock PublicationStatus MetricCard DataQualityBadge TimelineEvent BeforeAfterCard RecommendationCard ReportHeader CompanySummary.

160. Domain components P1

PromptExplorer CitationTable SourceMap PlatformMatrix TopicMatrix CredentialCard ReviewCard MediaPortfolioItem AgencyWorkspaceSwitcher CreditLedgerRow.

161. Patterns

Claim source Confirm case Publish article Review report Before/After Resolve dispute Agency client switch Add media URL Create recommendation brief.

162. Component states

default hover focus active disabled loading error success empty read-only Every component: light/dark keyboard responsive.

163. Figma structure

00 Cover / Changelog 01 Foundations 02 Tokens 03 Components 04 Domain Components 05 Patterns 06 Public Web 07 Workspace 08 Agency 09 Reports 10 Social / Editorial 11 Motion 12 Accessibility / QA.

164. Figma naming

Component: Button / Primary Variant: size=md state=default icon=leading Avoid: Frame 1287 Button Copy 14 Final.

165. Prototype policy

Linear's design method emphasizes verifying the actual problem and building functional prototypes early. For «Матчасть», complicated data/report workflows should be tested as working click prototypes, not only polished static frames.

166. Design/code parity

Every core Figma component: maps to coded component Every coded state: documented No: separate marketing component zoo with no implementation logic.

167. Storybook/component docs

P1 technical implementation, but design system should assume a browsable component reference with states/accessibility notes.

168. Design review checklist

User job clear? Primary action clear? Source/provenance visible? Unknown vs zero correct? Loading/error states? Keyboard? Contrast? Responsive? No misleading score? No fake evidence? Methodology reachable?

169. Public page QA

SEO metadata semantic headings structured data reading width source links updated date disclosure mobile print performance.

170. Dashboard QA

workspace context denominator period data source quality state missing data annotations export keyboard loading/errors.

171. Brand QA

Does it look: precise? calm? editorial? technical? Or: generic AI? casino dashboard? SEO tool? old business directory?

172. Design anti-pattern: score carnival

Do not use 8 circular gauges with green/orange/red 0–100 scores. It contradicts Docs 32–36 methodology.

173. Anti-pattern: glassmorphism

Heavy blurred glass panels and neon gradients are visually associated with generic AI products and reduce document-like trust.

174. Anti-pattern: card everywhere

Articles and methodology pages should use typography and whitespace, not 25 rounded rectangles.

175. Anti-pattern: tiny gray metadata

Source, disclosure and methodology are not legal debris. They need readable contrast.

176. Anti-pattern: provider-logo rainbow

ChatGPT/Gemini/Perplexity branding should not overpower Mathchast identity.

177. Anti-pattern: fake data preview

Marketing screenshots must use real permissioned data or clearly labeled sample/demo.

178. Anti-pattern: infinite gradient hero

One dark editorial hero section can use atmosphere. Whole site should not become purple-blue glow.

179. Public homepage mood

Imagine: Financial Times clarity + modern developer product precision + research paper traceability + contemporary Russian business media. Not literal visual copying.

180. Product dashboard mood

Linear-like clarity: simple first keyboard-capable quiet hierarchy Atlassian-like: tokens/accessibility Mathchast-specific: evidence/provenance.

181. Why «simple first, then powerful» matters

Linear explicitly articulates this principle. «Матчасть» has a very broad backend model; UI must reveal complexity progressively. A new company should be able to publish one article without understanding Entity Graph internals.

182. Progressive disclosure

Default: simple status Expand: evidence raw observations methodology technical detail. Expert users: can drill down.

183. Example

Default: "Google: наблюдается" Expand: last crawl canonical coverage source API observed_at raw response.

184. Brand should reward curiosity

Every high-level statement should allow drill-down to evidence. This becomes both UX principle and brand behavior.

185. Design principle 1

Показывай источник рядом с выводом.

186. Design principle 2

Показывай состояние, не изображай уверенность.

187. Design principle 3

Упрощай интерфейс, не упрощай методологию до лжи.

188. Design principle 4

Публичное чтение просторное; рабочее управление плотное.

189. Design principle 5

Один accent, несколько semantic colors.

190. Design principle 6

Каждый визуальный эффект должен объяснять или ориентировать.

191. Design principle 7

Не имитировать чужие доказательства.

192. Design principle 8

Система должна работать на русском с первого пикселя.

193. First design sprint

Week 1: brand mood / wordmark directions palette type home/article/company Week 2: workspace shell metrics tables recommendations tokens/components Week 3: prototype mobile/accessibility social/report templates Then: user test + code.

194. Logo sprint deliverables

3 wordmark families 3 mark concepts favicon monochrome light/dark small-size test Cyrillic/Latin pair domain lockup.

195. Brand must work monochrome

Orange is accent, not structural dependency. Logo/source pages should remain recognizable in black-and-white PDF/print.

196. Typography test corpus

Матчасть Компания подтверждена Публикации и исследования AI Visibility 36% → 44% 12 900 ₽ ООО «Альфа» 03.09.2026 Щ Ъ Ы Й quotes «» and numerals.

197. Cyrillic QA

Check: й/ё ъ/ь uppercase quotes en/em dash tabular numerals ₽ percent Latin/Cyrillic mixing.

198. Responsive breakpoints

Mobile: ≤639 Tablet: 640–1023 Desktop: 1024–1439 Wide: 1440+ But: component/container queries preferred where useful.

199. Mobile public pages

Excellent: reading company lookup sources share profile Workspace mobile: view/report/approve Complex editing: desktop-first acceptable MVP.

200. Mobile tables

Priority columns horizontal scroll if necessary card transform only if semantics preserved sticky first column when useful.

201. Shareability

Public source/report pages should have stable URLs and clean share previews. Brand recognition compounds through links, not only homepage visits.

202. Open Graph template

Title type entity one key fact/visual Mathchast orange signal no tiny UI screenshot.

203. Browser favicon

Use: evidence/source mark 16×16 test must read as simple shape. No: mini full wordmark.

204. App icon

Square: Ink background orange/white source mark Avoid: letter M only if mark direction works.

205. Report watermark

Subtle provenance footer acceptable; avoid giant diagonal watermark that harms reading.

206. Brand email sender

Матчасть reports@mathchast.com editorial@ support@ Consistent avatar/mark.

207. Notification voice

"Отчёт +30 готов" "Google пока не наблюдал URL" "Нужен источник для утверждения" No: "Great news!!! Your visibility exploded 🚀"

208. Success toast

"Черновик сохранён" "Источник добавлен" "Отчёт создан" Short. No celebration confetti for routine actions.

209. Celebration reserved

First publication live / first verified case can use subtle one-time positive moment. Still no casino gamification.

210. Product onboarding

Company: 1. Find/verify company 2. Create publication 3. Add evidence 4. Submit Visibility: 1. Goal 2. Prompt baseline 3. Lock 4. Monitor.

211. Onboarding progress

Use actual task completion not "profile 73%" Better: 3 of 5 verification steps done.

212. No arbitrary profile completeness score

Same anti-score principle.

213. Reader trust footer

About Methodology Editorial policy Commercial policy Corrections Privacy Contacts Company details.

214. Correction indicator

Updated 02 Sep 2026 Correction: price figure corrected [History]

215. Version history UI

For articles/claims where material changes matter, history strengthens brand promise of traceability.

216. «Permanent publication» design

Do not show fake infinity icon as guarantee. Show: publication policy link URL published date status history.

217. Search Proof timeline

Published ● 04 Sep Google crawler observed ● 05 Sep Indexed/searchable observed ● 07 Sep First impression ● 09 Sep.

218. Timeline semantics

Observed states use dates and source. Do not visually imply deterministic pipeline guarantees.

219. AI citation timeline

First observed citation 18 Sep ChatGPT 4 prompts [View observations]

220. Source provenance as brand signature

The small line «Источник / наблюдалось / обновлено» should become visually recognizable across product.

221. External provider logos

Use official marks within brand guidelines small supporting labels. Do not: recolor provider logos orange.

222. Competitor/company logos in charts

Use logos in legend/list, not tiny line markers that impair chart readability.

223. Internationalization

Launch: Russian-first Tokens/layout: must survive longer English labels Date/currency: locale aware Brand: Mathchast works Latin.

224. English brand voice later

Avoid literal translation of colloquial Russian phrases. Use: Business evidence Publishing Visibility Sources Verification.

225. Brand asset ownership

Store: SVG logos Figma source token JSON icon source procedural generators report templates social templates Versioned repository.

226. Do not distribute font files casually

Use fonts under their licenses through approved web/package distribution. Brand kit references source/license rather than bundling arbitrary font binaries.

227. Design system governance

Owner: product/design Changes: proposal review release changelog Versions: 0.x pre-MVP 1.0 launch.

228. New component gate

Before create: can existing component solve? is pattern repeated? accessibility? light/dark? code owner?

229. Component debt

Do not create separate Button for marketing, dashboard, report and agency unless behavior genuinely differs.

230. Brand exception

Marketing may have: display typography large decorative sections But controls: same core component language.

231. Design system metrics

component reuse accessibility defects UI inconsistency bugs design→code drift page performance task success/user feedback.

232. Do not measure «number of components» as success

A smaller coherent library is better.

233. User testing

Test: company trust interpretation verification badge meaning commercial disclosure before/after comprehension unknown vs zero recommendation evidence agency workspace switching.

234. Most important comprehension test

Ask user: «Что здесь подтверждено, а что только наблюдалось?» If they cannot answer, visual semantics failed.

235. Second comprehension test

Ask: «Вы бы прочитали +8 п.п. как гарантированный эффект публикации?» If yes, Before/After design is too promotional.

236. Third comprehension test

Ask: «Этот отзыв независимый или выбран компанией?» Labels from Doc 36 must make answer obvious.

237. Agency comprehension test

Ask: «Какой клиентский workspace сейчас открыт?» Context switching must be unmistakable.

238. Brand launch P0

Wordmark favicon/mark palette/tokens IBM Plex type system public layout article/company/research templates workspace shell core components data visualization rules report template social template accessibility checklist voice rules.

239. P1

Dark mode procedural cover generator agency co-branding motion library chart components advanced report system email templates Storybook/docs design tokens export.

240. P2

custom display typeface/wordmark refinement international brand kit advanced procedural motion white-label portal themes partner brand kit conference/research identity.

241. Что не входит в MVP

Не строим	Почему
Полноценный custom font	дорого до brand validation
3D WebGL everywhere	performance/noise
20-color chart system	comprehension/accessibility
100 illustration templates	procedural system better
Fully white-label identity	breaks provenance
Magic reputation/AI scores	contradicts methodology
Dark-only public site	reading/print/product flexibility

242. Recommended homepage visual

LIGHT PAGE Матчасть ───────────────────────── Публикации, которые можно проверить. [ Найти компанию ] Latest research / sources ───────────────────────── Dark technical preview: SEARCH / AI / SOURCE GRAPH

243. Recommended article visual

CASE · PARTNER MATERIAL Как Acme сократила... Company · Expert · date [Disclosure] ──────── article ──────── VERIFIED CLAIM −32% confirmed by client Sources [1][2][3]

244. Recommended dashboard visual

ACME / Visibility Mention 44% +8 pp Recommend 19% +7 pp SoV 23% +3 pp Citation 12% +4 pp [platform matrix] NEXT ACTION Security case High priority [why] [create brief]

245. Recommended agency visual

MY AGENCY Clients 12 Pitches 4 Credits 18 Needs attention Acme evidence Beta report ready Gamma fact issue Next opportunities ...

246. Brand phrase hierarchy

MASTER: Матчасть DESCRIPTOR: Проверяемые бизнес-публикации и измерение видимости SHORT: Публикации. Источники. Доказательства. PRODUCT: Publish → Prove → Improve.

247. Russian product phrase

Опубликовать. Проверить. Понять, что дальше.

248. This is a stronger motion line

It maps directly to product loop without promising ranking.

249. Brand decision summary

Утвердить направление «technical editorialism». Master brand в России - «Матчасть», Latin/domain - Mathchast. Визуальная база light-first для public publishing and graphite/dark-capable for product/data. Main palette: Ink/Paper + signal orange #FF7A1A; bright orange используется на dark or as fill with dark text, а на light для текстового акцента применяется darker accessible orange such as #C2410C. Primary launch typography - IBM Plex Sans, data/meta - IBM Plex Mono, потому что family официально поддерживает Cyrillic и подходит editorial/technical product. Core proprietary visual motif - source/evidence lines, nodes, annotations and procedural diagrams generated from real metadata. Wordmark primary; mark explores source bracket / entity link / document notch, without robot/brain/atom/π clichés. Public pages prioritize reading, sources and provenance; workspaces prioritize tables, context, status and drill-down evidence. Data viz defaults to one focal color, direct labels, limited categorical palette, denominators and data-quality states, with no gauge/score carnival. Accessibility target WCAG 2.2 AA. Brand voice clear, factual and calm. Every high-level conclusion should allow drill-down to source/methodology. Design system P0 includes tokens, public/article/company/research templates, workspace shell, domain components, report/social templates and accessibility QA; advanced animation, procedural generators, dark mode and agency co-branding expand in P1.

250. Что этот документ разблокирует

Mathchast_39 Brand & Design → Mathchast_40 Technical Architecture → Mathchast_41 Security / Privacy / Backups → Mathchast_42 Monitoring / SLA / Incidents → Mathchast_43 MVP Scope / Roadmap

Источники исследования

Brand name usage, wordmark concepts, palette, exact color tokens, IBM Plex recommendation, content templates, procedural visual families, data-visualization rules and P0/P1/P2 scope are Mathchast project decisions based on the product architecture developed in documents 9–38. Before production, logo/trademark availability, final font licensing/implementation, exact WCAG color pairs and responsive component states should be validated in the actual design/code environment.