Command TV Pattern Library

Home Dashboard

Welcome to Our Pattern Library,

Explore our design guidelines and components for building a beautiful web application

Get Started

Typography

This is Barlow, our brand typeface.

Barlow is a clean, modern, and readable sans-serif typeface. Easily customized with multiple weights and sizes, as shown below, for flexible use.

Weights

We have four different font weights. 'Light', 'Regular', 'Semi-Bold', and 'Bold'. This styling can be added by using the class selectors below.


                                                      .weight300 {
                                  font-weight: 300;
                                }
                                
                                .weight400 {
                                  font-weight: 400;
                                }
                              
                                                      .weight500 {
                                  font-weight: 500;
                                 }
                                    
                              .weight700 {
                                  font-weight: 700;
                                 }

Sizing

This is xs light text. This is xs regular text. This is xs semi-bold text. This is xs bold text.

This is s light text. This is sm regular text. This is sm semi-bold text. This is sm bold text.

This is md light text. This is md regular text. This is md semi-bold text. This is md bold text.

This is lg light text. This is lg regular text. This is lg semi-bold text. This is lg bold text.

This is xl light text. This is xl regular text. This is xl semi-bold text. This is xl bold text.

This is xxl light text. This is xxl regular text. This is xxl semi-bold text. This is xxl bold text.

Color

Blue Gem

--colorPrimaryPurple

#3B118D

Jazzberry Jam

--colorSecondaryMagenta

#B21666

Royal Fuchsia

--colorAccentPink

#C33C96

Deluge

--colorPurpleTint

#7658AF

Bashful Pink

--colorMagentaTint

#C95C94

Sky Magenta

--colorPinkTint

#D577B6

Violent Violet

--colorPurpleShade

#290C63

Rose Bud Cherry

--colorMagentaShade

#7D0F47

Boysenberry

--colorPinkShade

#892A69

Functional Colors

Black

--colorBlack

#050505

Dark Gray

--colorDarkGrey

#222222

Medium Gray

--colorGrey

#7F7F7F

Soft Gray

--colorLightGrey

#EEEEEE

Alabaster

--colorWhiteText

#FAFAFA

Alabaster

--colorWhiteText

#FAFAFA

Page Layout

Notes

Page layouts structure and organize content, ensuring a legible and user-friendly navigation throughout the website.

Code

Example

1/1

1/2

1/3

Aside

Main

Data Visualization

Notes

Data visualization simplifies complex information, transforming it into easily comprehensible and visually appealing charts and graphs that enable users to quickly gain insights and make informed decisions.

Examples

Line Chart

Combo Chart

Area Chart

Stacked Area Chart

Column Chart

Stacked Column Chart

Doughnut Chart

Animations

Notes

Animations on a website capture the userrs attention, making the content more visually compelling and helping to convey information and navigate the site.

Code

Example

Container Hover

Button Hover

Nav Element Not Selected

Nav Element Selected

Buttons

Notes

Buttons are used to allow the user to submit data, clear alerts, and follow to different pages. Below are some examples of different button stylings.

Button Library

CTA Button

Ghost Button

Toggle Button

Dropdown Button

html code for the following button elements

Card

Notes

Cards can be used for displaying data in a clean and organized way. Below are some examples of different card layouts.

This is a card with no image

This is a card with a top image

This is a card with a left-aligned image

This is a card with a right-aligned image

Toggle

Notes

Simple toggle switches for enabling and disabling options.

Code


        label class="switch">
        input type="checkbox">
        span class="slider">/span>
        /label>
        
        label class="switch">
        input type="checkbox">
        span class="slider round">/span>
        /label>

Example

Navigation

Notes

Horizontal and vertical site navigation bars.

Code

                        div class="hNav">
                        a href="#">img src="./images/CTVIcon.png" alt="logo">/a>
                        a href="#">Home/a>
                        a href="#">Data/a>
                        a href="#">Contact Us/a>
                    /div>
        
                    div class="vNav">
                        a href="#">img src="./images/CTVIcon.png" alt="logo">/a>
                        a href="#">Home/a>
                        a href="#">Data/a>
                        a href="#">Contact Us/a>
                    /div>

Example

Home Data Contact Us

Footer

Notes

A footer that includes the logo to navigate back to the top of the main page, a brief description about CommandTV, as well as a copyright section.

Code

footer

 href

= "#Typography" >

img

 class

= "icon"

src

= "images/CTVIcon.png" >

a >

div >

 class

= "exampleHeader"

 About CommandTV

div >

 class

= "aboutCommandtv" >

        About CommandTV Description

p >

! -- Copyright -->

span >

div >

 class

= "copyright"

 Copyright © 2023

/ div >

div >

 class

= "commandTV"

 CommandTV

/ div >

span >

/ footer >

Example

Icons

Notes

Icons play an important role for the user to navigate around the website, and is therefore important that they are recognizable, simple, and visually appealing.

Code

img

 class

= "iconSample iconSize"

src

= "images/home.png" >

img

 class

= "iconSample iconSize"

src

= "images/profile.png" >

img

 class

= "iconSample iconSize"

src

= "images/menu.png" >

img

 class

= "iconSample iconSize"

src

= "images/search.png" >

img

 class

= "iconSample iconSize"

src

= "images/settings.png" >

img

 class

= "iconSample iconSize"

src

= "images/microphone.png" >

img

 class

= "iconSample iconSize"

src

= "images/credit_card.png" >

span

 class

= "iconSample iconSize material-symbols-outlined" >

    developer_buide

/ span >

span

 class

= "iconSample iconSize material-symbols-outlined" >

    apps

/ span >

span

 class

= "iconSample iconSize material-symbols-outlined" >

    brush

/ span >

Example

Home

Profile

Search

Settings

Microphone

Credit Card

developer_guide

Guidelines

apps

Components

brush

Style Utilities

Logo

Notes

The CommandTV logo is a symbol of who we are that is displayed across our website.

Code

! -- Header Part -->

header >

 href

= "#Typography" >

img

 class

= "icon"

src

= "images/CTVIcon.png" >

a >

 class

= "textSizeL" > Command TV Pattern Library / h1 >

/ header >

! -- Hero Part -->

div

id

= "home" >

div

 class

= "hero" >

 class

= "textSizeM weight500" > Welcome to Our Pattern Library, / p >

 class

= "textSizeXXL weight500" > Explore our design guidelines and components for building a beautiful web application / p >

 href

= "#Typography"

 class

= "cta-button textSizeM weight500" > Get started / a >

div >

img

src

= "images/CTVIconWhite.png" >

div >

! -- Footer Part -->

footer

 href

= "#Typography" >

img

 class

= "icon"

src

= "images/CTVIcon.png" >

a >

div >

 class

= "exampleHeader"

 About CommandTV

div >

 class

= "aboutCommandtv" >

        About CommandTV Description

p >

! -- Copyright -->

span >

div >

 class

= "copyright"

 Copyright © 2023

/ div >

div >

 class

= "commandTV"

 CommandTV

/ div >

span >

/ footer >

Example

Hero Part

Welcome to Our Pattern Library,

Explore our design guidelines and components for building a beautiful web application

Get Started

Header

Command TV Pattern Library

Flexbox

Introduction

Flexbox is a CSS web layout that allows for easier placement of objects in columns and rows

Justify Content

.j-start

CommandTV

.j-center

CommandTV

.j-end

CommandTV

Flex Align Items

.align-start

CommandTV

.align-start

CommandTV

.align-start

CommandTV

Text Align

Text alignment allows for the adjustment of inline content in block elements or table-cells on the x or y axis

image with a default alignment.

image with a text-top alignment.

image with a middle alignment.

image with a text-bottom alignment.

.vertText-top	CommandTV
.vertText-middle	CommandTV
.vertText-bottom	CommandTV

Text Align: x-axis

.text-left

.text-center

.text-right

Spacing - Margin & Padding

Classes for margin and padding help keep spacing consistent.

Margin - All Sides

Margin - Bottom

Margin - Top

Margin - Left

CommandTV

ml0

CommandTV ml1

CommandTV ml2

CommandTV ml3

CommandTV ml4

CommandTV ml5

Margin - Right

mr0 CommandTV

mr1 CommandTV

mr2 CommandTV

mr3 CommandTV

mr4 CommandTV

mr5 CommandTV

Typography

This is Barlow, our brand typeface.

Weights

Sizing

Color

Blue Gem

Jazzberry Jam

Royal Fuchsia

Deluge

Bashful Pink

Sky Magenta

Violent Violet

Rose Bud Cherry

Boysenberry

Functional Colors

Black

Dark Gray

Medium Gray

Soft Gray

Alabaster

Alabaster

Page Layout

Notes

Code

Example

Data Visualization

Notes

Examples

Line Chart

Combo Chart

Area Chart

Stacked Area Chart

Column Chart

Stacked Column Chart

Doughnut Chart

Animations

Notes

Code

Example

Container Hover

Button Hover

Button Hover

Buttons

Notes

Button Library

CTA Button

Ghost Button

Toggle Button

Dropdown Button

Card

Notes

This is a card with no image

This is a card with a top image

This is a card with a left-aligned image

This is a card with a right-aligned image

Toggle

Notes

Code

Example

Navigation

Notes

Code

Example

Footer

Notes

Code

Example

Icons

Notes

Code

Example

Home

Profile

Menu

Search

Settings

Microphone

Credit Card

Guidelines

Components