STYLE GUIDE

This is a page for the style guide

TypoGraphy

For heading, we are using Poppins and for body text we are using Roboto

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sapien non nisi fringilla aliquam.

Heading 2

Nulla hendrerit, massa eu bibendum viverra, lectus massa elementum nunc, non bibendum ipsum nisi non urna.

Heading 3

Maecenas vestibulum, urna id cursus rhoncus, sapien quam molestie felis, in tincidunt metus tellus vel sem.

Heading 4

Fusce eget eros magna. In hac habitasse platea dictumst. Suspendisse sit amet est et mi molestie vulputate.

            <h1 style="font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 48px;">Heading 1</h1>
            <p style="font-family: 'Roboto', sans-serif; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sapien non nisi fringilla aliquam.</p>

            <h2 style="font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 36px;">Heading 2</h2>
            <p style="font-family: 'Roboto', sans-serif; font-size: 14px;">Nulla hendrerit, massa eu bibendum viverra, lectus massa elementum nunc, non bibendum ipsum nisi non urna.</p>
                       
            <h3 style="font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 24px;">Heading 3</h3>
            <p style="font-family: 'Roboto', sans-serif; font-size: 12px;">Maecenas vestibulum, urna id cursus rhoncus, sapien quam molestie felis, in tincidunt metus tellus vel sem.</p>
                       
            <h4 style="font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 18px;">Heading 4</h4>
            <p style="font-family: 'Roboto', sans-serif; font-size: 10px;">Fusce eget eros magna. In hac habitasse platea dictumst. Suspendisse sit amet est et mi molestie vulputate.</p>
            

Color Palette

This app uses a dark color scheme to provide a modern and sleek look. The color palette is made up of the following five colors:

• Rich Black: #111724
• Gunmetal: #282c34
• Charcoal: #3d4554
• Lapis Lazuli: #225578
• Honolulu Blue: #177bbd

The primary color used throughout the app is Honolulu Blue, which is used for important buttons and links, as well as for the active state of the bottom navigation items. The other colors are used to provide contrast and create visual interest, and are mainly used for background colors, borders, and accents.

Example Usage:

Rich Black #111724

Gunmetal #282c34

Charcoal #3d4554

Lapis Lazuli #225578

Honolulu Blue #177bbd

Form Example with Fields

Email Password Confirm Password

Button Example

Small Buttons

                <form>
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required>
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
                <label for="confirm-password">Confirm Password</label>
                <input type="password" id="confirm-password" name="confirm-password" required>
                <input type="submit" value="Sign Up">
                </form>
                <input type="button" value="Add Friend" class="add_friend"/>
                <input type="button" value="Submit" class="submit_small"/>
                <input type="button" value="Block" class="block_small"/>
                

Methods for inline help Tooltips

Tooltips are a common method for providing inline help to users. They are small pop-ups that appear when the user hovers over or clicks on an element, providing additional information or context.

            
                <div class="tooltip">
                Hover over me
                <span class="tooltip-text">This is a tooltip!</span>
                </div>
            
         

Treatment of Feedback

Popup and modals are combined to be also used as Treatment of Feedback (both success and error conditions)

            
                <div class="alert alert-success">
                Success message goes here
                </div>
                <!-- Alert Error -->
                <div class="alert alert-error">
                Error message goes here
                </div>
            
        

Size/position/interaction guidelines for popups/modals

Size: Popups/modals should be appropriately sized based on their content and purpose. They should not be too small or too large, and should be large enough to display all necessary information and controls. For desktop, the recommended size is 500-700px width and 300-500px height. For mobile devices, the size should be adjusted accordingly to fit the smaller screen. Position: Popups/modals should be positioned in the center of the screen Popups/modals should have clear and prominent close or dismiss buttons that are easy to find and use. Popups/modals should be closed by clicking outside of the modalPopups/modals should not be used excessively, Popups/modals should not take up too much screen real estate and hence should be placed on top of the screen.

Navigation Style

For navigation we are using a bottom bar for menu for both desktop and mobile

<!-- Navbar HTML -->
            <nav class="navbar">
              <a href="#" class="navbar-item active">
                <!-- SVG icon removed for simplicity -->
                <span>Home</span>
              </a>
              <a href="#" class="navbar-item">
                <!-- SVG icon removed for simplicity -->
                <span>Search</span>
              </a>
              <a href="#" class="navbar-item">
                <!-- SVG icon removed for simplicity -->
                <span>Add Post</span>
              </a>
              <a href="#" class="navbar-item">
                <!-- SVG icon removed for simplicity -->
                <span>Message</span>
              </a>
              <a href="#" class="navbar-item">
                <!-- Import SVG icon code removed for simplicity -->
                <img style="width:24px;height: 24px;" src="user.png"/>
                <span>Profile</span>
              </a>
            </nav>