Skip to main content

Branding Guidelines

FSD's visual identity is based on its core-concepts: Layered, Sliced self-contained parts, Parts & Compose, Segmented. But also we tend to design simple, pretty identity, which should convey the FSD philisophy and be easy to recognize.

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.

FSD had another legacy identity before. Old design didn't represent core-concepts of methodology. Also it was created as pure draft, and should have been actualized.

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 ๐Ÿฐ

But prefer namely actual identity, not old!

Title

  • โœ… Correct: Feature-Sliced Design, FSD
  • โŒ Incorrect: Feature-Sliced, Feature Sliced, FeatureSliced, feature-sliced, feature sliced, FS

Emojii

The cake ๐Ÿฐ image represents FSD core concepts quite well, so it has been chosen as our signature emoji

Example: "๐Ÿฐ Architectural design methodology for Frontend projects"

Logo & Palette

FSD has few variations of logo for different context, but it recommended to prefer primary

ThemeLogo (Ctrl/Cmd + Click for download)Usage
primary
(#29BEDC, #517AED)
logo-primaryPreferred in most cases
flat
(#3193FF)
logo-flatFor one-color context
monochrome
(#FFF)
logo-monocrhomeFor grayscale context
square
(#3193FF)
logo-squareFor square boundaries

Banners & Schemes

banner-primary banner-monochrome

Social Preview

Work in progress...

Presentation template

Work in progress...

See also