Yuchen Hsiao

UI Kit: Color Palette

The design system includes two categories, olive haze color palette and grey color palette.

.Olive Haze Color Palette

OH100

HEX: #FBFBFB

OH200

HEX: #F0EDEB

OH300

HEX: #D0CCBE

OH400

HEX: #B6B0A0

OH500

HEX: #8B8376

OH600

HEX: #6B655A

.Grey Color Palette

G100

HEX: #EFEFEF

G200

HEX: #DADADA

G300

HEX: #BCBBBB

G400

HEX: #90908F

G500

HEX: #605E5E

G600

HEX: #3E3A39

UI Component: Navbar

This design system includes a navigation menu and allows users to navigate to different pages of the website. The navigation bar is responsive to screen size.

.Example

.Code


  <nav class="navbar navbar-expand-lg bg-body-tertiary py-3">
    <div class="container-fluid">
      <a class="navbar-brand" href="#"><img src="../img/logo.png" class="img-fluid" alt="..."
          width="60px"></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll"
        aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarScroll">
        <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#">About</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              Project<i class="bi bi-arrow-down-circle px-1"></i>
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Project-1</a></li>
              <li><a class="dropdown-item" href="#">Project-2</a></li>
              <li><a class="dropdown-item" href="#">Project-3</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Resume</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

UI Component: Buttons

This design system includes two styles of buttons, each with four different states.

.Example

Primary Button

Secondary Button

.Code


  <button type="button" class="btn btn-bd-primary">Default</button>
  <button type="button" class="btn btn-bd-primary active">Active</button>
  <button type="button" class="btn btn-bd-hover">Hover</button>
  <button type="button" class="btn btn-bd-primary" disabled>Disabled</button>
  
  <button type="button" class="btn btn-bd-secondary">Default</button>
  <button type="button" class="btn btn-bd-secondary active">Active</button>
  <button type="button" class="btn btn-bd-secondary-hover">Hover</button>
  <button type="button" class="btn btn-bd-secondary" disabled>Disabled</button>

UI Component: Card

This design system includes three styles of buttons, each with four different states. The card is responsive to screen size.

.Example

Card title

With supporting text below as a natural lead-in to additional content.

View Project

.Code


  <div class="card mb-3 border-0" style="max-width: 100%;">
    <div class="row g-0">
      <div class="col-md-4">
        <div class="card-body">
          <h3 class="card-title">Card title</h3>
          <hr width="70px;" align="left">
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        </div>
        <div class="card-body"><a href="#"><u>View Project<i class="bi bi-arrow-right-circle px-1"></i></u></a>
        </div>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-7">
        <img src="../img/img.png" class="img-fluid" alt="...">
      </div>
    </div>
  </div>

UI Component: Footer

This design system includes a footer, including copyright information. The footer is responsive to screen size.

.Example

.Code


  <footer class="navbar navbar-expand-lg bg-body-tertiary py-3">
    <div class="container-fluid">
      <a class="nav-link">Copyright<span>©</span>Yuchen Hsiao</a>
    </div>
  </footer>