Styleguide
Ooto 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.
Typography
Designed by Colophon Foundry
A beautiful geometric sans: The official typeface for brand automation company outfit.io. Inspired by the ligature-rich outfit wordmark, Outfit.io is delighted to release it's own type family. The Outfit typeface links the Outfit written voice to Outfit product marks; on brand by default.In 2023, the font has been updated, offering a more expanded language support.
Designed byAndrés Briganti,Mateo Zaragoza,Guillermo Rauch,Evil Rabbit,José Rago,Facundo Santana
Geist Mono is a monospace typeface that prioritizes readability and seamless integration into coding environments. It is complemented by its sans-serif counterpart,Geist.Created by Vercel in collaboration with Basement Studio, Geist fonts embody their design principles of simplicity, minimalism, and speed, drawing inspiration from the renowned Swiss design movement. With precision, clarity, and functionality at its core, Geist enhances the visual experience of developers and designers, empowering them to effectively communicate their ideas.
Heading1
Heading2
Heading3
Heading4
Heading5
Heading6
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.
“ Knausgaard semiotics bag deep edison. Actually celiac etsy sus selfies succulents.”
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
Combo Class Text
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.
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.
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.
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.
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.
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.
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
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
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}