Brainwave 2023

Girl in yellow sweater looking at cell phone

Welcome

Brainwave serves as a streamlined design framework aimed at enhancing website development for optimal performance and user experience.

By offering a cohesive framework of tools, guidelines, and resources, Brainwave significantly streamlines the development process while ensuring top-notch quality, user engagement, and seamless functionality.

This is also just a test of Eric playing with the new design system.

Just a test button

Typography

H1

H2

H3

H4

H5
H6
Subtitle
Subtitle 2
Body
Body 2
Caption
Disclaimer
Overline
Rich text still needs to be updated

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block quote
  1. Item 1
  • Item A
Text link

Bold text

Emphasis

Superscript

Subscript

Back to top

Colors

Click on a color to see information in the style panel

Primary color

Saffron

Tints

Shades

Secondary warm colors

Clay

Tints

Shades

Blush

Tints

Shades

Plum

Tints

Shades

Secondary cool colors

Ocean

Tints

Shades

Sky

Tints

Shades

Pistachio

Tints

Shades

Bismark

Tints

Shades

Back to top

Divs and Quick Stacks

These help with layout and style

A Div block is the most basic and versatile element used when building a website. Buttons, Containers, and Sections are all Div blocks with certain extra properties. For each Talkiatry page, the order goes from Body-page > Section > Container > Div > into more Divs or Quick Stacks. Both Divs and Quick Stacks are elements that hold pieces of content together, allowing us to adjust layout styles without affecting the content it holds.
The Quick Stack element provides structure for simple to complex, responsive designs. It uses the grid display property and includes cells made of divs, which are set to flex by default. The element includes 8 presets, which allow you to place content in different arrangements. There are several classes for Divs and one class for Quick Stacks. See "Classes" for more information.

Back to top

Classes

Titles and descriptions

Class title

Description

Body
The class style for body text.
Body-page
The Body element is the base page that nests all content. Not to be confused with body text, a class "Body-page" was created to make style changes to the Body element without affecting the body text.
card-copy-div
A Div element, placed in a card-div, that contains padding for the card on all edges, adjusting for all breakpoints
card-div
A Div element that provides the white background, rounded corners, and drop-shadow for a card
card-image-div
A Div element, placed in a card-div, that allows images to expand to the edges of a card
Container 848
A container element with predefined max width of 848 pixels.
Content
A section element that nests other elements, below the Hero.
content-div
A Div element for nesting content in Divs and/or Quick Stacks; these are where to put secondary spacing classes, such as mb-1, and where to put ID tags if page links are needed.  
content-qs
A Quick Stack element with predefined grid layout; can be used to separate text, images, cards, etc.
CTA
A section element showing a call to action.
div
A generic div with block layout and 100% minimal width and height; can be used inside of Cells (because Cells are flex layouts)
h1, h2, h3, h4, h5, h6
The class styles for headlines. Note: these classes adjust the font size by breakpoint. Example, h1 is 59pt on desktop, 48pt on tablet, and 40pt on mobile.
Hero
A section element at the top of the page that is the main focal point, listing the H1 headline.
Illustration hero
An image element for the Hero that is set for absolute positioning; note, a secondary class using the page /slug or title should be added before changing the image or any styles.
mb-1, mt-2, p-1, relt--2
All can be secondary classes to add space to text or elements, or adjust position. Most important is the numbering system: 1=8px, 2=16px, 3=24px... each number increases by 8px. Example: relt--2 is a secondary class to Container 848, making it's position relative -16px so that the content can overlap the Hero section by 16px. Also, mb-1 is a secondary class that adds 8px of margin to the bottom of an element.
m= margin, b=bottom, t=top, r=right, l=left, p=padding, rel=relative, --=negative
paper-div
A Div element that nests content when not using a card-div.
Back to top

Components

Components (formerly called, "symbols") are ready-to-use global elements that can be added to any page. When edits are made to a component, it changes on every page that contains it; therefore, if a component is used--which is not meant to be a global element--then right click on the component and select "unlink" before editing, which will unlink it from global features (keeping the component as is within the components library or any other page, but allowing it to be free to edit on the current page you are working on).

Card 1-1c

Headline in H5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button (default)

Card 1-2c

Headline in H5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button (default)
+ more

Card 1-2c image

Headline in H5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button (default)

Card 1-3c

Headline in H5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Headline in H5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Headline in H5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card 2-1c

Headline in H5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button (default)

Headline in H5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button (default)

Card 2-1c image

Headline in H5

Button (default)

Headline in H5

Button (default)

Card 3-1c

Headline in H5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button (default)

Headline in H5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button (default)

Headline in H5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button (default)

Blogs: HTML embed class styling

Headline copy styling H4

Button Text
Back to top

Need to reach your clinician?

You can message your psychiatrist or therapist any time through healow. You’ll hear back within 3 business days. Log in or download the app from Apple or Google.

If you or someone you know is in a crisis, call 911 or the Suicide and Crisis Lifeline at 988.