Design
Guide

OXD Introduction Design Thinking UX Standards
UX Guidelines Form Design Patterns UX Rules & Lows Keyboard Accessibility
Visual Design
Colors Typograpy Images Icons Motion Animations
Grid & Layout
Main Layouts Grid System
Navigations
Sidebar Topbar
Componets
Buttons Text-box Check-box Radio Radio Pils Switch Search-box Multi Select Dropdown Nested Dropdown Upload Inputs Date picker Time picker Labels Help Lable Status lable Grupe Input Grupe Overlay Comment-box Paginations Divider Progress Circle Progress Slider Upload-box Segments Autocomplete
Tables & List View Cards & Shaps Modals & Popups Advance Componets Charts
QA Standards
Developer
Progress Circle
progress circle can use to adjust the amount or value with clear visual aid. 

                font-color: #64728c;
                font-size: 18px
                font-weight: 800;
                hadle-round-bacground: #fff;
                round-background: #f1f2f5
                height:100px;
                width: 100px;

                small size:
                height:34px;
                width: 34px;
Status
Active-with handler round
font-color : #64728c
border : 1px solid #e8eaef
font-size:18px;
font-weight: 800;

height:100px; width: 100px;
With type input
font-color : #64728c
border : 12px

increment-container .btn-list {
border-radius: 50%;
icon-size: 18px;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
font-size: .75rem;
font-weight: 400;
Readonly
handler or the input will not display
Inside list view
width: 34px height: 34px;
List view Ajuestment popup
Open with the drop-down-button
Defult Colors