Style Guide

Basic design system for site-wide styling.

Select Option
The word WINTER in uppercase letters with the letter I stylized as a snowflake and a gradient blue and white color scheme.
Typeface
Orange outline of an artist palette with three round paint dabs on a purple circular background.
Color Palette
Two small cacti with spines, one in a stubby pot and the other in a taller blue pot with a shallow rim, set on a light wooden surface against a muted background.
Headings
Typography-poster displaying text explaining the concept and importance of typography in design.
Titles
Horizontal alignment icons showing left, center, and right text alignment in black on white background.
Text Blocks
Icon of three horizontal lines representing a left text alignment symbol.
Paragraphs
User interface diagram showing two sections with animated charts and gear icons, depicting a settings and data visualization dashboard.
Rich Text
Blue rectangular press button with rounded corners and the text 'PRESS' in white on top.
Buttons
Black chain link icon on transparent background.
Links
Black outline of a heart shape on a white background.
Icons
Logo with stylized colorful letters O, A, and I connected by curving lines in blue, pink, and orange.
Logos
Illustration of a person holding a large pencil sketching wireframes and design elements on a giant smartphone screen.
UI Layout

Typeface

Down Icon Black
Poppins
Poppins /  Font weights
Normal  /  400
Aa
Medium  /  500
Aa
Semi-Bold /  600
Aa
Bold  /  700
Aa
Helvetica now display /  Font Charachters
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b b d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ?

Color Palettes

Down Icon Black
Card
is-red
Purple
Card
is-lightred
Light Red
Card
is-dark-grey
Dark Grey
Card
is-green
Green
Card
is-green02
Dark Green
Card
is-grey
Grey
Card
is-black
Black

Headings

Down Icon Black
Typescale
Typescale /  1.250 Major Third
Heading Settings - H1
Size: 47.776px
No class added

Heading 1

Heading Settings - H2
Size: 39.68px
No class added

Heading 2

Heading Settings - H3
Size: 33.12px
No class added

Heading 3

Heading Settings - H4
Size: 27.52px
No class added

Heading 4

Heading Settings - H5
Size: 23.04px
No class added
Heading 5
Heading Settings - H6
Size: 19.2px
No class added
Heading 6
All heading setting - Purple Heading
heading
is-red

Heading

All heading setting - White Heading
Heading
is-white

Heading

Titles

Down Icon Black
X Large Titles
Size: 90px
Title
Title XL
Large Titles
Size: 50px
Title
is-large
Title L
Medium Titles
Size: 30px
Title
is-medium
Title M
Small Titles
Size: 25px
Title
is-small
Title S
X Small Titles
Size: 16px
Title
is-xsmall
Title XS
All Titles - Red Heading
heading
is-medium
is-red
Display XS
All titles - White Heading
Heading
is-large
is-white
Display XS
All Titles - Uppercase
heading
is-medium
is-uppercase
Display XS

text blocks

Down Icon Black
Badges
Badge
is-white
is-grey
is-purple
is-purple02
is-darkgreen
is-green
is-dark-grey
Text
Text
is-xSmall
Size: 14px
© Copyright uh-gaf
Text
is-Small
Size: 16px
© Copyright uh-gaf
Text
is-medium
Size: 18px
© Copyright uh-gaf
Text
is-Large
Size: 14px
© Copyright uh-gaf
Text
is-xlarge
Size: 22px
© Copyright uh-gaf
Text
is-small
is-bold
you can add is-bold as a combo class to change weight
© Copyright uh-gaf
Text
is-medium
is-purple
you can add is-red or is- white as combo class to change color
© Copyright uh-gaf
Text
is-xlarge
is-uppercase
you can add is-uppercase as combo class to change capitalization
© Copyright uh-gaf

Paragraphs

Down Icon Black
Paragraph
Size: 16px

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.

Paragraph
is-medium
Size: 20px

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.

Paragraph
is-Large
Size: 30px

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.

Paragraph
is-xlarge
Size: 38px

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.

Paragraph
is-medium
is-white
you can add is-white as a combo class to change color

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.

Rich Text

Down Icon Black
Rich text black
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

Rich text white
Rich-text-white

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

Rich text white
Rich-text-white

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

Buttons

Down Icon Black
Primary Button
Button
Get in touch
White right-pointing arrow on transparent background.
Secondary Button
Button
is-secondary
Learn more
Simple black right arrow icon.

Links

Down Icon Black
Primary Link
Link
Learn more
Right Arrow
Secondary Link
Link
is-white
Learn more
right-arrow-icon

Icons

Down Icon Black
Icons  /  Interface  /  Black
Right ArrowNorth East Icon BlackUp Icon BlackNorth West Icon BlackSouth East Icon BlackDown Icon BlackSouth West Icon BlackLeft ArrowOpen Icon BlackMenu Icon BlackEmail Icon BlackPhone Icon Black
Icons  /  Social  /  Black
Facebook icon with lowercase white letter f on a blue rounded square background.Instagram logo, a camera outline inside a rounded square.Twitter logo in a rounded square icon.Red YouTube play button icon on a rounded square background.LinkedIn company logo.TikTok logo with a stylized musical note in black, red, and blue colors.White lowercase 'b' inside a blue circle representing the Behance logo.Dribbble logo showing a basketball with intersecting lines.Apple company logo in black and white.Google logo in white on a black circular background.Green Android robot mascot on a transparent background.Google Play store icon with a multicolored play button.
Icons  /  Interface  /  White
right-arrow-iconNorth East Icon WhiteUp Icon WhiteNorth West Icon White South East Icon WhiteDown Icon WhiteSouth West Icon WhiteLeft-arrow-iconOpen Icon WhiteMenu Icon WhiteEmail Icon WhitePhone Icon White
Icons  /  Social  /  White
Facebook icon lowercase f in white.Instagram logo with a rounded square camera outline and a small circle in the top right corner.Twitter bird logo in white on a transparent background.White YouTube play button icon on a black background.LinkedIn iconTikTok app icon showing a stylized black musical note on a white background.Behance logo with stylized letter B and macron accent over the letter e on a black background.White basketball icon with three black curved lines on a black background.Apple logoGoogle G logo.White Android robot logo on black background.Google Play store icon.

Logos

Down Icon Black
Primary
Pioneers IT Signature company logo with stylized red and black text.
Secondary
Pioneers IT Signature company logo with stylized red and black text.

UI Layout

Down Icon Black
Spacing
Space
Space
16 px
Space
is-small
32 px
Space
is-medium
48 px
Space
is-large
64 px
Space
is-xlarge
80 px
Hero Section
Image-wrapper
is-(your-custom-name) Custom style

Heading

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.

Learn more
right-arrow-icon
Learn more
Right Arrow
Grid section
Grid

Heading

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.

Get in touch
White right-pointing arrow on transparent background.
Learn more
Right Arrow
Grid section
Grid
is-3cards
Image Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

Learn more
Right Arrow
Image Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

Learn more
Right Arrow
Image Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

Learn more
Right Arrow
Icon Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

Learn more
Right Arrow
Icon Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

Learn more
Right Arrow
Icon Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

Learn more
Right Arrow
Accordion
Accordion item
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Subscribe to our Newsletter
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Cloud Solutions
Azure AI
Azure Analytics
Cloud Migration
Infrastructure Modernization
Microsoft Azure
Microsoft Azure Services & Solutions
Pioneer Solutions
E Invoice Add-on
HR & Payroll Add-on
Van Sales Add-On
Laserfiche
D365 - Property Management Solutions
D365 - Student Registration Solutions
D365 - Fleet Management Solutions
Ticketing App
D365 - Legal Management Solutions
Power Platform & AI
Copilot Studio
Power Apps
Power Automate
Power BI
Power Pages
Power Virtual Agents
Company
About usContact usCareersNewsIndustries
Business Solutions
D365 - Business Central
D365 - Customer Engagement
D365 - Finance and Operations
Modern Workplace
Cyber Security
Microsoft Copilot
Microsoft Office 365
Microsoft OneDrive
Microsoft Teams
SharePoint
Microsoft logo with four colored squares: red, green, blue, and yellow.
Copyrights @Pioneers IT 2011-2026
Visit Facebook
Visit Instagram
Visit Linkedin
follow softobia on youtube
Visit Youtube