Design System
Keep logos, colors, fonts and brand guidelines on a page you can share.
Every Design System has a Brand section, also called a Brand Kit: logos and other files, colors, typography, and written guidelines, voice and messaging. It has its own page to share, such as with the press, with downloads of the files you choose. Store, Proposals and Social Media use its colors, fonts and images.
Get started freeLogos, colors and typography
A Brand section starts with Logos, Colors, Typography, Assets, Guidelines, Voice, Messaging, Links and Contact. Click a name, description or value to change it, and the change saves at once. Each Design System has one brand, so a team with several brands creates a Design System for each.
- Logos and assets
- Each variant, such as Primary logo or White wordmark, can hold several files, so the PNG and SVG of one logo are kept together. It can note recommended usage, a light or dark background, a minimum width, clear space and misuse.
- Colors
- A name and a HEX value. RGB and HSL are calculated from it, and HEX or RGB copies with a click. Role, notes and CMYK are optional.
- Typography
- Entries for roles such as Heading or Body, with the font family, weight, style, a source address and notes. Font files are optional downloads and are not loaded by the page.
- Written sections
- Guidelines, voice, messaging and contact information, written in Markdown. Contact information is only what you enter; your account email is not added.
- Sections of your own
- Text, asset, color, typography or link sections, such as Screenshots, Social media or Press images.
Files
Images come from Your images or are uploaded through the image picker. Other files can be SVG, PDF, ZIP, WOFF, WOFF2, TTF or OTF, up to 25 MB each.
- SVG
- Up to 2 MB, with no scripts, external references or style blocks. Styling goes in element attributes.
- Kept in your library
- The Brand section refers to files in your libraries instead of copying them. Removing a logo or a section, or deleting the Design System, keeps the files.
- Replace
- Replacing a source file keeps the variant's label and guidance.
- Formats
- Downloads are the files you upload, in their own formats.
The shared brand page
The brand has its own sharing setting, Share Brand Kit, separate from the Design System's, and its own stable address. It is Private, Unlisted or Public. A private brand page opens only for members of the owning team; anyone with the address can open an unlisted or public one without signing in, and search engines are asked not to index unlisted pages.
- What appears
- A section's Public page switch and a logo's, color's or file's Show item switch must both be on. New sections and their contents start hidden, and so does Voice.
- Preview public page
- Shows only what is marked for sharing, even while the page is private.
- Downloads
- A file marked Downloadable gets its own download link and is included in Download brand assets, a ZIP of up to 250 MB of the downloadable files in shared sections.
- View-only images
- Without Downloadable, an image has no download controls. It can still be saved from a browser, so the setting is not copy protection.
Where Magpie uses the brand
- Store
- The Store's accent color can be one of the colors in the team's Brand Kits, and its fonts can be Brand Kit fonts Magpie can show, such as Inter, Lora, Playfair Display or a common system font. Uploaded font files are not used in the Store.
- Proposals
- Choosing a Brand Kit for a proposal takes its first color and the fonts Magpie has from its typography.
- Social Media
- Logos and images in the Brand section of the team's Design Systems can be added to posts.
- Design System exports
- The Markdown export of the whole system includes the brand's colors, typography and logos, and the ZIP includes its downloadable files.
Put your brand in one place.
Create a Magpie account, open Design System, create a system and open its Brand section.