Styleguide

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

Figma file included with your purchase. Email us with your receipt.

Colors Variables

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

PrimaryDark
SecondaryDark
TertiaryDark
PrimaryLight
SecondaryLight
TertiaryLight
Accent 1
Accent 2
Accent 3

Typography

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

Secondary font
Inter

Designed by Rasmus Andersson

Inter is a variable font family carefully crafted & designed for computer screens.Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.

Heading

Heading1

Heading2

Heading3

Heading4

Heading5
Heading6
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 diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

BlockQuote
“ Knausgaard semiotics bag deep edison. Actually celiac etsy sus selfies succulents.”
List
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  1. Lorem ipsum
  2. Lorem ipsum
  3. Lorem ipsum

Combo Class Text

Text size
XL
L
M
S
XS
XXS
Body Large
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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body 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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body XSmall
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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Capitalize
lowercase
Capitalize every word
all caps
text align
Left align
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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Center align
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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Right align
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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Justify
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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
1fetch('https://Orvimo.com/auth/login', 
2{
  method: 'POST',
  
3headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    
    username: 'emilys',
    password: 'emilyspass',
    expiresInMins: 30, // optional, defaults to 60
  }),
  credentials: 'include' // Include cookies (e.g., accessToken) in the request
})
.then(res => res.json())
.then(console.log);

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.

Block quote

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

1// Target the preloader element
2const preloaderElement = document.getElementById('preloader');
3
4// Set the amount of time to wait in milliseconds
5// Test by changing to 1 * 60 * 1000 for 1 min
6const waitTime = 24 * 60 * 60 * 1000; // 24 hours
7
8// Check if the local storage item is present and valid
9if (!localStorage.getItem('preloaderShown') || Date.now() - localStorage.getItem('preloaderShown') >
10  waitTime) {
11  // Show the preloader element
12  preloaderElement.style.display = 'block';
13
14  // Store the current timestamp in local storage
15  localStorage.setItem('preloaderShown', Date.now());
16} else {
17  // Hide the preloader element
18  preloaderElement.style.display = 'none';
19}