Design System Breakdown

Styles

Color Guidance

Neutral Shades

Grey 900

HEX:1b1b1b

Grey 800

HEX:505050

Grey 700

HEX:707070

Grey 600

HEX:a5a5a5

Grey 500

HEX:b6b5b5

Grey 400

HEX:e6e6e6

Grey 300

HEX:efefef

Grey 200

HEX:f2f2f2

Grey 100

HEX:F8F8F8

Grey 200 HEX:f8f8f8

Grey 200 HEX:f2f2f2

Grey 200 HEX:f8f8f8

EJS HTML CSS

                 /* ===== color grey ===== */
                 .Grey900 {
                    color: var(--Grey900);
                }
                .Grey800 {
                    color: var(--Grey800);
                }
                .Grey700 {
                    color: var(--Grey700);
                }
                .Grey600 {
                    color: var(--Grey600);
                }
                .Grey500 {
                    color: var(--Grey500);
                }
                .Grey400 {
                    color: var(--Grey400);
                }
                .Grey300 {
                    color: var(--Grey300);
                }
                .Grey200 {
                    color: var(--Grey200);
                }
                .Grey100 {
                    color: var(--Grey100);
                }
              /* ===== color grey ===== */
              /* ===== bg color grey ===== */
                .GreyBg900 {
                    background: var(--Grey900);
                }
                .GreyBg800 {
                    background: var(--Grey800);
                }
                .GreyBg700 {
                    background: var(--Grey700);
                }
                .GreyBg600 {
                    background: var(--Grey600);
                }
                .GreyBg500 {
                    background: var(--Grey500);
                }
                .GreyBg400 {
                    background: var(--Grey400);
                }
                .GreyBg300 {
                    background: var(--Grey300);
                }
                .GreyBg200 {
                    background: var(--Grey200);
                }
                .GreyBg100 {
                    background: var(--Grey100);
                }
                .WhiteBg {
                    background-color: var(--white);
                
                }
                .WhiteBgTrans {
                    background-color: var(--White-transparent);
                }
              /* ===== bg color grey ===== */

Brand Colors

teal800

HEX:e6e6e6

teal600

HEX:292929

teal500

HEX:757575

teal300

HEX:757575

teal100

HEX:fcf5eb

Beach 400

HEX:e6e6e6

Functional Colors

Alert

HEX:CC3300

Alert light

HEX:292929

Success

HEX:fcf5eb

Success light

HEX:fcf5eb

Sandy

HEX:fcf5eb

EJS HTML CSS

            /* ===== color vickywang.me ===== */
            .Warm {
                color: var(--Warm);
            }
            .SkylineBlue {
                color: var(--colorTealDk);
            }
            .SkylineBlueDarker {
                color: var(--colorTealLt);
            }
            .SkylineBlueDarkerer {
                color: var(--colorTealLtr);
            }
            .SkylineBlueDarkerest {
                color: var(--colorTealLtest);
            }
            .BgAlet {
                color: var(--alert);
            }
          /* ===== color vickywang.me ===== */
          /* ===== bg color vickywang.me ===== */
            .BgWarm {
                background-color: var(--Warm);
            }
            .bgTeal800 {
                background-color: var(--colorTealDk);
            }
            .SkylineBlueDarker {
                background-color: var(--colorTealLt);
            }
            .SkylineBlueDarkerer {
                background-color: var(--colorTealLtr);
            }
            .SkylineBlueDarkerest {
                background-color: var(--colorTealLtest);
            }
            .BgAlet {
                background-color: var(--alert);
                color: var(--Grey200);
            }
           /* ===== bg color vickywang.me ===== */

Typography

fontFamily

Lato

EJS HTML CSS

font-family: 'Lato', sans-serif;

fontWeight

Light

Regular

Medium

Bold

Font-weight: 100

Font-weight: 300

Font-weight: 400

Font-weight: 700

EJS HTML CSS

.fontWeight100 {
    font-weight: 100;

}
.fontWeight300 {
    font-weight: 300;

}
.fontWeight400 {
    font-weight: 400;
}

.fontWeight700 {
    font-weight: 700;
}

fontSize

Display

h1

h2

h3

h4

h5

h6

Display 1, Lorem ipsum dolor sit amet

Display 2, Lorem ipsum dolor sit amet

h1 - margin: top & button 0.75em, Lorem ipsum dolor sit amet

h2 - margin: top & button 0.75em, Lorem ipsum dolor sit amet

h3 - margin: top & button 0.75em, Lorem ipsum dolor sit amet

h4 - margin: top & button 0.75em, Lorem ipsum dolor sit amet

h5 - margin: top & button 0.75em, Lorem ipsum dolor sit amet

h6 - margin: top & button 0.75em, Lorem ipsum dolor sit amet

Paragraph - Lorem ipsum dolor sit amet

EJS HTML CSS

h1 {
    font-size: clamp(1.3em, 1.8vw, 2.2em);
    /* - first one is the minimum allowed font-size.
      - third one is the maximum allowed font-size.
      - second argument is font-size that you wish to always have. */
    margin-top: clamp(0.67em, 0.75em, 1.5em);
    margin-bottom: clamp(0.67em, 0.75em, 1.5em);
}

h2 {
    font-size: clamp(1.2em, 1.46vw, 1.68em);
    margin-top: clamp(0.67em, 0.75em, 1.5em);
    margin-bottom: clamp(0.67em, 0.75em, 1.5em);
}

h3 {
    font-size: clamp(1.04em, 1.26vw, 1.48em);
    margin-top: clamp(0.42em, 0.56em, 1.2em);
    margin-bottom: clamp(0.42em, 0.56em, 1.2em);
}

h4 {
    font-size: clamp(0.92em, 1.12vw, 1.2em);
    margin-top: clamp(0.36em, 0.4em, 1em);
    margin-bottom: clamp(0.36em, 0.4em, 1em);
}


h5 {
    font-size: clamp(0.84em, 0.92vw, 1em);
    margin-top: clamp(0.2em, 0.4em, 1em);
    margin-bottom: clamp(0.2em, 0.4em, 1em);
}

h6 {
    font-size: clamp(0.72em, 0.78vw, 0.86em);
    margin: 0.26em 0;
}

p.light {
    font-weight: 100;
}

p {
    /*     font-size: clamp(0.83em, 1.06vw, 1.2em); */

    font-size: clamp(0.8em, 1vw, 1.1em);

    font-weight: 300;
}

/* default/normal */
p.thick {
    font-weight: 500;
}

strong {
    font-family: 'lato', sans-serif;
    font-weight: 400;
    color: var(--Grey900);
    margin: 1em, 0;
}

.styleCap {
    text-transform: uppercase;
}

.textItalic {
    font-style: italic;
}

fontOthers

Note

text decoration

Note, Lorem ipsum dolor sit amet

text decoration

EJS HTML CSS

a:link.textUnderline {
    text-decoration-line: underline;
    text-decoration-thickness: 0.03em;
    text-underline-offset: 6px;
    text-decoration-color: var(--Grey900);
}

.textUnderline {
    text-decoration-line: underline;
    text-decoration-thickness: 0.03em;
    text-underline-offset: 6px;
    text-decoration-color: var(--Grey900);
}

/* text*/

.allCaps {
    text-transform: uppercase;
}

.strikethrough {
    text-decoration: line-through;
}

.textDecor {
    text-decoration: underline;
    text-decoration-style: double;
    text-decoration-thickness: 2px;
}

Wordmark

Logo with Text

Web Logo

Elevation

Shadow & Depth

Small Shadow

Normal Shadow

Larger Shadow

Small Shadow

Normal Shadow - light

Larger Shadow

Layout

Devices

Mobile

Tablet

Laptop

Break Points

Monitor

1880 px +

HEX 161616

Laptop

1080 px

HEX 161616

Tablet

680 px

HEX 161616

Mobile

480 px

EJS HTML CSS

 
          @media all and (min-width: 1880px) {}
          @media all and (max-width: 1080px) {}
          @media all and (max-width: 680px) {}
          @media screen and (max-width: 480px) {}

Spacing & Margin

XS 8 px / 0.5 em

S 16 px / 1 em

M 24 px / 1.5 em

L 32 px / 2 em

XL 40 px / 2.5 em

Max 48 px / 3 em

EJS HTML CSS

<div class="noMargin"></div>
<div class="marginXS"></div>
<div class="marginS"></div>
<div class="marginM"></div>
<div class="marginL"></div>
<div class="marginXL"></div>
<div class="marginMax"></div>

.noMargin {
    margin: 0 !important;
}
.marginXS {
    margin: 0.5em;
}
.marginS {
    margin: 1em;
}
.marginM {
    margin: 1.5em;
}
.marginL {
    margin: 2em;
}
.marginXL {
    margin: 2.5em;
}
.marginMax {
    margin: 3em;
}

Padding

XS 6 px

S 10 px

M 14 px

L 18 px

XL 22 px

Max 26 px

EJS HTML CSS

<div class="paddingXS"></div>
<div class="paddingS"></div>
<div class="paddingM"></div>
<div class="paddingL"></div>
<div class="paddingXL"></div>
<div class="paddingMax"></div>

.paddingXS {
    padding: var(--paddingXS);
    width: fit-content;
  }
  .paddingS {
      padding: var(--paddingS);
      width: fit-content;
  }
  .paddingM {
      padding: var(--paddingM);
      width: fit-content;
  }

  .paddingL {
      padding: var(--paddingL);
      width: fit-content;
  }
  .paddingXL {
      padding: var(--paddingXL);
      width: fit-content;
  }
  .paddingMax {
      padding: var(--paddingMax);
      width: fit-content;
  }

Border Radius

XS 4 px / 0.25 em

S 8 px / 0.5 em

M 12 px / 0.75 em

L 16 px / 1 em

XL 24 px / 1.25 em

Max 50%

EJS HTML CSS

<div class="borderRadiusXS"></div>
<div class="borderRadiusS"></div>
<div class="borderRadiusM"></div>
<div class="borderRadiusL"></div>
<div class="borderRadiusXL"></div>
<div class="borderRadiusMax"></div>

.borderRadiusXS {
    border-radius: var(--border-radiusXS);
    -webkit-border-radius: var(--border-radiusXS);
    -moz-border-radius: var(--border-radiusXS);
}
.borderRadiusS {
    border-radius: var(--border-radiusS);
    -webkit-border-radius: var(--border-radiusS);
    -moz-border-radius: var(--border-radiusS);
}
.borderRadiusM {
    border-radius: var(--border-radiusM);
    -webkit-border-radius: var(--border-radiusM);
    -moz-border-radius: var(--border-radiusM);
}
.borderRadiusL {
    border-radius: var(--border-radiusL);
    -webkit-border-radius: var(--border-radiusL);
    -moz-border-radius: var(--border-radiusL);
}
.borderRadiusXL {
    border-radius: var(--border-radiusXL);
    -webkit-border-radius: var(--border-radiusXL);
    -moz-border-radius: var(--border-radiusXL);
}

.borderRadiusMax {
    border-radius: var(--border-radiusMax);
    -webkit-border-radius: var(--border-radiusMax);
    -moz-border-radius: var(--border-radiusMax);
}

Responsive Grid

Basic Grid

EJS HTML CSS

<div class="Grid Grid--gutters Grid--full u-textCenter">
    <div class="Grid-cell"><div class="Demo content-1of1"></div></div>
  </div>
  <div class="Grid Grid--gutters Grid--cols-2 u-textCenter">
    <div class="Grid-cell"><div class="Demo content-1of2"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of2"></div></div>
  </div>
  <div class="Grid Grid--gutters Grid--cols-3 u-textCenter">
    <div class="Grid-cell"><div class="Demo content-1of3"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of3"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of3"></div></div>
  </div>
  <div class="Grid Grid--gutters Grid--cols-4 u-textCenter">
    <div class="Grid-cell"><div class="Demo content-1of4"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of4"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of4"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of4"></div></div>
  </div>
  <div class="Grid Grid--gutters Grid--cols-6 u-textCenter">
    <div class="Grid-cell"><div class="Demo content-1of6"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"></div></div>
  </div>
  <div class="Grid Grid--gutters Grid--cols-8 u-textCenter">
    <div class="Grid-cell"><div class="Demo content-1of8"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of8"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of8"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of8"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of8"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of8"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of8"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of8"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of8"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of8"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of8"></div></div>
    <div class="Grid-cell"><div class="Demo content-1of8"></div></div>
  </div>

Left / Center / Right Content Alignment

EJS HTML CSS

<div class="Grid Grid--gutters Grid--1of6">
    <div class="Grid-cell"><div class="Demo content-1of6"></div></div>
    <div class="Grid-cell"><div class="Demo">auto</div></div>
  </div>
  <div class="Grid Grid--gutters Grid--1of4">
    <div class="Grid-cell"><div class="Demo content-1of4"></div></div>
    <div class="Grid-cell"><div class="Demo">auto</div></div>
  </div>
  <div class="Grid Grid--gutters Grid--1of3">
    <div class="Grid-cell"><div class="Demo content-1of3"></div></div>
    <div class="Grid-cell"><div class="Demo">auto</div></div>
  </div>

Vertical Alignment

This cell should be top-aligned.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor sit amet consectetur adipiscing elit duis tristique. Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Dictumst quisque sagittis purus sit amet volutpat consequat mauris.In fermentum posuere urna nec.

This cell should be center-aligned.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

This cell should be bottom-aligned.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

EJS HTML CSS

<div class="Grid Grid--gutters Grid--1of2">
    <div class="Grid-cell"><div class="Demo content-1of2"></div></div>
    </div>
    
    <div class="Grid Grid--gutters Grid--1of2 Grid--center">
      <div class="Grid-cell"><div class="Demo content-1of2"></div></div>
    </div>
    
    <div class="Grid Grid--gutters Grid--1of2 Grid--right">
      <div class="Grid-cell"><div class="Demo content-1of2"></div></div>
    </div>

Nesting

auto

EJS HTML CSS

<div class="Grid Grid--gutters Grid--1of3 Grid--nested">
  <div class="Grid-cell">
    <div class="Demo content-1of3"></div>
  </div>
  <div class="Grid-cell">
    <div class="Demo">
      <div class="Grid Grid--gutters Grid--1of3 Grid--nested">
        <div class="Grid-cell">
          <div class="Demo content-1of3"></div>
        </div>
        <div class="Grid-cell">
          <div class="Demo">
            <div class="Grid Grid--gutters Grid--1of3 Grid--nested">
              <div class="Grid-cell">
                <div class="Demo content-1of3"></div>
              </div>
              <div class="Grid-cell">
                <div class="Demo">auto</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Sidebar and Main Content

auto

EJS HTML CSS

<div class="Grid Grid--gutters Grid--1of6">
    <div class="Grid-cell">
        <div class="Demo content-1of6"></div>
    </div>
    <div class="Grid-cell">
        <div class="Demo">auto</div>
    </div>
</div>
<div class="Grid Grid--gutters Grid--1of4">
    <div class="Grid-cell">
        <div class="Demo content-1of4"></div>
    </div>
    <div class="Grid-cell">
        <div class="Demo">auto</div>
    </div>
</div>
<div class="Grid Grid--gutters Grid--1of3">
    <div class="Grid-cell">
        <div class="Demo content-1of3"></div>
    </div>
    <div class="Grid-cell">
        <div class="Demo">auto</div>
    </div>
</div>

Fixed-width Container on the Right Side

EJS HTML CSS

<div class="rowToColumn">
    <div class="widthMax">
        <div class="Demo ">
            <div class="elementInnerDemo max-width"></div>
        </div>
    </div>
    <div class="paddingleft">
        <div class="Demo widthFitContent">
            <div class="elementInnerDemo fix-width"></div>
        </div>
    </div>
</div>

Atoms (Basic Elements)

Atoms are the fundamental building blocks of our design system, representing the smallest, basic UI elements. Examples include buttons, text fields, and icons. They can be used as-is or combined to create more complex components. Atoms are versatile and reusable across different parts of the design.

base_buttons

Buttons

EJS HTML CSS

          <!-- Large button -->
          <a> <button class="buttonLanding">Button &nbsp; </button></a>
          <a> <button class="buttonLanding arrButton">Button &nbsp;</button></a>
          <!-- Large button -->

          <!-- Small button -->
          <a> <button class="button-35 DS">Button</button></a>
          <!-- Small button -->

base_icons

Icons

EJS HTML CSS

<img src="../icon/arrow-down.svg" alt="Arrow Down">
<img src="../icon/arrow-up.svg" alt="Arrow Uo">
<img src="../icon/arrow-back.svg" alt="Arrow Back">
<img src="../icon/arrow-forward.svg" alt="Arrow Forward">
<img src="../icon/plus.svg" alt="Plus">
<img src="../icon/minus.svg" alt="Minus">
<img src="../icon/delete.svg" alt="Delete">
<img src="../icon/arrow-nw.svg" alt="Arrow NW">
<img src="../icon/arrow-ne.svg" alt="Arrow NE">
<img src="../icon/arrow-sw.svg" alt="Arrow SW">
<img src="../icon/arrow-se.svg" alt="Arrow SE">
<img src="../icon/in.svg" alt="LinkedIn">
<img src="../icon/ins.svg" alt="Instagram">
<img src="../icon/git.svg" alt="GitHub">
<img src="../icon/Codepen.svg" alt="CodePen">
<img src="../icon/iconFigma.svg" alt="Figma">
<img src="../icon/mail.svg" alt="Mail">
<img src="../icon/icon_clipboard-tick.svg">
<img src="../icon/icon_Testing.svg">
<img src="../icon/Document.svg" alt="Document">
<img src="../icon/Receipt.svg" alt="Arrow Up">
<img src="../icon/icon_research.svg" alt="Research">
<img src="../icon/iconAlert.svg" alt="Alert">
<img src="../icon/copy.svg" alt="CodePen">
<img src="../icon/link.svg" alt="Link">
<img src="../icon/icon_Final.svg">
<img src="../icon/note.svg">
<img src="../icon/Category.svg">
<img src="../icon/layout.svg">
<img src="../icon/tag.svg">
<img src="../icon/icon_Iteration.svg">
<img src="../icon/iconCalendar.svg">
<img src="../icon/icon_Redesign.svg">
<img src="../icon/library.svg">
<img src="../icon/components.svg">
<img src="../icon/icon_promotion.svg">
<img src="../icon/IconCompass.svg">
<img src="../icon/Profile.svg">

.iconXS {
    width: 16px;
    margin: 0;
}
.iconS {
    width: 24px;
    margin: 0;
}
.iconM {
    width: 32px;
}
.iconL {
    width: 40px;
}
.iconXL {
    width: 48px;
}
.iconMax {
    width: 56px;
}
.iconDemo {
    margin: 0.6em;
    padding: 1.2em;
    width: 2em;
    height: auto;
    cursor: pointer;
}

base_iconsSizes

Icons Sizes

EJS HTML CSS

<div class="Grid-cell">
    <div class="element">
      <div class="ClipboardBoxIconOnly">
        <button class="ClipboardIconOnly">
          <img class="iconXS hoverGrey100 paddingXL borderRadiusMax" 
            title="Copy to Clipboard" src="../icon/mail.svg" alt="LinkedIn">
          <p class="clickIconCopy">vickyw.design@gmail.com</p>
        </button>
      </div>
    </div>
  </div>
  <div class="Grid-cell">
    <div class="element">

      <div class="ClipboardBoxIconOnly">
        <button class="ClipboardIconOnly">
          <img class="iconS hoverGrey100 paddingXL borderRadiusMax" 
            title="Copy to Clipboard" src="../icon/mail.svg" alt="LinkedIn">
          <p class="clickIconCopy">vickyw.design@gmail.com</p>
        </button>
      </div>

    </div>
  </div>
  <div class="Grid-cell">
    <div class="element">
      <div class="ClipboardBoxIconOnly">
        <button class="ClipboardIconOnly">
          <img class="iconM hoverGrey100 paddingXL borderRadiusMax" 
            title="Copy to Clipboard" src="../icon/mail.svg" alt="LinkedIn">
          <p class="clickIconCopy">vickyw.design@gmail.com</p>
        </button>
      </div>
    </div>
  </div>
  <div class="Grid-cell">
    <div class="element">
      <div class="ClipboardBoxIconOnly">
        <button class="ClipboardIconOnly">
          <img class="iconL hoverGrey100 paddingXL borderRadiusMax" 
            title="Copy to Clipboard" src="../icon/mail.svg" alt="LinkedIn">
          <p class="clickIconCopy">vickyw.design@gmail.com</p>
        </button>
      </div>
    </div>
  </div>
  <div class="Grid-cell">
    <div class="element">
      <div class="ClipboardBoxIconOnly">
        <button class="ClipboardIconOnly">
          <img class="iconXL hoverGrey100 paddingXL borderRadiusMax" 
            title="Copy to Clipboard" src="../icon/mail.svg" alt="LinkedIn">
          <p class="clickIconCopy">vickyw.design@gmail.com</p>
        </button>
      </div>
    </div>
  </div>
  <div class="Grid-cell">
    <div class="element">
      <div class="ClipboardBoxIconOnly">
        <button class="ClipboardIconOnly">
          <img class="iconMax hoverGrey100 paddingXL borderRadiusMax" 
            title="Copy to Clipboard" src="../icon/mail.svg" alt="LinkedIn">
          <p class="clickIconCopy">vickyw.design@gmail.com</p>
        </button>
      </div>
    </div>
  </div>

Links

LinkText

EJS HTML CSS

<%- include(`${templatePath}/shared/base_link`, {          
    linkUrl:``,
    linkText:``
  }) %>

<div class="Grid-cell">
    <div class="element">
        <a href="" class="textUnderline" target="”_blank”">
            <h3>LinkText</h3>
        </a>
    </div>
</div>

Inputs

base_inputs

Password

Password is incorrect

EJS HTML CSS

<div class="wrapper">
  <div class="img__wrap widthS heightS element">
    <div class="img__descriptionDesignSystem">
      <div class="input-field">
        <div class="column">
          <label for="password">
            <h5>Password</h5>
          </label>
          <div class="row">
            <input class="PWinput" type="password" id="password" placeholder="Enter password">
            <button class="passwordArr" type="submit">
              <img src="../icon/arrow-forward.svg" alt="Enter">
            </button>
          </div>
          <div class="pwIncorrectHeight">
            <span id="pwIncorrect">Password is incorrect </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Molecules (Composite Components)

Molecules are groups of atoms bonded together to form functional UI components. They exhibit more complexity and utility than individual atoms. For example, a search bar molecule could consist of a text input atom (field) and an action atom (button). Molecules serve as the foundational elements of more complex interfaces.

Textual Elements

comp_textualElements

_titleParagraph

Problem Overview:

The onboarding process for new users on the BookYourPet platform was cumbersome and unintuitive, leading to user frustration, high dropout rates, and consequently, a decrease in subscription conversions.

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_textualElements_titleParagraph`, { 
  subTitleFont:`h3`,
  subTitle:``, 
  paragraphFont:`h4`, 
  paragraphTxt1:``,
  paragraphTxt2:``,
  paragraphTxt3:``,
  paragraphTxt4:``,
 
  
  }) %>

_titleList

Primary Objective:

Simplify the onboarding flow to reduce user overwhelm.
Improve user understanding of the platform's features and benefits.
Increase the rate of successful onboarding completions and conversions to paid subscriptions.

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_textualElements_titleList`, { 
  listType:``,
  listCircleTitleFontSize:``,
  listCircleTitle:``,
  listTxt1:``,
  listTxt2:``,
  listTxt3:``,
  listTxt4:``,
  }) %>

comp_textualElements

_title

_Title

_subTitle

Sub Title

_subTitle

Sub Title

EJS HTML CSS

<!-- title -->
<%- include('../shared/comp_content_title', {type:'center', title: `enter title`, iconUrl:`${websitePath}/icon/components.svg` }) %>


<!-- sub title -->
<%- include('../shared/comp_content_subtitle_arrow', {spacing: false, message: `subtitle` }) %>

<div class="Grid Grid--full Grid--gutters u-textCenter">
    <div class="Grid-cell">
        <div class="element">
            <h1 class="Grid Grid--center"> 
                <span>Title</span><img class="widthLogo" src="/icon/library.svg" alt="Research">
            </h1>
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="Grid Grid--full Grid--gutters u-textCenter">
        <div class="Grid-cell">
            <div class="element">
                <h2 class="tArrow">
                    Sub Title <img class="seArrow" src="/icon/arrow-se.svg" alt="icon arrow">
                </h2>
            </div>
        </div>
    </div>
</div>

_note

_noBg

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

_bg

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

EJS HTML CSS

<div class="Grid Grid--full Grid--gutters">
    <div class="Grid-cell">
        <div class="element">
            <p class="specialTextNote colorGrey u-textCenter">Lorem ipsum dolor sit amet, consectetur adipiscing
                elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>
    </div>
</div>



<div class="Grid Grid--full Grid--gutters wrapper">
    <div class="Grid-cell">
        <div class="element">
            <div class="element leftVerLine border-radius GreyBg100">
                <h4>
                    <p> <strong>Title </strong></p>
                    <ul>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna aliqua. </li>
                        <li> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                            dolore eu
                            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                            officia
                            deserunt mollit anim id est laborum.</li>
                    </ul>
                </h4>
            </div>
        </div>
    </div>
</div>

_closingMessage

Thank You for Visiting ! Check back soon for more updates and stay tuned !

EJS HTML CSS

<%- include('shared/comp_closingMessage', { version: '', message: ''}) %>


<div class="Grid Grid--full Grid--gutters u-textCenter">
    <div class="Grid-cell">
      <div data-aos="fade-up" class="aos-init aos-animate">
        
        <h4 class="element">
          Thank You for Visiting ! Check back soon for more updates and stay tuned !
        </h4>
        
      </div>
      <a href="/" class=""><img class="widthXS" src="/icon/LOGOtxt.svg" alt="VW" title="vickywang.me"></a>
    </div>
  </div>

Clipboard Copy Field

comp_clipboardCopy

_iconTriger

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_clipboardCopy_iconTriger`, {iconUrl:'', copyContent: ``}) %>

<div class="Grid Grid--full Grid--gutters">
    <div class="Grid-cell">
      <div class="element">
        <div class="ClipboardBoxIconOnly">
          <button class="ClipboardIconOnly">
            <img class="iconMax hoverGrey100 paddingXL borderRadiusMax" title="Copy to Clipboard" src="../icon/mail.svg" alt="LinkedIn">
            <p class="clickIconCopy">vickyw.design@gmail.com</p>
          </button>
        </div>
      </div>
    </div>
  </div>

_inputIconTrigger

Lorem ipsum

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_clipboardCopy_inputIconTriger`, {topLabel:'', inputValue: ``, iconUrl: ``}) %>


<div class="containerCopy element">
    <div class="ClickandCopy">Lorem ipsum</div>
    <div class="copy-text">
      <input type="text" class="text" value="https://www.vickywang.me" />
      <button class="centerHorz"> <img class="iconS" src="../icon/copyWt.svg">
      </button>
    </div>
  </div>

_textFieldTrigger

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_clipboardCopy_textFieldTrigger`, {textField:''}) %>

<div class="Grid Grid--gutters Grid--full Grid--gutters">
    <div class="Grid-cell">
      <div class="element">
        <div class="ClipboardBox clickTxt">
          <button class="Clipboard clickTxt" contenteditable="false">
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
              labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
              laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
              voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

          </button>
        </div>
      </div>
    </div>
  </div>

Adaptive Image Loader

comp_adaptiveImageLoader

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_adaptiveImageLoader`, {
    imgMediumUrl: ``
    imgLargeUrl: ``
    imgSmallUrl: ``
    }) %>

<picture>
  <source media="(min-width:1081px)" srcset="./large_placeholder.jpg">
  <source media="(min-width:651px) and (max-width:1080px)"
    srcset="./medium(default)_placeholder.jpg">
  <source media="(max-width:650px)" srcset="./small_placeholder.jpg">
  <img src="./medium(default)_placeholder.jpg" alt="Adaptive Image Loader" style="width:100%;">
</picture>

Card Elements

comp_card

_clean

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_card_clean`, {
    cardTitle: ``, 
    cardText: `` 
    }) %>

<div class="Grid Grid--full Grid--gutters">
    <div class="Grid-cell">
        <div class="element">
            <h4> <strong> Lorem ipsum</strong> </h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.

                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.

            </p>
        </div>
    </div>
</div>

_border

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_card_border`, {
    cardTitle: ``, 
    cardText: `` 
    }) %>

<div class="Grid Grid--full Grid--gutters">
    <div class="Grid-cell">
        <div class="element">
            <div class="elementInnerL cardAPPOINTA">
                <h4> <strong> Title</strong> </h4>
                <ul>
                    <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                        ut labore et dolore magna aliqua. </li>
                    <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                        ut labore et dolore magna aliqua. </li>
                </ul>
            </div>
        </div>
    </div>
</div>

_gradient

Lorem ipsum

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_card_gradient`, {
    cardTitle: ``, 
    cardText: `` 
    }) %>

<div class="Grid Grid--full Grid--gutters">
    <div class="Grid-cell">
        <div class="element">
            <div class="elementDemoCard">
                <div class="elementInnerDemoCard heightS">
                    <h4> <strong> Title </strong> </h4>
                    <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies. </h5>
                </div>
            </div>
        </div>
    </div>
</div>

Card with Image

comp_cardnImg

_nolink

Lorem

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo.

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_cardnImg_nolink`, {
    cardTitle: ``, 
    cardText: ``
    }) %>

<div class="Grid Grid--full Grid--gutters">
    <div class="Grid-cell">
        <div class="element">
            <div class="shadowBox">
                <img src="./PlaceholderDark_zeroBorderRadius.svg" alt="Placeholder">
                <div class="element">
                    <div class="element">
                        <h5>Lorem</h5>
                        <h3><strong>Lorem ipsum</strong> </h3>
                        <p class="lineHorizAll"></p>
                        <h6> Lorem ipsum dolor sit amet</h6>
                        <h6> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

_bg

tag(s)

Title

Description

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_cardnImg_link`, {
    cardnLinkTopText:`tag(s)`,
    cardnLinkTitle: `Title`, 
    cardnLinkText: `Description`
    }) %>

<div class="Grid Grid--full Grid--gutters">
  <div class="Grid-cell">
    <div class="element">
      <div class="elementCard float cardBorder borderRadiusS shadowBoxLt">
        <img src="./PlaceholderDark_zeroBottomBorderRadius.svg" alt="Placeholder">
        <div class="element">
          <div class="element">
            <h5>Lorem ipsum dolor sit amet</h5>
            <h3 class="arrCard aos-init aos-animate" data-aos="fade-up"><strong>Lorem ipsum</strong></h3>
            <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus
              commodo.</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Audio Player

comp_audioPlayer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0:00 / 0:00

EJS HTML CSS

<div class="wrapper">
  <div class="Grid Grid--full Grid--gutters">
    <div class="Grid-cell">
      <div class="element">
        <div class="element">
          <div class="rowToColumn cardAPPOINTA shadowBox wrapper centerVer">
            <div class="widthMax paddingM">
              <h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum
                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
                qui
                officia deserunt mollit anim id est laborum.
              </h4>
            </div>
            <div class="paddingleft">
              <div class="widthFitContent">
                <div class="audio-container">
                  <audio id="myAudio1">
                    <source src="https://res.cloudinary.com/kreiva/video/upload/v1680162890/new-edm-music-beet-mr-sandeep-rock-141616_zjykff.mp3">
                    Your browser does not support the audio element.
                  </audio>
                  <br>
                  <button class="play-button">Play</button>
                  <div class="time-display">0:00 / 0:00</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Graph Elements

comp_graph

_bar

Lorem ipsum

100%

90%

10%

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_card_clean`, {
    cardTitle: ``, 
    cardText: `` 
    }) %>

<div class="Grid Grid--full Grid--gutters">
    <div class="Grid-cell">
        <div class="element">
            <h4> <strong> Lorem ipsum</strong> </h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.

                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.

            </p>
        </div>
    </div>
</div>

_rate

Lorem ipsum

3/1

Lorem ipsum

1 of 3

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_card_gradient`, {
    cardTitle: ``, 
    cardText: `` 
    }) %>

<div class="Grid Grid--full Grid--gutters">
    <div class="Grid-cell">
        <div class="element">
            <div class="elementDemoCard">
                <div class="elementInnerDemoCard heightS">
                    <h4> <strong> Title </strong> </h4>
                    <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies. </h5>
                </div>
            </div>
        </div>
    </div>
</div>

_vote

Lorem ipsum: 2/3

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_card_gradient`, {
    cardTitle: ``, 
    cardText: `` 
    }) %>

<div class="Grid Grid--full Grid--gutters">
    <div class="Grid-cell">
        <div class="element">
            <div class="elementDemoCard">
                <div class="elementInnerDemoCard heightS">
                    <h4> <strong> Title </strong> </h4>
                    <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies. </h5>
                </div>
            </div>
        </div>
    </div>
</div>

Molecules (Structured Block)

Organisms are complex UI components composed of groups of molecules and atoms working together as a cohesive unit. They form significant sections of an interface, like a website's header, which might include logo, navigation, and search form molecules. Organisms are the culmination of smaller components assembled to function effectively in the UI ecosystem.

Expandable Content

block_expandableContentBlock

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper risus in hendrerit gravida rutrum quisque. Tristique senectus et netus et malesuada fames ac. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Nisl suscipit adipiscing bibendum est ultricies integer quis. Mauris a diam maecenas sed enim ut. Fusce id velit ut tortor pretium viverra. Feugiat sed lectus vestibulum mattis. Lacus suspendisse faucibus interdum posuere lorem ipsum. In aliquam sem fringilla ut morbi tincidunt augue. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. In arcu cursus euismod quis viverra nibh. Nisl tincidunt eget nullam non nisi est sit. Porttitor massa id neque aliquam vestibulum morbi blandit. Blandit libero volutpat sed cras. Ut porttitor leo a diam sollicitudin tempor. Tellus molestie nunc non blandit.

Subtitle

Pretium nibh ipsum consequat nisl vel pretium lectus quam id. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae.
Viverra orci sagittis eu volutpat odio facilisis mauris. Eleifend donec pretium vulputate sapien nec. Tortor condimentum lacinia quis vel eros.

EJS HTML CSS

<div class="Grid Grid--full Grid--gutters wrapper">
    <div class="Grid-cell">
      <div class="element">
        <h3><strong>Title </strong></h3>
        <h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum.</h4>
        <div class="more">
          <div class="blankHXS"></div>
          <h5> <strong> Subtitle </strong> </h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
            et dolore magna aliqua. Semper risus in hendrerit gravida rutrum quisque. Tristique senectus et netus
            et malesuada fames ac. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Nisl suscipit
            adipiscing bibendum est ultricies integer quis. Mauris a diam maecenas sed enim ut. Fusce id velit ut
            tortor pretium viverra. Feugiat sed lectus vestibulum mattis. Lacus suspendisse faucibus interdum
            posuere lorem ipsum. In aliquam sem fringilla ut morbi tincidunt augue. Dolor sit amet consectetur
            adipiscing elit pellentesque habitant morbi tristique. In arcu cursus euismod quis viverra nibh. Nisl
            tincidunt eget nullam non nisi est sit. Porttitor massa id neque aliquam vestibulum morbi blandit.
            Blandit libero volutpat sed cras. Ut porttitor leo a diam sollicitudin tempor. Tellus molestie nunc
            non blandit.</p>
          <h5> <strong> Subtitle </strong> </h5>
          <ul>
            <li class="listCircle">Pretium nibh ipsum consequat nisl vel pretium lectus quam id. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae.</li>
            <li class="listCircle">Viverra orci sagittis eu volutpat odio facilisis mauris. Eleifend donec pretium vulputate sapien nec. Tortor condimentum lacinia quis vel eros.</li>
          </ul>
          <div class="blankHXS"></div>
        </div>
        <button class="toggle buttonTextOnly" >Read More &#8744;</button>
      </div>
    </div>
  </div>

Accordion

block_accordion

_noBg

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

EJS HTML CSS


<div class="wrapper">
    <div class="element">
      <h3 class="accordion accordionBorderTop noMargin "><strong>Title</strong> </h3>
      <div class="accordion-content">
        <div class="blankHXS"></div>
        <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
          laboris nisi ut aliquip ex ea commodo consequat.</h4>
        <div class="blankHXS"></div>
      </div>
  
      <h3 class="accordion noMargin "><strong>Title</strong> </h3>
      <div class="accordion-content">
        <div class="blankHXS"></div>
  
        <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
          laboris nisi ut aliquip ex ea commodo consequat.</h4>
        <div class="blankHXS"></div>
      </div>
      <h3 class="accordion accordionBorderBottom noMargin "><strong>Title</strong> </h3>
  
      <div class="accordion-content">
        <div class="blankHXS"></div>
        <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
          laboris nisi ut aliquip ex ea commodo consequat.</h4>
        <div class="blankHXS"></div>
      </div>
    </div>
  </div>

_bg

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

EJS HTML CSS


<div class="GreyBg100">
    <div class="blankHXS"></div>
  
    <div class="wrapper">
      <div class="element">
        <h3 class="accordion accordionBorderTop noMargin withBg"><strong>Title</strong> </h3>
        <div class="accordion-content">
          <div class="blankHXS"></div>
  
          <div class="Grid Grid--full Grid--gutters">
            <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
              labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
              laboris nisi ut aliquip ex ea commodo consequat.</h4>
          </div>
          <div class="blankHXS"></div>
        </div>
  
        <h3 class="accordion noMargin withBg"><strong>Title</strong> </h3>
        <div class="accordion-content">
          <div class="blankHXS"></div>
  
          <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.</h4>
          <div class="blankHXS"></div>
        </div>
        <h3 class="accordion accordionBorderBottom noMargin withBg"><strong>Title</strong> </h3>
        <div class="accordion-content">
          <div class="blankHXS"></div>
  
          <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.</h4>
          <div class="blankHXS"></div>
        </div>
      </div>
    </div>
    <div class="blankHXS"></div>
  </div>

Carouses

block_carousel

_carouselHoriz_noBg

EJS HTML CSS

<%- include(`${templatePath}/shared/block_carouselHoriz_noBg`) %>

<div class="wrapper">
    <div class=" LRcarousel Grid Grid--gutters Grid--1of4 Grid--center u-textCenter" aria-label="LRcarousel" tabindex="0" id="carousel2">
      <div class="carousel__nav noBg Grid-cell">
        <a class="slider-nav active" aria-label="Go to slide 1">
          <div>Lorem ipsum</div>
        </a>
        <a class="slider-nav" aria-label="Go to slide 2">
          <div>Lorem ipsum</div>
        </a>
        <a class="slider-nav" aria-label="Go to slide 3">
          <div>Lorem ipsum</div>
        </a>
      </div>
      <div class="LRslides Grid-cell">
        <div class="slides-item slide-1" id="slide-1" aria-label="slide 1 of 5" tabindex="0">
          <img src="./PlaceholderDark.svg" alt="">
        </div>
        <div class="slides-item slide-2" id="slide-2" aria-label="slide 2 of 5" tabindex="0">
          <img src="./PlaceholderDark.svg" alt="">

        </div>
        <div class="slides-item slide-3" id="slide-3" aria-label="slide 3 of 5" tabindex="0">
          <img src="./PlaceholderDark.svg" alt="">
        </div>
      </div>
    </div>
  </div>

_carouselHoriz_bg

EJS HTML CSS

<%- include(`${templatePath}/shared/block_carouselHoriz_bg`) %>

<div class="SkylineBlueDarkerer">
    <div class="wrapper">
      <div class="Grid-cell">
        <h2 class="element">Slideshow Title</h2>
      </div>
    </div>
    <div class="wrapper">
      <div class=" LRcarousel Grid Grid--gutters Grid--1of4 Grid--center u-textCenter" aria-label="LRcarousel" Tabindex="0" id="carousel1">
        <div class="carousel__nav Grid-cell">
          <a class="slider-nav" aria-label="Go to slide 1">
            <div>Lorem ipsum</div>
          </a>
          <a class="slider-nav" aria-label="Go to slide 2">
            <div>Lorem ipsum</div>
          </a>
          <a class="slider-nav" aria-label="Go to slide 3">
            <div>Lorem ipsum</div>
          </a>
        </div>
        <div class="LRslides Grid-cell">
          <div class="slides-item slide-1" id="slide-1" aria-label="slide 1 of 5" tabindex="0">
            <img src="./Placeholder.svg" alt="">
          </div>
          <div class="slides-item slide-2" id="slide-2" aria-label="slide 2 of 5" tabindex="0">
            <img src="./Placeholder.svg" alt="">

          </div>
          <div class="slides-item slide-3" id="slide-3" aria-label="slide 3 of 5" tabindex="0">
            <img src="./Placeholder.svg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>

_carouselVert_noBg

Lorem ipsum

EJS HTML CSS

<%- include(`${templatePath}/shared/block_carouselVert_noBg`) %>

<div class="TBcarousel Grid--center Grid Grid--full Grid--gutters u-textCenter" aria-label="TBcarousel" tabindex="0"
    id="TBcarousel2">
    <div class="TBslides">
        <div class="TBslidesItem slide-1" id="slide-1" aria-label="slide 1 of 5" tabindex="0">
            <img src="./PlaceholderDark.svg" alt="">
        </div>
        <div class="TBslidesItem slide-2" id="slide-2" aria-label="slide 2 of 5" tabindex="0"> <img
                src="./PlaceholderDark.svg" alt="">
        </div>
        <div class="TBslidesItem slide-3" id="slide-3" aria-label="slide 3 of 5" tabindex="0"> <img
                src="./PlaceholderDark.svg" alt="">
        </div>
    </div>
    <div class="TBcarouselNav Grid-cell noBg">
        <a class="TBsliderNav active" aria-label="Go to slide 1">
            <div>Lorem ipsum</div>
        </a>
        <a class="TBsliderNav" aria-label="Go to slide 2">
            <div>Lorem ipsum</div>
        </a>
        <a class="TBsliderNav" aria-label="Go to slide 3">
            <div>Lorem ipsum</div>
        </a>
    </div>
</div>

_carouselVert_bg

Lorem ipsum

EJS HTML CSS

<%- include(`${templatePath}/shared/block_carouselVert_bg`) %>

<div class="BgSkylineBlueLter">
    <div class="wrapper">
        <div class="TBcarousel Grid--center Grid Grid--full Grid--gutters u-textCenter" aria-label="TBcarousel"
            tabindex="0" id="TBcarousel1">
            <div class="TBslides">
                <div class="TBslidesItem slide-1" id="slide-1" aria-label="slide 1 of 5" tabindex="0">
                    <img src="./Placeholder.svg" alt="">
                </div>
                <div class="TBslidesItem slide-2" id="slide-2" aria-label="slide 2 of 5" tabindex="0"> <img
                        src="./Placeholder.svg" alt="">
                </div>
                <div class="TBslidesItem slide-3" id="slide-3" aria-label="slide 3 of 5" tabindex="0"> <img
                        src="./Placeholder.svg" alt="">
                </div>
            </div>
            <div class="TBcarouselNav Grid-cell">
                <a class="TBsliderNav active" aria-label="Go to slide 1">
                    <div>Lorem ipsum</div>
                </a>
                <a class="TBsliderNav" aria-label="Go to slide 2">
                    <div>Lorem ipsum</div>
                </a>
                <a class="TBsliderNav" aria-label="Go to slide 3">
                    <div>Lorem ipsum</div>
                </a>
            </div>
            <div class="blankHS"></div>
        </div>
    </div>
</div>

Modals

block_modal

_noBg

EJS HTML CSS

<%- include(`${templatePath}/shared/block_modal_noBg`) %>


<div class="wrapper">
    <div class="Grid Grid--full Grid--gutters u-textCenter">
      <div class="Grid-cell">
        <div class="element">
          <img src="./Placeholder.svg" alt="Background Color: White" class="modal-target" data-bgcolor="rgba(255, 255, 255, 0.96)">
        </div>
      </div>
    </div>
  </div>

_bg

EJS HTML CSS

<%- include(`${templatePath}/shared/block_modal_bg`) %>


<div class="SkylineBlueDarkerer">
    <div class="wrapper">
      <div class="Grid-cell">
        <img src="./Placeholder.svg" alt="Background Color: Others" class="modal-target" data-bgcolor="rgba(230, 246, 246, 0.96)">
      </div>
    </div>
  </div>

Navigation

block_nav

_header

Default

Back with Menu

Back + Text

Logo + Text

EJS HTML CSS

<!-- Main -->

<%- include(`${templatePath}/shared/block_nav_header`, {
    type:'main', 
    currentPage: '',
    PageUrl:`${websitePath}` 
    }) %>


<!-- Back + Text -->
<%- include(`${templatePath}/shared/block_nav_header`, {
    type:'back', 
    currentPage: '',
    PageUrl:`${websitePath}` 
    }) %>

<!-- Back + Text -->
<%- include(`${templatePath}/shared/block_nav_header`, {
    type:'backText', 
    currentPage: '',
    PageUrl:`${websitePath}` 
    }) %>


<!-- Logo + Text -->
<%- include(`${templatePath}/shared/block_nav_header`, {
    type:'logoText', 
    currentPage: '',
    PageUrl:`${websitePath}` 
    }) %>

<nav class="header" id="header">
    <div class="backgroundColorNav">
      <a href="http://vickywang.me/"><img class="logo pointer" src="../icon/LOGO.svg" alt="VW" title="vickywang.me"></a>



      <div class="navbar">
        <ul class="nav-menu">
          <li class="dropdown nav-item active activeNav marginZero"><a href="/" class="nav-link box">PROJECT</a>
            <div class="dropdown-content">

              <a href="/seer/">
                <div class="SEER">
                  <img src="../ProjectImages/Cover_SEER.png" alt="SEER">
                  <div class="element">
                    <h5 class="colorBlack">SEER | Marketing Manager Tracking Business Performance</h5>
                  </div>
                </div>
              </a>
              <a href="/appointa/">
                <div class="APPOINTA">
                  <img src="../ProjectImages/Cover_APPOINTA.png" alt="APPOINTA">
                  <div class="element">
                    <h5 class="colorBlack">APPOINTA | Recruiter Appointment Scheduling</h5>
                  </div>
                </div>
              </a>
              <a href="/design_system/">
                <div>
                  <img src="../ProjectImages/vicky_website.png" alt="Design System">
                  <div class="element">
                    <h5 class="colorBlack">Design System | Efficiently Bulid &amp; Maintain Components</h5>
                  </div>
                </div>
              </a>
              <a href="/navigation/">
                <div>
                  <img src="../ProjectImages/vicky_website.png" alt="Navigation Design">
                  <div class="element">
                    <h5 class="colorBlack">Navigation Design | Secondary Menu Options for vickywang.me</h5>
                  </div>
                </div>
              </a>

            </div>
          </li>

          <li class="nav-item inactive marginZero"><a href="/architecture" class="nav-link box ">ARCHITECTURE</a>
          </li>
          <li class="nav-item inactive marginZero"><a href="/photography" class="nav-link box ">PHOTOGRAPHY</a>
          </li>
          <li class="nav-item inactive marginZero"><a href="/blog" class="nav-link box ">BLOG</a>
          </li>

          <li class="nav-item inactive marginZero"><a href="/about" class="nav-link box ">ABOUT</a>
          </li>
        </ul>

      </div>
      <div class="hamburger">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </div>
  </nav>

_rightPanel

EJS HTML CSS

<nav class="section-navDEMO">
    <ol>
      <li class=""><a class="titleRightPanel">Sub Nav Title </a>
        <ul class="">
          <li class="rightPanel"><a> &nbsp; SubTitle</a></li>
          <li class="rightPanel"><a> &nbsp; SubTitle</a></li>
          <li class="rightPanel"><a> &nbsp; SubTitle</a></li>

        </ul>
      </li>
      <li class=""><a class="titleRightPanel">Sub Nav Title </a>
        <ul class="">
          <li class="rightPanel"><a> &nbsp; SubTitle </a></li>
          <li class="rightPanel"><a> &nbsp; SubTitle</a></li>
          <li class="rightPanel"><a> &nbsp; SubTitle</a></li>


        </ul>
      </li>


    </ol>
  </nav>

_footer

EJS HTML CSS

<%- include(`${templatePath}/shared/comp_card_gradient`, {
    cardTitle: ``, 
    cardText: `` 
    }) %>

<div class="Grid Grid--full Grid--gutters">
    <div class="Grid-cell">
        <div class="element">
            <div class="elementDemoCard">
                <div class="elementInnerDemoCard heightS">
                    <h4> <strong> Title </strong> </h4>
                    <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies. </h5>
                </div>
            </div>
        </div>
    </div>
</div>

Navigation Exploration

Developing a more structured and logical navigation system for displaying case studies

Code Snippet Explorer

block_tabs_copyCode

EJS HTML CSS

Demo - Insert ejs code

Demo - Insert html code

Demo - Insert css code

EJS HTML CSS

<%- include('../shared/block_tabs_copyCode', 
{ Name: '', idTab1:'',idTab2:'',idTab3:'', tab1:'checked',tab2:'',tab3:'',
  CCspacing: false,
  EJS: ejsLiterals.ejs.comp_card_gradient,
  HTML: ejsLiterals.html.comp_card_gradient,
  CSS: ``
}) %>

<div class="wrapper">
    <div class="Grid Grid--full Grid--gutters">
      <div class="Grid-cell">
        <div class="element">
          <div class="filed">
            <div class="tab-container">
              <div class="tabs">
                <input type="radio" class="select-EJS" name="Demo" id="Tdemo1" checked="">
                <label for="Tdemo1" class="tab">EJS</label>
                <input type="radio" class="select-HTML" name="Demo" id="Tdemo2">
                <label for="Tdemo2" class="tab">HTML</label>
                <input type="radio" class="select-CSS" name="Demo" id="Tdemo3">
                <label for="Tdemo3" class="tab">CSS</label>
              </div>
              <button class="copy-btn" style="display:inline;">Copy Code</button>
            </div>
            <div class="ejs-block code-block" style="display: none;">
              <pre class="ejs-code"><code>Insert ejs code</code></pre>
            </div>
            <div class="html-block code-block" style="display:none;">
              <pre class="html-code"><code>Insert html code</code></pre>
            </div>
            <div class="css-block code-block" style="display: block;">
              <pre class="css-code"><code>Insert css code</code></pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Design System

Click, hover, or adjust the viewport to observe the responsive layout and component behavior

Design, implement, and maintain this website since October 2020

Design System

Click, hover, or adjust the viewport to observe the responsive layout and component behavior

Design, implement, and maintain this website since October 2020

Design System

Click, hover, or adjust the viewport to observe the responsive layout and component behavior

Design, implement, and maintain this website since October 2020

Context

Main goal

Timeline

2022 - present

Skills

Design System

Responsive design

HTML/CSS/JavaScript

Role

Design

Implement

Test

Iterate

Tool

VS Code

WebAIM

Photoshop

Design System Breakdown

Styles

Color Guidance

Neutral Shades

Brand Colors

Functional Colors

Typography

Light

Regular

Medium

Bold

Font-weight: 100

Font-weight: 300

Font-weight: 400

Font-weight: 700

h1

h2

h3

h4

h5

h6

h1 - margin: top & button 0.75em, Lorem ipsum dolor sit amet

h2 - margin: top & button 0.75em, Lorem ipsum dolor sit amet

h3 - margin: top & button 0.75em, Lorem ipsum dolor sit amet

h4 - margin: top & button 0.75em, Lorem ipsum dolor sit amet

h5 - margin: top & button 0.75em, Lorem ipsum dolor sit amet

h6 - margin: top & button 0.75em, Lorem ipsum dolor sit amet

text decoration

text decoration

text decoration

text decoration

Wordmark

Logo with Text

Web Logo

Elevation

Shadow & Depth

Layout

Devices

Break Points

Monitor

Laptop

Tablet

Mobile

Spacing & Margin

Padding

Border Radius

Responsive Grid

Basic Grid

Left / Center / Right Content Alignment

Vertical Alignment

Nesting

Sidebar and Main Content

Fixed-width Container on the Right Side

Atoms (Basic Elements)