Style Guide
Our style guide used to build the <Brand Name> brand.
Introduction
Welcome to the style guide for your website. You can use this page to quickly make changes to things such as fonts, text sizes, colors, buttons, and more. These changes will then be applied across your website.
Your style guide is not viewable to the public, and can only be accessed with the provided password that you received during file handoff.
If you have any questions about this style guide or your website in general, then please do not hesitate to the design team - example@domain.com
Logo
All logo assets used in the web UI and design system.
Colors
The different weights of brand and neutral colors used on the website. Each color can be edited in the Global Swatches panel.
Typography
The different text sizes and styles used throughout the web UI.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body 1 (Large Paragraph)
Body 2 (Medium Paragraph)
Body 3 (Small Paragraph)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
UI 1
UI 2
UI 3
Rich Text
This is a Heading.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Here is another title example.
- Lorem ipsum
- Lorem ipsum dolor sit amet
Columns
The 12 column grid system to make it easy to align sections across different screen sizes. This grid system uses flexbox and percentage widths to create a column to be used for general layouts. The columns include built-in responsiveness with added classes for each breakpoint. (Desk-12, Tab-3, Mob-2 etc.)
Grids
The different text sizes and styles used throughout the web UI. This grid system should be used for more complex or more modular layouts that go beyond the limitations of a simple flexbox grid.
Spacers
Spacer elements using the 8-pt grid give sections and components room to breathe. These can be used inside of components or as substitutes for margin and padding on elements.
Icons
We use Material Icons. We’ve gone ahead and curated a selection from the library to use in the web UI. The default size is 32px and the default color is Gray 90.
Icon Library
Icon Sizes
Icon Color
Forms
Tabs
Resources
File Downloads
Logo Files
Color Swatches
Font Files
Image Library
Iconography
Visual Assets
Online Style Guide
File Exports
Exporting Image Assets and SVGs
Speaking about image assets: You can export resources globally or locally depending on your needs. If you’re looking to export all the assets that were marked as exportable on a file or frame, the Export Panel (Ctrl/Cmd + Shift +.E) is the way to go.
While this option can save you a lot of time, there are instances where you may need to download an item from a specific layer, i.e. an icon or a thumbnail. Again this is as easy as selecting and right-clicking on the desired layer/s.
In no specific order you can:
Copy an item on the clipboard as CSS, SVG, or PNG
Selecting ‘Copy as’ after right-clicking on a layer. (SVG code paste; PNG is desktop-app only.)
Export a full-res non-image
Click the name of the image on the File Name field — a blue label on Code Panel — and make sure to select the layer that uses the image as fill. (Any effects or cropping applied on the layer will be ignored.)
*End of excerpt
Export Guidelines
- Do not export assets partially. Make sure the asset is not missing anything important (i.e. missing the center circle of the Instagram logo) before implementation.
- Do not export cropped shapes. Make sure to export graphic elements such as shapes or other custom graphics outside of a parent frame before exporting. Otherwise, Figma will crop the shape based on its position in the parent frame and it would not be suitable for implementation into the live product.
- Name each asset with a relevant name related to a particular asset. Try not to export shapes by their default name (i.e. Ellipse 10, Rectangle 50 etc.) This will help with file organization later down the pipeline.
- Try to always export as SVG format especially if the asset in question is already in a vector format. Unless you are re-exporting a bitmap-type asset (photography), try to either copy the item as SVG (see above) or export as an SVG in the export panel.
- Try not to re-export already existing icons and images. Use the original source files or icon library if available. If using an icon from an icon library, use an icon font (if available) or use an already exported SVG from the official icon library. Only export photography if the photo is inside a custom shape. Otherwise, use the photography from the photo library folder.
Glossary
Logo
A specific mark that is a combination of letters, symbols, or graphics used to identify a brand in a single instance. Logos often embody the core values of a brand and use the brand colors.
Color Palette
A combination of colors that are intended to be used together. In this case the colors are a key part of the branded experience and help form a sense of place.
CMYK
Abbreviations for the colors Cyan (C), Magenta (M), Yellow (Y), and Black (K), the inks used in four-color printing. When these inks are combined in they can produce a wide spectrum of color.
RGB
Abbreviations for the colors Cyan (C), Magenta (M), Yellow (Y), and Black (K), the inks used in four-color printing. When these inks are combined in they can produce a wide spectrum of color.
Pantone (PMS)
Pantone Matching System (PMS) is the world standard for the specification of printed inks between designers and printers.
Kerning / Letter spacing
Adjustment of spacing between a pair of type characters.
Leading / Line Height
The space between lines of type. It is generally measured from baseline to baseline and expressed in points.
Typeface / font family
In typography, a typeface (also known as font family) is a set of one or more fonts each composed of glyphs that share common design features. Each font of a typeface has a specific weight and/or style.
Font
A collection of letters, numbers, punctuation, and other symbols used to set text (or related) matter. Although font and typeface are often used interchangeably, font refers to the physical embodiment (whether it’s a case of metal pieces or a computer file) while typeface refers to the design (the way it looks). A font is what you use, and a typeface is what you see.
Serif & Sans serif
A short line or finishing stroke that crosses or projects from stems or strokes in a character. Serifs have many shapes, including hairline, bracketed, wedge, and slab. Fonts without serifs are called “sans serifs.”
Monospaced
Characters designed to all have the same width, ignoring their normal proportions. Wide characters have an unusually narrow design, while narrow characters have lots of white space on both sides. This allows for neatly setting columns of text and tables, for example in programming code, accounting, etc.
X-Height
The height of the lowercase letters, disregarding ascenders or descenders, typically exemplified by the letter x. The relationship of the x-height to the body defines the perceived type size. A typeface with a large x-height looks much bigger than a typeface with a small x-height at the same size.
Point size / Font Size
The point size or font size of a typeface refers to the size of the body, the imaginary area that encompasses each character in a font. This is why a typeface with a large x-height appears bigger than typeface with a small x-height at the same point size.
Lockup
The fixed arrangement of one, two, or more graphic elements — such as a logo and web address etc. — to create a single unit.
