home page 10/25 backup

Diane Liu · UX & Product Designer

Design for humanity

Shaping technologies that touch lives.

💡

UX Research and Design

Budget Buddies

An app that helps disorganized people collaboratively plan, track and manage budgets for shared goals.

HMI Design

Improve HMI for D1

A HMI design project that addresses common challenges faced by ride-hailing drivers to improve their decision making and operational efficiency.

Hardware Interaction

Play of Brilliants

A UX design for car front lighting that simulates human facial expressions to create a companion-like product.

UX Design

Robotaxi Experience in China (WIP)

Designing a user-centric HMI and mobile app for a robotaxi, focusing on delivering essential experiences tailored to Chinese market.

⭐
In Progress progress_activity
image

css



<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=PT+Serif+Caption:ital@1&display=swap" rel="stylesheet">



:root {
  --column-spacing: 3rem !important;
  --lift-radius: 14px !important;
  --body-font: clamp(14px, 1.5vw, 18px);

  --dark-blue: #303437;
  --main-blue: #4f586d;
  --main-blue-faded: rgba(79, 88, 109, 0.8);
  --orange: #b44f2a;
  --icy: #f4f2f2;
  --beige: #f2eee9;
  --dark-green: #988f7a;
  --dark-green-warm: #93865d;
  --beige-faded: rgba(189, 178, 152, 0.3);
  --blue-faded: rgba(78, 85, 91, 0.3);
  --white90: rgba(255, 255, 255, 0.9);
  --dark-grey: #2f3030;
  --yellow: #e9b956;
  --main-light: #edeeee;

  --layout-max-width: 1440px !important;
  --reading-max-width: 700px !important;
  
}

html.theme-light {
  --color-text-default: var(--main-blue) !important;
  --color-bg-default: var(--beige) !important;

  --color-bg-gray-light: var(--icy) !important;

  --color-text-orange: var(--orange) !important;
  --color-bg-orange: var(--orange) !important;

  --color-bg-yellow: var(--color-bg-default) !important;

  --color-text-blue: var(--main-blue) !important;

  --cta-text: var(--white90) !important;
  --cta-bg: var(--orange) !important;

  --sec-cta-stroke: var(--beige-faded);
  --sec-cta-bg: var(--color-bg-default);
  --sec-cta-text: var(--dark-green);
  --button-stroke: var(--main-blue-faded);
}

html.theme-dark {
  --color-text-default: var(--main-light) !important;
  --color-bg-default: var(--dark-blue) !important;

  --color-bg-gray-dark: var(--dark-grey) !important;

  --color-text-orange: var(--yellow) !important;
  --color-bg-orange: var(--yellow);
  --color-bg-orange-light: var(--yellow) !important;

  --color-bg-yellow: var(--color-bg-default) !important;

  --color-text-blue: var(--main-light) !important;
  --cta-text: var(--dark-grey) !important;
  --cta-bg: var(--yellow) !important;

  --sec-cta-stroke: var(--blue-faded);
  --sec-cta-bg: var(--color-bg-default);
  --sec-cta-text: var(--dark-green-warm);

  --button-stroke: var(--white90);
}



/*----------------------*/


.notion-root > .notion-image {
  width: 25%;
  margin: auto;
  padding: 10rem 0rem 1rem 0rem;
}

.bg-brown {
  display: none;
}


.notion-quote {
  border-inline-start: 0 !important;
  display: flex;
  margin: auto;
  padding: 1rem 0rem;
  
  -webkit-animation: fadeIn 0.5s !important;
  -moz-animation: fadeIn 0.5s !important;
  -ms-animation: fadeIn 0.5s !important;
  -o-animation: fadeIn 0.5s !important;
  animation: fadeIn 0.5s !important;
}

.notion-quote .notion-semantic-string {
  color: var(--color-text-default);
  font-size: clamp(1rem, 1.1vw, 1.1rem); /* Responsive font size */
  font-family: Lexend;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

h1 {
  font-family: Merriweather !important;
  font-size: clamp(
    2rem,
    3.125vw,
    3.125rem
  ) !important; /* Adjusts between 2rem and 3.125rem */
  line-height: 140% !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;

  max-width: var(--reading-max-width) !important;
  min-width: var(--lrc-min-width);

  color: var(--color-text-default);
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 1rem 0rem !important;

  -webkit-animation: fadeIn 0.5s !important;
  -moz-animation: fadeIn 0.5s !important;
  -ms-animation: fadeIn 0.5s !important;
  -o-animation: fadeIn 0.5s !important;
  animation: fadeIn 0.5s !important;
}


/*-----------------*/
.highlighted-color.color-orange {
  color: var(--color-text-orange);
  text-align: center;
  font-family: Mulish;
  font-size: clamp(1rem, 1.25vw, 1.25rem); /* Responsive font size */
  font-style: italic;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0.02em;
  max-width:var(--reading-max-width)!important;
  padding: 
    clamp(0.5rem, 0.875vw, 0.875rem) /* Top padding */
    clamp(0.25rem, 0.625vw, 0.625rem) /* Right padding */
    clamp(1.5rem, 2.75vw, 2.75rem) /* Bottom padding */
    clamp(0.25rem, 0.625vw, 0.625rem); /* Left padding */0.875rem 0.625rem 2.75rem 0.625rem;
  margin:auto;
  
  -webkit-animation: fadeIn 0.75s !important;
  -moz-animation: fadeIn 0.75s !important;
  -ms-animation: fadeIn 0.75s !important;
  -o-animation: fadeIn 0.75s !important;
  animation: fadeIn 0.75s !important;
}


.notion-text__content .color-orange {
  display: flex;
  justify-content: center!important;
  align-items: center;
}




/*-----------------------*/

.notion-callout.bg-orange-light.border {
	background-color: var(--cta-bg);
	padding: clamp(0.5rem, 0.875vw, 0.875rem) clamp(1rem, 2vw, 2rem);
	display:flex;
	justify-content: flex-end;
	align-items: center;
	border-radius: var(--lift-radius);
	gap:0.75rem;
  margin-top: clamp(1rem, 2vw, 2rem); /* Top margin */
  margin-bottom: clamp(1rem, 2vw, 2rem); /* Bottom margin */
  margin-right: clamp(1rem, 2vw, 2rem); /* Right margin */
}

.notion-callout__icon {
  display: none!important;
}
.bg-orange-light.border.notion-callout .notion-callout__content .notion-semantic-string{
  display:inline!important;
}

.notion-callout.bg-orange-light.border {
	-webkit-animation: fadeIn 0.75s !important;
  -moz-animation: fadeIn 0.75s !important;
  -ms-animation: fadeIn 0.75s !important;
  -o-animation: fadeIn 0.75s !important;
  animation: fadeIn 0.75s !important;
  cursor: pointer; /* Change cursor to pointer */
  transition: opacity 0.3s ease-in-out;
 }
 
 .notion-callout.bg-orange-light.border:hover {
  opacity: 0.85; /* Change transparency on hover */
}



.notion-semantic-string .code {
  color: var(--color-text-default);
  background-color: transparent;
  font-size: clamp(0.875rem, 1.1vw, 1.1rem); /* Responsive font size */
  padding: 0;
}

.bg-orange-light.border.notion-callout .notion-semantic-string .code {
  color: var(--cta-text)!important;
  background-color: var(--cta-bg)!important;
}


.notion-callout.bg-orange-light .notion-callout__content {
  display: inline-flex;
  color: var(--cta-text);
  font-family: Lexend;
  font-size: clamp(0.875rem, 1.05vw, 1.05rem); /* Responsive font size */
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  margin-inline-start: 0;
}




.notion-root > .notion-column-list :nth-child(1) {
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}







/*-------------------*/

.bg-yellow-light.border.notion-callout .notion-callout__content {
	margin-inline-start: 0px;
	display:inline!important;
	align-items: center!important;
	border-radius:var(--lift-radius);
	border: 2px solid var(--sec-cta-stroke);
	padding: clamp(0.5rem, 0.875vw, 0.875rem) clamp(1rem, 2vw, 2rem); /* Responsive padding */
  justify-content: center !important;
	justify-content: center!important;
	align-items: center!important;
}

.notion-callout.bg-yellow-light.border {
  display:inline-block!important;
  background-color: transparent;
  border: none!important;
	margin-top: clamp(1rem, 2vw, 2rem); /* Responsive margin */
  margin-bottom: clamp(1rem, 2vw, 2rem); /* Responsive margin */
  
  cursor: pointer; /* Change cursor to pointer */
  transition: opacity 0.3s ease-in-out; /* Smooth transition for opacity */
}

.notion-callout.bg-yellow-light.border:hover {
  opacity: 0.6; /* Change transparency on hover */
}

.bg-yellow-light.border.notion-callout
  .notion-callout__content
  .notion-semantic-string {
  color: var(--sec-cta-text);
  font-family: Lexend;
  font-size: clamp(0.875rem, 1.05vw, 1.05rem); /* Responsive font size */
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center !important;
  display: inline-block !important;
}




/*-------------------*/


.notion-callout.bg-gray-light {
  background-color: var(--color-bg-gray-light);
}

.notion-callout.bg-gray-light.border {
  border-color: var(--color-bg-gray-light);
  display: flex;
  width: clamp(20rem, 82vw, 80rem);
  max-width: calc(100% - 2 * env(safe-area-inset-right))!important;
  

  padding: clamp(3rem, 4vw, 6rem) clamp(3rem, 4vw, 6rem); /* Responsive padding */
  justify-content: center;
  border-radius: 1.875rem;
  align-items: center;
  flex-shrink: 0;
  margin-left:auto;
  margin-right:auto;
}


.highlighted-color.color-pink {
  color: var(--color-text-default);
  font-family: Lexend;
  font-size: clamp(1rem, 1.125vw, 1.125rem); /* Responsive font size */
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


.notion-callout.bg-gray-light.border
  .notion-callout__content
  .notion-column-list:nth-child(2n+1)
  .notion-column:nth-child(2n+1),
.notion-callout.bg-gray-light.border
  .notion-callout__content
  .notion-column-list:nth-child(2n) 
  .notion-column:nth-child(2n) {
  
  
  color: var(--color-text-default);
  font-family: PT Serif Caption;
  font-size: clamp(1rem, 1.125vw, 1.125rem); /* Responsive font size */
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
  letter-spacing: 0.01em;
  display:flex;
  justify-content: space-between!important;
  
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  padding: clamp(2rem, 1vw, 3rem) clamp(2rem, 2vw, 4rem)
    clamp(0rem, 0.5vw, 1rem) clamp(1rem, 1vw, 2rem) !important;
}
  
}

.notion-callout.bg-gray-light.border
  .notion-callout__content
  .notion-column-list:nth-child(2n+1)
  .notion-column:nth-child(2n+1) h3,
.notion-callout.bg-gray-light.border
  .notion-callout__content
  .notion-column-list:nth-child(2n) 
  .notion-column:nth-child(2n) h3{
    margin-left: 0 !important;
}








/*-------------*/
.notion-callout.bg-blue-light {
  background-color: transparent;
}

.bg-blue-light.border.notion-callout .notion-callout__content {
	margin-inline-start: 0px;
	align-items: center!important;
	border-radius:var(--lift-radius);
	border: 2px solid var(--button-stroke);
	padding: clamp(0.5rem, 0.875vw, 0.875rem) clamp(1rem, 2vw, 2rem); /* Responsive padding */
  justify-content: center !important;
	justify-content: center!important;
	align-items: center!important;
	
}

.notion-callout.bg-blue-light .notion-callout__content {
  color: var(--color-text-default);
  font-family: Lexend;
  font-size: clamp(0.875rem, 1.05vw, 1.05rem); /* Responsive font size */
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
}

.notion-callout.bg-blue-light.border {
  display:inline-block!important;
  background-color: transparent;
  border: none!important;
	margin-top: clamp(1rem, 2vw, 2rem); /* Responsive margin */
  margin-bottom: clamp(1rem, 2vw, 2rem); /* Responsive margin */
  padding-left:0;
  
  -webkit-animation: fadeIn 0.75s !important;
  -moz-animation: fadeIn 0.75s !important;
  -ms-animation: fadeIn 0.75s !important;
  -o-animation: fadeIn 0.75s !important;
  animation: fadeIn 0.75s !important;
  cursor: pointer; /* Change cursor to pointer */
  transition: opacity 0.3s ease-in-out;
  
  cursor: pointer; /* Change cursor to pointer */
  transition: opacity 0.3s ease-in-out; /* Smooth transition for opacity */
}

.notion-callout.bg-blue-light.border:hover {
  opacity: 0.6; /* Change transparency on hover */
}

.bg-blue-light.border.notion-callout .notion-semantic-string .code {
  color: var(--color-text-default) !important;
  background-color: transparent;
}


/*---------------*/

.super-navbar {
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  max-width: 900px !important;
  min-width: 20rem;
  font-famil

  width: calc(80% - var(--column-spacing)) !important;
  border-radius: 100px;
  top: 0.5rem !important;
  padding: 0 1rem;
  margin: auto;
}


.super-footer {
  font-family: lexend;
  font-weight:400;
  letter-spacing:0.0425rem;
  line-height:1.5rem;
  ront-size: 1.0625rem;
  text-transform:uppercase;
}

.super-footer__list, .super-footer__list-links {
  gap:0;
}

.super-footer__footnote {
  font-family: "pt Srif Caption";
  font-size:1.125rem;
  font-style:italic;
  text-transform:none;
  line-height:125%;
  letter-spacing:0.01125rem;
  padding-top:4rem;
}



h3 {
  font-size: clamp(
    1.75rem,
    2.5vw,
    2.5rem
  ) !important; /* Adjusts between 1.75rem and 2.5rem */
  font-family: Lexend !important;
  line-height: 140% !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;

  margin-left: auto;
  margin-right: auto;
  color: var(--text-color-default);

  -webkit-animation: fadeIn 0.75s !important;
  -moz-animation: fadeIn 0.75s !important;
  -ms-animation: fadeIn 0.75s !important;
  -o-animation: fadeIn 0.75s !important;
  animation: fadeIn 0.75s !important;
}



.notion-link {
  text-decoration: none !important;
}

.notion-column > .notion-heading:first-of-type {
margin-left: 0
}



.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
    vertical-align: middle; 
}





@media (max-width:680px) {
  .super-footer {
    text-align:center;
  }
  
  .super-footer.has-list .super-footer__links {
    grid-template-columns:1fr!important;
    
  }
  
  .notion-root > .notion-column-list :nth-child(1) {
    margin-bottom:0;
    align-items:center;

  }
  .notion-column-list > .notion-column:nth-child(2) {
    margin-top:0;
    padding-top:0;
  }
  
  .notion-column-list > .notion-column:nth-child(1) {
    margin-top:0.9rem;
    padding-top:0;
  }  
  
  
  .notion-column-list > .notion-column:nth-child(2) .bg-yellow-light.border.notion-callout {
    padding-left: 0;
    margin-top:0;
    margin-left:auto;
    margin-right:auto;
  }
  
  .notion-root > .notion-column-list :nth-child(1) .notion-callout.bg-orange-light.border {
    margin-left:0;
    margin-right:0;


  }
  
  .notion-callout.bg-gray-light.border {
    padding:0rem 0.9rem;
    margin-top:3rem;
  }
  
  .notion-callout.bg-gray-light.border .notion-callout__content > .notion-column-list:nth-child(3) > .notion-column:nth-child(2) {
    order: 1;
  }
  
  .notion-callout.bg-gray-light.border .notion-callout__content > .notion-column-list:nth-child(3) > .notion-column:nth-child(1) {
    order: 2;
  }

  .notion-callout.bg-gray-light.border .notion-callout__content > .notion-column-list:nth-child(3) > .notion-column:nth-child(2) .notion-text {
    display:none;


  }


  .notion-callout.bg-gray-light.border .notion-callout__content {
    margin-left:0;
  }
  
.notion-callout.bg-gray-light.border .notion-callout__content .notion-text:not([class*=" "]) {
    display:none;

    
  }


.notion-callout.bg-gray-light.border .notion-callout__content .notion-column-list:nth-child(2n+1) .notion-column:nth-child(2n+1), .notion-callout.bg-gray-light.border .notion-callout__content .notion-column-list:nth-child(2n) .notion-column:nth-child(2n) {
  padding-bottom: clamp(5rem, 20vw, 10rem)!important;
}



}