Socialroots Branding Deck
For our full branding guide, with brand rational, voice, tone, and more, please see this slide deck. Only the styling guidelines that impact this blog site are kept here.
WEBSITE STYLES
Fonts
Our Font on this site is Poppins.
Headings
When creating a header, all you need to do is add a # before your header or use the contextual toolbar. You can keep adding up to five # in a row to make the headers smaller.
Heading one
Heading two
Heading three
Heading four
Heading five
When writing a post, the title should be the only Heading one on the page, for SEO clarity. All sections within it should start with Heading two size. If you want an additional 'Heading One', use heading two with all caps. (check with B)
Links
If you paste in a URL, like https://socialroots.io - it'll automatically be linked up. But if you want to customize your anchor text, you can do that too! Here's a link to our website.
Quoting
If you want to add a quote, you just need to add a > to the beginning of the line or use the contextual toolbar, and it will put it into the quote format.
The human race is challenged more than ever before to demonstrate our mastery, not over nature but of ourselves.
- Rachel Carson
Page and Post Settings
With the Bookmark card you can present links in a much richer format. If the URL points to a page with right meta information it can show the page title, excerpt, author, publisher and even a preview image.
can we activate these? https://ghost.org/changelog/bookmark-cards/
Images
Before choosing an image, please explore our image library to get a sense of the feeling we want to evoke. Don't feel constrained to pick one of these, but do try to match the color vibrancy, feeling, and quirkiness.
Upload images using the Image card. Hero images require attention to sizing.
add sizing specs from https://www.foregroundweb.com/image-size/
https://www.lauraleeflores.com/blog/header-image-sizing-guide
Please use 2000 × 1215 size images for this main page image. [SEE SIZING RECS, ABOVE?]
Inline images can be displayed in different sizes: normal, full, and wide. They have the option to add captions if needed.
The gallery card allows display of up to 9 images at a time, all of which are responsively optimized and organized to look their best no matter how many images you add or remove.
ADD EXAMPLES
Videos
ADD
List Types
Unordered list
- Item number one
- Item number two
- Nested item one
- Nested item two
- Item number three
Ordered list
- Item number one
- Item number two
a. Nested item one
b. Nested item two - Item number three
Highlighting
Highlighting text can help bring important information immediately to the reader's attention. When creating a highlighting text, all you need to do is add a == before and after your text in a Markdown card.
Tables
This theme supports responsive tables that will display a horizontal scroll bar if the screen is too small to display the full content.
Code
Forms