Study Together
Style Guide
Typography
Use Permanent Marker for branding. The handwriting font is playful and reminiscent of the physical note-taking and annotation of students.
Use Lexend for headings and body copy. Lexend fonts were created to reduce visual stress and so improve reading performance, initially with dyslexia and struggling readers in mind, which will be extra helpful for users accessing study materials.
Color
Primary green should be used for branding and primary UI elements.
Secondary coral is used for important actions, like buttons.
Tertiary yellow is used for less important actions, such as liking a post.
Light neutral is used for background.
Dark neutral is used for most text elements.
Brand Icon & Icon Set
Icon with wordmark: Used on splash pages. Logo is 160px. 32px between logo and wordmark. At least 16px margins around image.
Large icon: 160px with at least 16px margins around.
Medium icon: Used at the top of onboarding pages. 72px with at least 16px margins around.
Small wordmark: Used in top bar of mobile app pages. At least 8px margins around text.
Iconography
Style Rules
Frame 24x24
Stroke 2px
Corners 1px
Filled, except for incomplete social interactions
Colors
#1E221F
#FFFFFF
#568366
#FB6E52
#FFCE55
Imagery
Images focus on studying, technology, and human connection. They are high contrast and incorporate the green, coral, and yellow of the brand color palette. Images of groups are either tightly cropped or lend a sense of architectural brightness and structure. Profile images are tightly cropped.
UI Elements
Buttons
Button height is 40px, with a minimum length of 162px, and a corner radius of 100.
Hovered state indicated by shadow, pressed state by ripple, and disabled by transparency.
Text boxes
Text box height is 56px.
Label uses body 3 text and is 12px from left edge of text box with corner radius of 4. Fill matches container surface color and
Focused state is indicated by primary green and caret.
List item
List item height is 56px.
Hovered state indicated by grey transparency
Cards
Cards are white with a corner radius of 8.
Chips
Chip height is 32px. Width hugs the vertically centered label with 8px margins.
Containers
Containers have 12px margins at top and bottoms.
Label uses body 3 text and is 12px from left edge of text box with corner radius of 4. Fill matches container surface color and
Messaging
Messaging bubbles have a corner radius of 28, except in the lower right or left corner, where the radius is 8.
