Interested in bebop and atlanta against cancer merch?
Shop here now! 100% goes to Bebop Cancer Foundtion initiatives!
bebopcancergiftshop.com
May 15th - 21st
San Francisco + Online
schedule
speakers
location
sponsors
news
buy now
style guide
A central guide for common components and styles used in Synapse.
Colors
Primaries and grays controlled by the Global Swatch feature.
dark
#000000
white
#FFFFFF
white - Faded
rgba(255,255,255,0.2)
Typography
Headings, body and other common text elements.
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Large Text
Large Link
Body Text
Body Link
Small Text
Small Link
Buttons
Component, text style and size variations
default
Small
small arrow
Form Inputs
General style and state variations for text inputs.
Input
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text Area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Selectables
Styling for checkboxes, selects and radios.
I have read and agree to the
Privacy Policy
Radio
Choose an option
First Choice
Second Choice
Third Choice
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Style Guide
(01)
Color Palette
(02)
Text Style
Banner Heading
H1 - Heading - 68
H2 - Heading - 48
H3 - Heading - 40
H4 - Heading - 36
H5 - Heading - 28
H6 - Heading - 20
(02)
Text Style
Banner Heading
H1 - Heading - 68
H2 - Heading - 48
H3 - Heading - 40
H4 - Heading - 36
H5 - Heading - 28
H6 - Heading - 20
(03)
Typography
Regular Paragraph
Paragraph - Inter Tight | 18px font-size / 160% line-height / Regular
Small Paragraph
Paragraph - Inter Tight | 16px font-size / 160% line-height / Regular
(03)
Typography
Regular Paragraph
Paragraph - Inter Tight | 18px font-size / 160% line-height / Regular
Small Paragraph
Paragraph - Inter Tight | 16px font-size / 160% line-height / Regular
(04)
Button & Components
Work with us
Work with us
Work with us
Work with us
Work with us
Work with us
Contact Us
Contact Us
Contact Us
%20(1).svg)
.svg)