styleguide

MENU
TypographyHeadingText ClassButtonsColorsRich Text
Typography

Sonicdrive's styleguide features a minimalist design by using a single, carefully selected font. This font is chosen to create a professional and sophisticated aesthetic, ensuring the website maintains a consistent and cohesive appearance throughout.

Syne

The primary font is Syne. Designed by Bonjour Monde, Lucas Descroix, George Triantafyllakos.
More info here: https://gitlab.com/bonjour-monde/fonderie/syne-typeface‍

You can download the webfont in the link bellow.
Please use the WOFF2 format for better performance.

Download Syne
Heading, paragraph and list
Heading 1

Sonicdrive new album

Heading 2

Sonicdrive new album

Heading 3

Sonicdrive new album

Heading 4

Sonicdrive new album

Heading 5
Sonicdrive new album
Heading 6
Sonicdrive new album
paragraph

Church-key taxidermy locavore waistcoat mug gatekeep wayfarers tonx cleanse. Fixie adaptogen listicle cred axe beer. Truck tattooed migas blue synth sustainable shabby tousled roof williamsburg. Tile jean pabst literally vaporware big bun. Craft it beard mixtape roof bun vape art book. Hella a food tattooed godard denim fixie chicken knausgaard. Bird xoxo.

List
  • Experimental
  • Sci-Fi Soundtracks
  • Analog experiments
  1. Experimental
  2. Sci-Fi Soundtracks
  3. Analog experiments
Text Combo class
font size
Tiny
Small
XSmall
XXSmall
Medium
Large
XLarge
XXLarge
Huge
Display
font weight
Regular
Medium
Bold
ExtraBold
Capitalize
Allcaps
Capitalize every word
lowercase
Align
align-center
align-right
align-left
Background colors
primary-light
secondary-light
secondary-light
secondary-light
Link text
This is some text inside of a link block
Buttons

Sonicdrive's styleguide adopts a sleek and modern design by utilizing a single font. This font is carefully selected to achieve a professional and sophisticated aesthetic, ensuring that the website exudes a consistent and cohesive look throughout.

Text link buttonText link button
Round buttonGhost button
Round buttonGhost button
Colors variables
Backgrounds
primary-dark
secondary-dark
tertiary-dark
primary-light
secondary-light
secondary-light
Text
OnDarkPrimary
OnDarkSecondary
OnDarkTertiary
OnLightPrimary
OnLightSecondary
OnLightTertiary
Extra
blue-link
cart-notification
store-banner
Rich Text

Heading 1

Juice bottle freegan umami quinoa air banjo snackwave fund marfa. Health jomo authentic hashtag subway bruh it. Lo-fi polaroid unicorn I'm I'm shorts. Vape mustache humblebrag meditation single-origin. Forage mixtape whatever blog truck them small. Pop-up church-key bitters plz artisan next shoreditch. Authentic raw pinterest af glossier williamsburg 8-bit. Mumblecore readymade 8-bit shaman banh freegan. Vexillologist dreamcatcher enamel drinking fit ascot vinyl chartreuse. Paleo dollar heirloom dollar health kitsch chips mumblecore heirloom.

Heading 2

Cloud sriracha flannel ipsum bespoke cliche. Level chips 8-bit praxis pork hot occupy vhs swag dreamcatcher leggings semiotics. Narwhal butcher offal bread copper fixie pinterest air diy. Locavore brunch bodega cronut typewriter. Pabst santo trust flannel humblebrag vinyl.

Heading 3

Image example
Caption Lorem ipsum

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 4

Heading 5
Heading 6
Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3
  • Item A
  • Item B
  • Item C