Styleguide.

Soultrane Theme styleguide features a minimalist design by using two carefully selected fonts. These fonts are chosen to create a professional and sophisticated aesthetic, ensuring the website maintains a consistent and cohesive appearance throughout.

Color Variables

The theme use the local variables system.
You can modify the colors directly in the webflow’s local variables settings.

foundation

PrimaryDark

SecondaryDark

TertiaryDark

PrimaryLight

SecondaryLight

TertiaryLight

StoreBtn

StoreSale

Typography

Soultrane’s Theme styleguide features a minimalist design by using two carefully selected fonts. These fonts are chosen to create a professional and sophisticated aesthetic, ensuring the website maintains a consistent and cohesive appearance throughout.

Primary font

DM Sans

Designed by Colophon Foundry

DM Sans is a low-contrast geometric sans serif design, intended for use at smaller text sizes.DM Sans supports a Latin Extended glyph set, enabling typesetting for English and other Western European languages. It was designed by Colophon Foundry (UK), who started from the Latin portion of Indian Type Foundry's Poppins.In May 2023 DM Sans is updated, expanding the coverage of the weight range to Thin & ExtraBlack (100–1000 weight range) along with a new optical size axis.

Download DM SANS
Secondary Font

DM Mono

Designed by Colophon Foundry

DM Mono is a three weight, three style family designed for DeepMind. DM Mono was loosely based off of DM Sans, with a reduction in contrast and less geometric proportions.The type design and font development was commissioned from Colophon Foundry, with Creative Direction from the DeepMind team.To contribute, see github.com/googlefonts/dm-mono.

Download DM Mono

Heading, Paragraph and List

Heading 1

Astra Kulturhaus - Berlin

Heading 2

Astra Kulturhaus - Berlin

Heading 3

Astra Kulturhaus - Berlin

Heading 4

Astra Kulturhaus - Berlin

Heading 5
Astra Kulturhaus - Berlin
Heading 6
Astra Kulturhaus - Berlin
Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo libero vitae erat.
enean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

List
  • Ramps raclette chicharrones ethical disrupt blue
  • batch distillery. Pok 3-moon helvetica chia plaid lumbersexual
  • dreamcatcher tattooed shoreditch. Farm-to-table tote
  1. Ramps raclette chicharrones ethical disrupt blue
  2. batch distillery. Pok 3-moon helvetica chia plaid lumbersexual
  3. dreamcatcher tattooed shoreditch. Farm-to-table tote
Block quote
“ Knausgaard semiotics bag deep edison. Actually celiac etsy sus selfies succulents.”

Combo Class Text

text size

Size-Huge

Size-H1

Size-H2

Size-H3

Size-H4

Size-H5

Size-H6

Small
‍Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
enean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

X-Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
enean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Link
this is a link in my paragraph
Capitalize

lowercase

Capitalize every word

All Caps

Rich Text

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. 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.

Type image caption here (optional)

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.

‍

“ Knausgaard semiotics bag deep edison. Actually celiac etsy sus selfies succulents.”

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Buttons

Buttons
Default buttonGhost button

Social & Streaming

Icons

Forms

form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.