Microsoft Partner
UK I EU I MENA
N.Progression
Design System
v1.1
•
Last updated
Nov 3, 2023
Official documentation for the N.Progression’s design system
Use this guide to create end-to-end user experience and stay consistent with visual and technical site’s aspects.
Figma
The design environment is created and supported completely on Figma. We see that designers should work with elements that are closest to being implemented in code. Therefore, all the components are nested and named according to the development specifics and are ready-to-implement in a few days.
Webflow
Everything on this site (including the site itself) is managed and published using Webflow. This makes the components and content easier to keep up to date. To edit the layout and source code, open the ‘Designer’ mode or the ‘Editor’ mode if you want to change the content. Use ‘Figma to Webflow’ plugin to transfer design to original website.
You can get comprehensive tutorials on designing and building website with Webflow University.
You can get comprehensive tutorials on designing and building website with Webflow University.
Foundations
Foundations are the visual and structural elements of our design system. Foundations are a basis of all UI elements. They should be used as blueprints that all components and layouts are created from.
Identity
logo-npro
90 × 56
logo-npro-light
90 × 56
logo-npro-black
90 × 56
logo-npro-white
90 × 56
icon-npro
45 × 40
icon-npro-light
45 × 40
icon-npro-black
45 × 40
icon-npro-white
45 × 40
Colors
Base colors
#070015
Base / Black
#FFFFFF
Base / White
#7230FF
Base / Primary
Brand colors
#140040
Brand / Dark
#290081
Brand / Dark 2
#3D00C1
Brand / Dark 3
#6118FF
Brand / Dark 4
#7230FF
Brand / Default
#854CFF
Brand / Shade 1
#996AFF
Brand / Shade 2
#AD88FF
Brand / Shade 3
#C2A5FF
Brand / Light 4
#D6C3FF
Brand / Light 3
#EBE1FF
Brand / Light 2
#F8F7FA
Brand / Light
System colors
#9C94FF
Brand / Night
States
#7230FF
Button / Default
#6118FF
Button / Hover
#3D00C1
Button / Pressed
#D6C3FF
Field / Default
#7230FF
Field / Active
Icons
Typography
Roboto
Headings
Roboto
Text
84px/Bold
title-xl
32px/Bold
title-xl
56px/Bold
title-h1
32px/Bold
title-h1
48px/Bold
title-h2
28px/Bold
title-h2
40px/Bold
title-h3
24px/Bold
title-h3
32px/Bold
title-h4
20px/Bold
title-h4
24px/Bold
title-h5
18px/Bold
title-h5
18px/Bold
title-h6
16px/Bold
title-h6
32px/Medium
subtitle-l
18px/Medium
subtitle-l
24px/Medium
subtitle
18px/Medium
subtitle
16px/Medium
subtitle-s
16px/Medium
subtitle-s
14px/Medium
subtitle-xs
14px/Medium
subtitle-xs
18px/Regular
descr-l
16px/Regular
descr-l
16px/Regular
descr
16px/Regular
descr
14px/Regular
descr-s
14px/Regular
descr-s
12px/Regular
descr-xs
12px/Regular
descr-xs
16px/Bold
16px/Bold
button-text
14px/Medium
14px/Medium
button-text-s
16px/Medium
link-text
14px/Medium
link-text
14px/Medium
link-text-s
14px/Medium
link-text-s
14px/Bold
uptitle
12px/Bold
uptitle
Layers
Layer / -1
Layer / 0
Layer / 1
Layer / 2
Layout
1280–1600 (Center)
1600–max (Autoscale)
480–1280 (Autoscale)
360–480 (Autoscale)
Components
Based on foundations, components are the main parts of the layout. The name of each component in Figma matches the name of the same component in Webflow, so you can easely copy and paste components across any Webflow page. Just click on the component and you’re ready to go.
Note: Components have different color variations for a more accurate design match. Swith the tabs to see their properties and class names.
Buttons
Fields
input-wrapper
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
textarea-wrapper
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
dropdown-wrapper
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
label-wrapper
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
select-wrapper
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
file-wrapper
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
input-wrapper
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
textarea-wrapper
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
dropdown-wrapper
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
label-wrapper
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
select-wrapper
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
file-wrapper
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Navigation
Forms
form-wrapper
form-title-text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
form-wrapper-outline
form-title-text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
form-title-text-left
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
form-title-text-left
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
form-wrapper-light
form-title-text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
form-wrapper-outline-light
form-title-text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
form-title-text-left
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
form-title-text-left
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Accordions
accordion
accordion-title
accordion-s
accordion-s-title
accordion-light
accordion-light-title
accordion-s-light
accordion-s-light-title
Tooltips
popover-title-left
popover-title
popover-descr
popover-descr
popover-descr
popover-title-right
popover-title
popover-descr
popover-descr
popover-descr
popover-left
popover-descr
popover-right
popover-descr
popover-top
popover-descr
popover-bottom
popover-descr
popover-title-left-dark
popover-title-dark
popover-descr-dark
popover-descr-dark
popover-descr-dark
popover-title-right-dark
popover-title-dark
popover-descr-dark
popover-descr-dark
popover-descr-dark
popover-left-dark
popover-descr-dark
popover-right-dark
popover-descr-dark
popover-top-dark
popover-descr-dark
popover-bottom-dark
popover-descr-dark
Cards
card-default
card-title
card-descr
card-alt
card-header
card-title
card-descr
card-tab
card-title
card-descr
card-overlay
card-title
card-descr
card-overlay-light
card-title
card-descr
card-tab.active
card-title
card-descr
Modals
popup-default
card-title
card-descr
popup-card
card-title
card-descr
popup-form
form-title-text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Development
Development environment specifications you need to understand before migrating your design to Webflow.
Libraries
jQuery v3.6.4
jquery.min.js
Finsweet CMS Core
cmscore.js
Finsweet CMS Slider
cmsslider.js
Finsweet CMS Filter
cmsfilter.js
Finsweet CMS Load
cmsload.js
ScrollReveal
scrollreveal.min.js
Functions
Responsive autoscale
Automatically adjusts the page zoom level according to the device screen size
Popups
Adds a functionality to popups when clicking the buttons
CSS Utilities
:root {
--color-main: #00adbf;
--color-light: #000000;
--color-dark: #ffffff;
--transition: .3s ease-in-out;
--blur: blur(4px);
}
.visible {
opacity: 1;
}
.invisible {
opacity: 0;
}
.transition {
transition: var(--transition);
}
.pointer {
pointer-events: auto;
cursor: pointer;
}
.nopointer {
pointer-events: none;
}
.mix-lighten {
mix-blend-mode: lighten;
}
.mix-screen {
mix-blend-mode: screen;
}
.noscroll {
overflow: hidden;
}
CMS
Events
/events/*
Speakers
/speakers/*
Categories
/events-categories/*
Slider / Home
/home-hero-slider/*
Slider / CloudGreen
/cloudgreen-slider/*
Field
Type
Required
Name
Plain text
Link
Link
Cover image
Image
Date/Time
Date/Time
Time zone
Option
Location
Option
Delivery language
Option
About event
Rich text
Reasons to visit
Rich text
Key insights
Rich text
Who will be interested
Rich text
Speakers
Multi-reference
Calendar link
Link
Category
Reference
Field
Type
Required
Name
Plain text
Photo
Image
Job Position
Plain text
Field
Type
Required
Name
Plain text
Field
Type
Required
CMS Title
Plain text
Title
Plain text (20–80)
Description
Plain Text (30–100)
Link
Link
Cover image
Image
Field
Type
Required
Name
Plain text
Video link
Link
Sitemap
Company
Home page
/
Careers
/careers
Products
Dynamics 365 Business Central
/products/business-central
Dynamics 365 Finance & Supply Chain Management
/products/supply-chain-management
Dynamics 365 Sales & Marketing
/products/sales-marketing
Tools
Cloud Green Update Solution
/tools/cloud-green
Upgrade Scanner for Dynamics 365 NAV / BC
/tools/upgrade-scanner
Microsoft Cloud for Sustainability
/tools/sustainability-cloud
For Microsoft Partners
Extended team
/partners/extended-team
Development services
/partners/development-services
Upgrade outsourcing
/partners/upgrade-outsourcing
Dynamic pages
Our events
/events
Our blog
/blog
Event page (CMS)
/events/event-page
Article page (CMS)
/blog/article-page
System pages
Page not found
/404
Page in development
/in-development
Contributors
We encourage you to contribute to this design system where you see fit. Any change can be easily published in design and development environment.
Thanks to the people who contributed to the creation of this design system:
Thanks to the people who contributed to the creation of this design system:
@mpostnikov
Product Designer & Developer
@aprudskaya
Senior Designer
Contact us
Your information has been received
Thank you for taking the time to complete this form. We will be in touch with you shortly!
Oops! Something went wrong while submitting the form.
