Brand Styleguide

Logo

The StoryKeep logo is the wordmark “STORYKEEP” set in a custom designed font. It is used as the primary brand mark across all touchpoints.

Variant	Usage
Logo Black (`logo-black.png`)	Light backgrounds
Logo White (`logo-white.png`)	Dark backgrounds

Always use the correct variant for the background it sits on. Do not recolor or distort the wordmark.

Icon — “The Big O”

The StoryKeep icon is a stylised O with an underline, derived from the O in the logo wordmark. Internally it is referred to as “The Big O”.

Usage: favicon, app icon, QR code mark, social media avatar, and any context where the full wordmark would be too large.

Colors

Three named brand colors define the StoryKeep palette:

Name	Hex	RGB	Usage
Primary	`#946894`	rgb(148, 104, 148)	Buttons, links, headlines, subtitles
Hover	`#d4b2d6`	rgb(207, 180, 212)	Menu item hover states, decorative lines
Grey Background	`#edeff0`	rgb(237, 239, 240)	Text block backgrounds, surface areas

Typography

Font Families

Family	Source	Role
Raleway	Google Fonts	Headings, buttons, menus
Noto Sans	Google Fonts	Body text, paragraphs, footer
Roboto	Google Fonts	Site title only

Headings (Raleway, Normal weight)

Level	Desktop	Mobile	Line Height	Letter Spacing
H1	64px	40px	default	0.01em
H1 Extra Large	150px	60px	1.2em	default
H2	45px	34px	1.4em	default
H3	32px	25px	1.4em	default
H4	25px	22px	1.4em	default

Paragraphs (Noto Sans, Normal weight)

Variant	Desktop	Mobile	Line Height (Desktop)	Line Height (Mobile)	Letter Spacing
Normal	16px	16px	24px	22px	0
Small	13px	13px	24px	22px	0
Large	22px	18px	24px	22px	0

Buttons (Raleway, Normal weight, letter-spacing 0.2em)

Size	Font Size
Large	18px
Medium	16px
Small	14px

Element	Font	Weight	Size (Desktop)	Size (Mobile)	Letter Spacing
Main Menu	Raleway	Bold	16px	16px	0.01em
Site Title	Roboto	Normal	24px	22px	0.02em
Footer	Noto Sans	Normal	14px	14px	default

Quick Reference

/* Brand colors */
--storykeep-primary: #946894;
--storykeep-hover: #d4b2d6;
--storykeep-grey-bg: #edeff0;

/* Font stacks */
--storykeep-font-heading: "Raleway", sans-serif;
--storykeep-font-body: "Noto Sans", sans-serif;
--storykeep-font-title: "Roboto", sans-serif;