Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 591e4ec

Browse filesBrowse files
azinitazinit
authored
Merge pull request #496 from feature-sliced/BREAKING/rebranding/brand-page
BRAND: [BREAKING]! Setup branding page (part 1/3)
2 parents b12e136 + 5930515 commit 591e4ec
Copy full SHA for 591e4ec

File tree

Expand file treeCollapse file tree

10 files changed

+596
-2
lines changed
Filter options
Expand file treeCollapse file tree

10 files changed

+596
-2
lines changed

‎i18n/en/docusaurus-plugin-content-docs/current/branding.md

Copy file name to clipboard
+81Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# Branding Guidelines
2+
3+
FSD's visual identity is based on its core-concepts: `Layered`, `Sliced self-contained parts`, `Parts & Compose`, `Segmented`.
4+
But also we tend to design simple, pretty identity, which should convey the FSD philisophy and be easy to recognize.
5+
6+
**Please, use FSD's identity "as-is", without changes but with our assets for your comfort.** This brand guide will help you to use FSD's identity correctly.
7+
8+
:::caution Compatibility
9+
10+
FSD had [another legacy identity](https://drive.google.com/drive/folders/11Y-3qZ_C9jOFoW2UbSp11YasOhw4yBdl?usp=sharing) before. Old design didn't represent core-concepts of methodology. Also it was created as pure draft, and should have been actualized.
11+
12+
For a compatible and long-term use of the brand, we have been carefully rebranding for a year (2021-2022). **So that you can be sure when using identity of FSD 🍰**
13+
14+
*But prefer namely actual identity, not old!*
15+
16+
:::
17+
18+
## Title
19+
20+
- ✅ **Correct:** `Feature-Sliced Design`, `FSD`
21+
- ❌ **Incorrect:** `Feature-Sliced`, `Feature Sliced`, `feature-sliced`, `feature sliced`, `FS`
22+
23+
## Emojii
24+
25+
Core-concepts of FSD represented well in the image of *"Cake"*.
26+
**Because of it we use 🍰 as our main emojii, also for better associations**
27+
28+
> Example: *"🍰 Architectural design methodology for Frontend projects"*
29+
30+
## Logo & Palette
31+
32+
FSD has few variations of logo for different context, but it recommended to prefer **primary**
33+
34+
<!-- FIXME: refactor; use as Brand component for? -->
35+
<!-- FIXME: Fix downloading -->
36+
37+
<table style={{ textAlign: "center" }}>
38+
<tr>
39+
<td>Theme</td>
40+
<td>Logo <sub style={{ color: "gray", display: "block" }}>(Ctrl/Cmd + Click for download)</sub></td>
41+
<td>Usage</td>
42+
</tr>
43+
<tr>
44+
<td style={{ color: "#FFF", background: "linear-gradient(135deg, rgba(41,190,220,1) 0%, rgba(81,122,237,1) 100%)" }}>primary <br/> (#29BEDC, #517AED)</td>
45+
<td><a href="/img/brand/logo-primary.svg" download><img src="/img/brand/logo-primary.svg" alt="logo-primary" /></a></td>
46+
<td>Preferred in most cases</td>
47+
</tr>
48+
<tr>
49+
<td style={{ color: "#FFF", background: "#3193FF" }}>flat <br/> (#3193FF)</td>
50+
<td><a href="/img/brand/logo-flat.svg" download><img src="/img/brand/logo-flat.svg" alt="logo-flat" /></a></td>
51+
<td>For one-color context</td>
52+
</tr>
53+
<tr>
54+
<td style={{ color: "#000", background: "#FFF" }}>monochrome <br /> (#FFF)</td>
55+
<td style={{ color: "#000", background: "#242526" }}><a href="/img/brand/logo-monochrome.svg" download><img src="/img/brand/logo-monochrome.svg" alt="logo-monocrhome" /></a></td>
56+
<td>For grayscale context</td>
57+
</tr>
58+
<tr>
59+
<td style={{ color: "#FFF", background: "#3193FF" }}>square <br/> (#3193FF)</td>
60+
<td><a href="/img/brand/logo-square.png" download><img src="/img/brand/logo-square.png" height="130" alt="logo-square" /></a></td>
61+
<td>For square boundaries</td>
62+
</tr>
63+
</table>
64+
65+
## Banners & Schemes
66+
67+
Work in progress...
68+
69+
## OG Preview
70+
71+
Work in progress...
72+
73+
## Presentation template
74+
75+
Work in progress...
76+
77+
## See also
78+
79+
- [Discussion (github)](https://github.com/feature-sliced/documentation/discussions/399)
80+
- [History of development with references (figma)](https://www.figma.com/file/RPphccpoeasVB0lMpZwPVR/FSD-Brand?node-id=0%3A1)
81+
- [Rebranding demo](https://rebrand-sliced.netlify.app/en/)

‎i18n/en/docusaurus-plugin-content-docs/current/community/index.mdx

Copy file name to clipboardExpand all lines: i18n/en/docusaurus-plugin-content-docs/current/community/index.mdx
+7-1Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Community resources, additional materials
1717
## Main
1818

1919
import Row from "@site/src/shared/ui/row/tmpl.mdx"
20-
import { StarOutlined, SearchOutlined, TeamOutlined } from "@ant-design/icons";
20+
import { StarOutlined, SearchOutlined, TeamOutlined, VerifiedOutlined } from "@ant-design/icons";
2121

2222
<Row
2323
title="Awesome Resources"
@@ -31,6 +31,12 @@ import { StarOutlined, SearchOutlined, TeamOutlined } from "@ant-design/icons";
3131
to="/docs/community/team"
3232
Icon={TeamOutlined}
3333
/>
34+
<Row
35+
title="Brandbook"
36+
description="Recommendations for FSD's branding usage"
37+
to="/docs/branding"
38+
Icon={VerifiedOutlined}
39+
/>
3440
<Row
3541
title="Contributing"
3642
description="HowTo, Workflow, Support"

‎i18n/ru/docusaurus-plugin-content-docs/current/branding.md

Copy file name to clipboard
+81Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# Рекомендации по брендингу
2+
3+
Визуальная айдентика FSD основана на его ключевых концепциях: `Layered`, `Sliced self-contained parts`, `Parts & Compose`, `Segmented`.
4+
Но мы также стремимся к простой и красивой айдентики, которая бы отражала философию FSD и была бы легко узнаваемой.
5+
6+
**Пожалуйста, используйте айдентик FSD's "as-is", без изменений, но с нашими ассетами для вашего комфорта.** Этот бренд-гайд поможет вам использовать айдентику FSD корректно.
7+
8+
:::caution Совместимость
9+
10+
FSD прежде имел [другую легаси-айдентику](https://drive.google.com/drive/folders/11Y-3qZ_C9jOFoW2UbSp11YasOhw4yBdl?usp=sharing). Старый дизайн не отражал главные концепции методологии. Также это было создано как грубый черновик, который был должен быть актуализирован.
11+
12+
Для совместимого и долгосрочного использования бренда, мы тщательно работали над ребрендингом в течение года (2021-2022). **Чтобы вы могли быть уверенными в использовании айдентики FSD 🍰**
13+
14+
*Но используйте именно актуальную айдентику, не старую!*
15+
16+
:::
17+
18+
## Название
19+
20+
- ✅ **Правильно:** `Feature-Sliced Design`, `FSD`
21+
- ❌ **Неправильно:** `Feature-Sliced`, `Feature Sliced`, `feature-sliced`, `feature sliced`, `FS`
22+
23+
## Эмодзи
24+
25+
Ключевые концепции FSD хорошо отражаются в образе *"Торта"*.
26+
**Поэтому мы используем 🍰 как наше главное эмодзи, так же для более хороших ассоциаций**
27+
28+
> Пример: *"🍰 Architectural design methodology for Frontend projects"*
29+
30+
## Лого & Палитра
31+
32+
FSD имеет несколько вариаций логотипа для разных контекстов, но рекомендовано использовать **primary**
33+
34+
<!-- FIXME: refactor; use as Brand component for? -->
35+
<!-- FIXME: Fix downloading -->
36+
37+
<table style={{ textAlign: "center" }}>
38+
<tr>
39+
<td>Тема</td>
40+
<td>Лого <sub style={{ color: "gray", display: "block" }}>(Ctrl/Cmd + Click для скачивания)</sub></td>
41+
<td>Использование</td>
42+
</tr>
43+
<tr>
44+
<td style={{ color: "#FFF", background: "linear-gradient(135deg, rgba(41,190,220,1) 0%, rgba(81,122,237,1) 100%)" }}>primary <br/> (#29BEDC, #517AED)</td>
45+
<td><a href="/img/brand/logo-primary.svg" download><img src="/img/brand/logo-primary.svg" alt="logo-primary" /></a></td>
46+
<td>Предпочтительно в большинстве случаев</td>
47+
</tr>
48+
<tr>
49+
<td style={{ color: "#FFF", background: "#3193FF" }}>flat <br/> (#3193FF)</td>
50+
<td><a href="/img/brand/logo-flat.svg" download><img src="/img/brand/logo-flat.svg" alt="logo-flat" /></a></td>
51+
<td>Для одноцветного контекста</td>
52+
</tr>
53+
<tr>
54+
<td style={{ color: "#000", background: "#FFF" }}>monochrome <br /> (#FFF)</td>
55+
<td style={{ color: "#000", background: "#242526" }}><a href="/img/brand/logo-monochrome.svg" download><img src="/img/brand/logo-monochrome.svg" alt="logo-monocrhome" /></a></td>
56+
<td>Для чернобелого контекста</td>
57+
</tr>
58+
<tr>
59+
<td style={{ color: "#FFF", background: "#3193FF" }}>square <br/> (#3193FF)</td>
60+
<td><a href="/img/brand/logo-square.png" download><img src="/img/brand/logo-square.png" height="130" alt="logo-square" /></a></td>
61+
<td>Для квадратных размеров</td>
62+
</tr>
63+
</table>
64+
65+
## Баннеры & Схемы
66+
67+
Работа в процессе...
68+
69+
## OG Preview
70+
71+
Работа в процессе...
72+
73+
## Шаблон для презентаций
74+
75+
Работа в процессе...
76+
77+
## См. также
78+
79+
- [Обсуждение (github)](https://github.com/feature-sliced/documentation/discussions/399)
80+
- [История ребрендинга с референсами (figma)](https://www.figma.com/file/RPphccpoeasVB0lMpZwPVR/FSD-Brand?node-id=0%3A1)
81+
- [Демо ребрендинга](https://rebrand-sliced.netlify.app/en/)

‎i18n/ru/docusaurus-plugin-content-docs/current/community/index.mdx

Copy file name to clipboardExpand all lines: i18n/ru/docusaurus-plugin-content-docs/current/community/index.mdx
+7-1Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ pagination_prev: about/index
1717
## Главное
1818

1919
import Row from "@site/src/shared/ui/row/tmpl.mdx"
20-
import { StarOutlined, SearchOutlined, TeamOutlined } from "@ant-design/icons";
20+
import { StarOutlined, SearchOutlined, TeamOutlined, VerifiedOutlined } from "@ant-design/icons";
2121

2222
<Row
2323
title="Awesome Ресурсы"
@@ -31,6 +31,12 @@ import { StarOutlined, SearchOutlined, TeamOutlined } from "@ant-design/icons";
3131
to="/docs/community/team"
3232
Icon={TeamOutlined}
3333
/>
34+
<Row
35+
title="Брендбук"
36+
description="Рекомендации по использованию брендовой айдентики FSD"
37+
to="/docs/branding"
38+
Icon={VerifiedOutlined}
39+
/>
3440
<Row
3541
title="Контрибьютинг"
3642
description="Как начать, Воркфлоу, Помощь и содействие"

‎routes.config.js

Copy file name to clipboardExpand all lines: routes.config.js
+5Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ const SECTIONS = {
3939
shortPath: "/examples",
4040
fullPath: "/examples",
4141
},
42+
// FIXME: Temp, use later root "/" folders without "docs" redundant prefix
43+
BRANDING: {
44+
shortPath: "/branding",
45+
fullPath: "/docs/branding",
46+
},
4247
};
4348

4449
/**

‎src/app/index.scss

Copy file name to clipboardExpand all lines: src/app/index.scss
+8Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,3 +216,11 @@ iframe {
216216
display: block;
217217
}
218218
}
219+
220+
a[download] {
221+
transition: 0.25s;
222+
223+
&:hover {
224+
opacity: 0.7;
225+
}
226+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.