colors

Primary

Secondary

Accent #1

Accent #2

Accent #3

Neutrals

typography

Aa

Poppins Bold

Aa

Poppins Medium

Aa

Poppins Light

Headlines

h1 headline

h2 headline

h3 headline

h4 headline

h5 headline

h6 headline

Body Text

I think we need to start from scratch. Jazz it up a little bit- use a funky color like purple.

Can you add a bit of pastel pink and baby blue because the purple alone looks too fancy.

Make the purple more well, purple-er. Try a more powerful colour, it needs to be the same, but totally different.

Buttons

Default Button Disabled Button Secondary Button Other Button Other Button Another Button

Medium Button Smol Button

Links

Sample Link
Hovered Link

Inputs & Selects

A Normal Input

A message here.

An Active Input

A Disabled Input

A Normal Select

A Right Input

Awesome job.

A Left Input

You shall not pass.

Textarea

Toggle Buttons

Checkboxes

Checkbox

Checked Box

Radio Buttons

Radio Button

Selected Radio Button

Badges

ReceivedPendingPendingApprovedRejected

Tooltips

Alerts

A normal alert here.

A happy alert here.

A sad alert here.

loading indicators

Please wait...

Loading...

What is CSS...?

CSS is a stylesheet language (Cascading Style Sheet) used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

getWeb CSS base.

HTML

HTML has been set margin (0). as below, please noted that margin (0) has been applied to all browsers and mobile view, so once you make adjustment makes sure to view both on web and mobile view.

Box sizing and Margin

html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}

Fonts

html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5} html{overflow-x:hidden} h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px} .gw-serif{font-family:serif} h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0} .gw-wide{letter-spacing:4px} hr{border:0;border-top:1px solid #eee;margin:20px 0}

Images

.gw-image{max-width:100%;height:auto} img{vertical-align:middle}a{color:inherit}

Media

@media (max-width:1205px){ .gw-auto{max-width:95%}}

Color

.gw-amber,.gw-hover-amber:hover{color:#000!important;background-color:#ffc107!important} .gw-border-pale-blue,.gw-hover-border-pale-blue:hover{border-color:#e7ffff!important}

Quick

Play around on CSS