welcome
Devsonic is a Medium Rare template, explore more designs at mediumrare.shop

Getting Started

This guide covers the basic usage of the template as well as an overview of the template structure.

Blank Starter Template

Inside the "Template" directory, you'll find a page titled "Blank Starter Template". This template includes a navigation bar and a footer - the ideal starting point for your pages.

1. Duplicate the Blank Starter Page template

Note: Be sure to change the Parent Folder to the desired location.

2. Copy and paste blocks to the newly created page:

Copy Sections from any page, then paste them into the body of your newly created page. Also you may copy sections from any page listed on the main landing page.

Style Guide

The Style Guide page demonstrates the display of all base elements found in the template and is a good place to start familiarising yourself with the template.

You'll also find a section demonstrating how to correctly use the associated utility classes.

Editing Typography Styles

Setting heading styles

Instead of using classes, you must click the header then in the Selector drop-down where you would type in the class name, select “All H1 Headings” then make your change.  Same goes for all base heading elements. Click the element, choose “All heading 5”, then any changes you make to that will be reflected across all in the site.

Setting Body Text and paragraph styles

Follow the same procedure for body text and paragraphs - which are specified on the Body element.  Select the body element, and from the Selector dropdown, choose “Body (All Pages)” and change the typography settings for that element.  These styles then flow through to the paragraphs and other generic text elements in the site.

Grids

Content is structured using the CSS grid layout property and uses various Gap modifier classes to set the desired amount of spacing between grid items. This spacing is based on the base line height unit (24px), as such when you see a class such as "Gap 2" the "2" in this case will mean that the grid gap is 48px, as this is 2 times the base line height unit of 24px. Note: the default space between both the Columns and Rows classes is 24px.

The class reference for grids is as follows:

  • Columns - this class will set the grid layout so that children are structured in columns.
  • Rows - this class will set the grid layout so that children are structure in rows.

Modifier classes are as follows:

  • Gap 0.75 - The gap between grid items will be 18px
  • Gap 1.5 - The gap between grid items will be 36px
  • Gap 2 - The gap between grid items will be 48px
  • Gap 3 - The gap between grid items will be 72px

Containers

The template uses 5 container sizes to house the contents in most sections. For your convenience, you can use these classes to easily contain content in your sections:

  1. Container - XS: This container limits content to 388px
  2. Container - S: This container limits content to 503px
  3. Container - M: This container limits content to 618px
  4. Container - L: This container limits content to 848px
  5. Container - XL: This container limits content to 1078px

Additionally, use the class Align Center to align the container in the center of its parent element.

Back To Top Button

Ensure that the Back To Top Button symbol is the first element inside the body.

The Back To Top Button symbol.

Then, ensure the page has a Page Scrolled interaction with the Hide Back To Top Button interaction activates when the page scrolls up, and the Show Back To Top Button interaction activates when the page scrolls down.

The Page scrolled interaction

SVG Icon & SVG Divider Colors

Unfortunately Webflow does not allow dynamic coloring of SVG icons and dividers. To change the icon or divider color from the default:

  1. Download the icon SVG file
  2. Open the SVG file in a text editor
  3. Change the hex value to your desired color
  4. Save, and reupload the icon.

Custom Code

Inside the Project Settings, in the Custom Code tab you'll notice some style code has been added to the head of each page:

Font Rendering Custom Code

This code is to ensure that the text rendering is smooth and consistent across all browsers. It does not require any action on your part.

More Information

For further information, please consult the Webflow documentation or reach out to us via the our support page.

Your Brand’s Critical First Impression

Milliseconds Matter: Users form an opinion about your website in just 50 milliseconds. This can decide if they stay or leave.
Generic Brands Get Overlooked: Brands that use custom content are preferred by 78% of consumers, while generic brands (which is around 99%) fail to make a memorable impact.
Design Drives Perception: A staggering 94% of first impressions are based on design, with poor visuals creating distrust instantly.
In today’s digital world, you have mere milliseconds to captivate your audience. A generic, uninspired brand presence leads to missed opportunities and lost revenue. At Orixun, we specialize in creating distinctive, high-impact branding that ensures your business stands out and leaves a lasting impression.
Services

Are You Ready

to Lead?

Only those who act today will shape tomorrow

The difference between thriving and fading away is the decision you make now. Orixun partners with bold businesses ready to break barriers, redefine their industries, and build a legacy.
Andrew Pearce
Devsonic's auditing features have made it easier for me to ensure compliance with industry regulations. 📝🔒 #DataCompliance #AuditingFeatures #Devsonic
Ricardo A.
I thought I just needed better marketing, but Orixun delivered an entire transformation. From rebranding to website redesign and campaign strategies, they redefined how we’re perceived in the industry. Now we’re seen as a leading innovator, and our revenue grown significantly.
Casaandra B.
13.02.23
Devsonic's key management system is robust and secure, giving me peace of mind when it comes to managing encryption keys. 🔑🔒 #KeyManagement #RobustSecurity #Devsonic
Jess M.
18.01.23
The ease of integration with Devsonic's APIs and SDKs has made it a breeze to incorporate into my existing software projects. 🧩🔒 #APIs #SDKs #Devsonic
Andrew Pearce
02.09.22
Devsonic's auditing features have made it easier for me to ensure compliance with industry regulations. 📝🔒 #DataCompliance #AuditingFeatures #Devsonic
John S.
23.03.23
The logging capabilities in Devsonic have been a game-changer for me when it comes to troubleshooting and tracing issues. 🕵️♂️🔒 #LoggingCapabilities #Troubleshooting #Devsonic
Casaandra B.
13.02.23
Devsonic's key management system is robust and secure, giving me peace of mind when it comes to managing encryption keys. 🔑🔒 #KeyManagement #RobustSecurity #Devsonic
Jess M.
18.01.23
The ease of integration with Devsonic's APIs and SDKs has made it a breeze to incorporate into my existing software projects. 🧩🔒 #APIs #SDKs #Devsonic
Andrew P.
Our online store felt generic as Adam says. Orixun rebuilt everything, a sleek new design, amazing product descriptions, and campaigns that converted. Sales are 25% up, and we’re finally seen as a premium brand in our industry.
Jessica P.
I didn’t realise how disjointed my branding was until Orixun showed me. Their complete transformation package refined our positioning, revamped our website, and created marketing that resonated deeply with clients. We’re now in a league of our own.
Andrew Pearce
Chief Technology Office, Bend
Devsonic's auditing features have made it easier for me to ensure compliance with industry regulations. 📝🔒 #DataCompliance #AuditingFeatures #Devsonic
Andrew Pearce
Chief Technology Office, Bend
The ease of integration with Devsonic's APIs and SDKs has made it a breeze to incorporate into my existing software projects. 🧩🔒 #APIs #SDKs #Devsonic

Colours

Primaries and grays controlled by the Global Swatch feature.
Primary 1
Primary 2
Dark 1
Dark 2
Light 1
Light 2
Light 3
Light 4

Typography

Headings, body and other common text elements.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Large Text    Large Link
Body Text    Body Link
Small Text    Small Link

Buttons

Component, text style and size variations

Form Inputs

General style and state variations for text inputs.
Inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
This is some text inside of a div block.
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.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.