Family Care Dental Clinic Design System

STYLE

Colours

Baby Blue

#69CFF9
RGB(105,207,249)

Powder Blue

#B3DFDF
RGB(179,223,223)

Maximum Green Yellow

#CBE948
RGB(203,233,72)

Pistachio

#96C789
RGB(150,199,137)

Peach

#FAC898
RGB(250,200,152)

Bittersweet

#FF6961
RGB(255,105,97)

White

#FFFFFF
RGB(255,225,255)

Silver Chalice

#B0B0B1
RGB(176,176,177)

Black

#0000
RGB(0,0,0)

Body Text

White Background

Heading

Success Text

Danger Text

Info Text

Warning Text

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt nobis beatae, veritatis officia ut eius ipsum deserunt eaque cumque assumenda repellendus nisi ab id explicabo quibusdam illo expedita deleniti repudiandae!

HTML AND CSS Code

HTML CODE

      
        <div class="container">
            <h4>Heading</h4>
            <a href="#">Link</a>
            <a href="#" class="link2">Link2</a>
            <h4 style="color:#96c789;">Success Text</h4>
            <h4 style="color:#ff6961;">Danger Text</h4>
            <h4 style="color:#b3dfdf;">Info Text</h4>
            <h4 style="color:#fac898;">Warning Text</h4>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt nobis beatae, veritatis officia ut eius ipsum deserunt 
                eaque cumque assumenda repellendus nisi ab id explicabo quibusdam illo expedita deleniti repudiandae!</p>
        </div>

CSS CODE

    
        .container{
            background-color: white;
            color: black;
        }
        a:link {
            color:black;
            background-color: transparent;
            text-decoration: none;
        }
        a:hover {
          color: #cbe948;
          background-color: transparent;
          text-decoration: none;
        }
        a:active {
          color: #b0b0b1;
          background-color: transparent;
          text-decoration: underline;
        }

Silver Chalice Background

Heading

Link1

Link2

Success Text

Danger Text

Info Text

Warning Text

HTML AND CSS Code

HTML CODE

      
        <div class="container">
            <h4>Heading</h4>
            <a href="#">Link</a>                    
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt nobis beatae, veritatis officia ut eius ipsum deserunt 
                eaque cumque assumenda repellendus nisi ab id explicabo quibusdam illo expedita deleniti repudiandae!</p>
        </div>

CSS CODE

    
        .container{
            background-image:linear-gradient(to bottom,white,#B0B0B1);
            color: black;
        }
        a:link {
            color:black;
            background-color: transparent;
            text-decoration: none;
        }
        a:hover {
          color: #69CFF9;
          background-color: transparent;
          text-decoration: none;
        }

Baby Blue Background

Heading

Link1

HTML AND CSS Code

HTML CODE

      
        <div class="container">
            <h4>Heading</h4>
            <a href="#">Link</a>        
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt nobis beatae, veritatis officia ut eius ipsum deserunt 
                eaque cumque assumenda repellendus nisi ab id explicabo quibusdam illo expedita deleniti repudiandae!</p>
        </div>

CSS CODE

    
        .container{
            background-image:linear-gradient(to bottom,white,#69CFF9);
            color: black;
        }
        a:link {
            color:black;
            background-color: transparent;
            text-decoration: none;
        }
        a:hover {
          color: #96C789;
          background-color: transparent;
          text-decoration: none;
        }

Buttons Color

HTML AND CSS Code

HTML CODE

      
        <button class="primaryButton">Primary Button</button>
        <button class="secondaryButton">Secondary Button</button>
        <button class="warningButton">Tertiary Button</button>
        <button class="dangerButton">Danger Button</button>

CSS CODE

    
        .primaryButton{
            background:radial-gradient(white,#69cff9);
            color: black;
            padding: 1rem 3rem;
            font-size: large;
            font-weight: bold;
            border: 1px solid #cbe948;
            border-radius: 0.5rem;
            box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25);
        }
        .primaryButton:hover{
            background:radial-gradient(#96c789,#69cff9);
            color:black;
        }
        .primaryButton:active{
            background:radial-gradient(white,#69cff9);
            color:#b0b0b1;
        }
        .secondaryButton{
            background:radial-gradient(white,#96c789);
            color: black;
            padding: 1rem 3rem;
            font-size: large;
            font-weight: bold;
            border: 1px solid #cbe948;
            border-radius: 0.5rem;
            box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25);
        }
        .secondaryButton:hover{
            background:radial-gradient(#69cff9,#96c789);
            color:black;
        }
        .secondaryButton:active{
            background:radial-gradient(white,#96c789);
            color:#b0b0b1;
        }
        .warningButton{
            background:radial-gradient(white,#fac898);
            color: black;
            padding: 1rem 3rem;
            font-size: large;
            font-weight: bold;
            border: 1px solid #cbe948;
            border-radius: 0.5rem;
            box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25);
        }
        .warningButton:hover{
            background:radial-gradient(#ff6961,#fac898);
            color:black;
        }
        .warningButton:active{
            background:radial-gradient(white,#fac898);
            color:#b0b0b1;
        }
        .dangerButton{
            background:radial-gradient(white,#ff6961);
            color: black;
            padding: 1rem 3rem;
            font-size: large;
            font-weight: bold;
            border: 1px solid #cbe948;
            border-radius: 0.5rem;
            box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25);
        }
        .dangerButton:hover{
            background:radial-gradient(#fac898,#ff6961);
            color:black;
        }
        .dangerButton:active{
            background:radial-gradient(white,#ff6961);
            color:#b0b0b1;
        }