Styles Overview

Color Typography Spacing Breakpoints

Components

Buttons Inputs Navigation Footer Table Cards Carousel Checkbox Date picker Dropdown Radio button Tabs Time pickers Tooltips

MeCode Design System

Toggle Dark/Light Mode

Color

Primary Colors

$color-primary-100
$color-primary-200
$color-primary-300
$color-primary-400
$color-primary-500
$color-primary-600
$color-primary-700
$color-primary-800
$color-primary-900

Secondary Colors

$color-secondary-100
$color-secondary-200
$color-secondary-300
$color-secondary-400
$color-secondary-500
$color-secondary-600
$color-secondary-700
$color-secondary-800
$color-secondary-900

Accent 01 Colors

$color-accent-01-100
$color-accent-01-200
$color-accent-01-300
$color-accent-01-400
$color-accent-01-500
$color-accent-01-600
$color-accent-01-700
$color-accent-01-800
$color-accent-01-900

Accent 02 Colors

$color-accent-02-100
$color-accent-02-200
$color-accent-02-300
$color-accent-02-400
$color-accent-02-500
$color-accent-02-600
$color-accent-02-700
$color-accent-02-800
$color-accent-02-900

Accent 03 Colors

$color-accent-03-100
$color-accent-03-200
$color-accent-03-300
$color-accent-03-400
$color-accent-03-500
$color-accent-03-600
$color-accent-03-700
$color-accent-03-800
$color-accent-03-900

Neutral Colors

$color-neutral-100
$color-neutral-200
$color-neutral-300
$color-neutral-400
$color-neutral-500
$color-neutral-600
$color-neutral-700
$color-neutral-800
$color-neutral-900

Grey Scale

$color-grey-100
$color-grey-200
$color-grey-300
$color-grey-400
$color-grey-500
$color-grey-600
$color-grey-700
$color-grey-800
$color-grey-900

Default Background Colors

$color-default-bg-300
$color-default-bg-500
$color-default-bg-700

Background Colors

$color-bg-300
$color-bg-500
$color-bg-700

Warning Colors

$color-warning-300
$color-warning-500
$color-warning-700

Success Colors

$color-success-300
$color-success-500
$color-success-700

Danger Colors

$color-danger-300
$color-danger-500
$color-danger-700

Typography

Hierarchy and Scaling:

Define a typographic hierarchy, specifying different font sizes for headings, sub Headers, and paragraphs. Use a consistent scale for font sizes to maintain harmony.

Header

Text type Classname
Header 1 .text-h1
Header 2 .text-h2
Header 3 .text-h3
Header 4 .text-h4
Header 5 .text-h5
Header 6 .text-h6
Header 7 .text-h7

Sub Header

Text type Classname
Sub Header 1 .text-sh1
Sub Header 2 .text-sh2
Sub Header 3 .text-sh3
Sub Header 4 .text-sh4
Sub Header 5 .text-sh5
Sub Header 6 .text-sh6
Sub Header 7 .text-sh7

Paragraph

Text type Classname
Paragraph 1 .text-p1
Paragraph 2 .text-p2
Paragraph 3 .text-p3
Paragraph 4 .text-p4
Paragraph 5 .text-p5
Paragraph 6 .text-p6
Paragraph 7 .text-p7

Button

Text type Classname
Button 1 .text-b1
Button 2 .text-b2
Button 3 .text-b3
Button 4 .text-b4
Button 5 .text-b5

Form

Text type Classname
Form 1 .text-f1
Form 2 .text-f2
Form 3 .text-f3
Form 4 .text-f4
Form 5 .text-f5
Form 6 .text-f6

Text Transform Utility Classes

Text type Classname
Uppercase .text-transform-uppercase
Lowercase .text-transform-lowercase
Capitalize .text-transform-capitalize
Normal Case .text-transform-normal-case
Italic Case .text-transform-italic

Spacing

Variable name Value Visual
$space-1 4px
$space-2 8px
$space-3 12px
$space-4 16px
$space-5 20px
$space-6 24px
$space-7 32px
$space-8 40px
$space-9 48px
$space-10 56px
$space-11 64px
$space-12 72px
$space-13 80px
$space-14 96px

Breakpoints

Name Value SCSS
Mobile 375 px - 679 px $breakpoint-mobile
Tablet 680 px - 1199 px $breakpoint-tablet
Desktop < 1200 px -

How to use

    .classname {
      // styling for mobile

      @media (min-width: $breakpoint-mobile) {
        // styling for tablet
      }

      @media (min-width: $breakpoint-tablet) {
        // styling for desktop
      }
    }

Components

Buttons

Primary Buttons

The primary button is used for the most important and prominent actions within an interface. It typically represents the primary call-to-action, such as "Submit," "Save," "Buy Now," or other critical actions.

Type Default Disabled
Primary
.btn-primary
.btn-primary--disabled
Primary with icon
.btn-primary
.btn-primary--disabled
Primary icon
.btn-primary-icon
.btn-primary-icon--disabled

Secondary Buttons

The secondary button is used for less important actions or actions that are of secondary importance compared to those represented by the primary button.

Type Default Disabled
Secondary
.btn-secondary
.btn-secondary--disabled
Secondary with icon
.btn-secondary
.btn-secondary--disabled
Secondary icon
.btn-secondary-icon
.btn-secondary-icon--disabled

Link Buttons

Resembles a text link but behaves like a button, often used for navigational or less prominent actions.

Type Default Disabled
Link Buttons
.btn-link
.btn-link--disabled

Ghost Buttons

Used for secondary actions or when a less intrusive button style is desired, providing clarity without visual dominance.

Type Default Disabled
Ghost
.btn-ghost
.btn-ghost--disabled

Input Components

Text Input

The Text Input component operates as an input of type 'text' with customizable attributes like form, model, labels, field name, requirement indicators, values, read-only options within its own component tag, and supports custom background color, text color, and border styling via CSS.

Text required field *
Text required field *
Text required field + readonly *
Text not required
Text not required
Text not required + readonly

Password Input

The Password Input component functions as an input of type 'password' with an eye icon to toggle visibility, featuring customizable attributes such as form, model, labels, field name, requirement indicators, values, read-only options within its own component tag, and supports custom background color, text color, and border styling via CSS.

Password required field *
Password required field *
Password required field + readonly *

Checkbox Input

The checkbox input component operates as an input of type 'checkbox' with customizable attributes like form, model, labels, field name, requirement indicators, values, read-only options, and default value (isChecked) within its own component tag. It also supports custom background color for the checked state or default, and border styling via CSS.

Checkbox required field *
Checkbox not required
Checkbox checked not required + readonly
Checkbox checked required + readonly *

label with link

Google link *

Radio Button Input

The radio button component operates as an input of type 'radio' with customizable attributes like form, model, labels, field name, requirement indicators, values, read-only options, and default value (isChecked) within its own component tag. It also supports custom background color for the checked state or default, and border styling via CSS.

Radiobutton required field *
Radiobutton not required
Radiobutton not required + readonly
Radiobutton required + readonly *

Datetime Input

The datetime input component functions as inputs of types 'datetime-local', 'date', and 'time', featuring customizable attributes such as form, model, labels, field name, requirement indicators, values, and read-only options within its own component tag. Additionally, it supports custom background color for the checked state or default, along with border styling via CSS.

Datetime Input

Datetime required field *
Datetime required field *
Datetime required field *
Datetime required field
Datetime required field
Datetime required field

Date Input

Date required field *
Date required field *
Date required field *
Date required field
Date required field
Date required field

Time Input

Time required field *
Time required field *
Time required field *
Time required field
Time required field
Time required field

Date Range Input

Date Range
Date Range
Date Range
Date Range *
Date Range *
Date Range *

Upload

The file upload input component operates as inputs of type 'file', offering customizable attributes like form, field name, accepted file type, requirement indicators, values, and read-only options within its own component tag. Furthermore, it supports custom background color for the readonly state via CSS.

Upload required field *
Upload required field + value *
test
2.5 MB
Upload required field + readonly + value *
test
2.5 MB
Upload not required
Upload not required + value
test
2.5 MB
Upload not required + readonly + value
test
2.5 MB

Slider

The slider input component functions as inputs of type 'range', providing customizable attributes such as form, field name, requirement indicators, default values, min/max values, and read-only options within its own component tag. Additionally, it supports custom background colors

Slider required field *
Slider required field + default value *
Slider required field + readonly + default value *
Slider not required
Slider not required + default value
Slider not required + readonly + default value

Cards

Checkbox

Date picker

Radio button

Tabs

Time pickers

Tooltips