Colors: 3-role semantic bg system (neutral/brand/emphasis)

MMesch · MMesch · commit 5b6056cb2abd · 2026-05-14T14:12:15.000+02:00
Add --ifm-bg-neutral/brand/emphasis to :root. Replace all raw color
vars used as backgrounds with semantic vars throughout. Remove bg="light"
variant, add bg="yellow". Home: TrustedBy→white, WhatWeDo→white,
ProjectsOverview gets yellow header, AboutQS→dark consistently.
Page intros (about, projects, services) use bg="yellow".
Add card_transparent variant; TopicsCard uses it on white section.
diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx
@@ -19,7 +19,7 @@ export function getTeamByPageName(name: string) {
 export function About() {
   return (
     <>
-      <Section pageTop bg="light">
+      <Section pageTop bg="yellow">
         <h1>About QuantStack</h1>
         <FourValues />
       </Section>
diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css
@@ -13,7 +13,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: white;
+  background-color: var(--ifm-bg-neutral);
   border: 1px solid #ccc;
   box-shadow: var(--ifm-shadow-dialog);
   border-radius: 20px;
diff --git a/src/components/careers/styles.module.css b/src/components/careers/styles.module.css
@@ -27,7 +27,7 @@
 }
 
 .link_to_WTJ {
-  background-color: var(--ifm-color-secondary-s2);
+  background-color: var(--ifm-bg-emphasis);
   color: white;
   width: 358px;
   font-weight: 700;
@@ -36,7 +36,7 @@
 .interview_card {
   width: 280px;
   height: 300px;
-  background-color: var(--ifm-background-color);
+  background-color: var(--ifm-bg-neutral);
   border-radius: 10px;
   box-shadow: var(--ifm-shadow-card);
   padding: var(--ifm-spacing-sm);
diff --git a/src/components/contact/styles.module.css b/src/components/contact/styles.module.css
@@ -13,7 +13,7 @@
 .form_label {
   font-size: 12px;
   color: var(--ifm-text-color);
-  background-color: var(--ifm-background-color);
+  background-color: var(--ifm-bg-neutral);
 }
 
 
diff --git a/src/components/fundable/styles.module.css b/src/components/fundable/styles.module.css
@@ -27,9 +27,9 @@
 }
 
 .filter_tag_active {
-  background: var(--ifm-color-secondary-s2);
+  background: var(--ifm-bg-emphasis);
   color: white;
-  border-color: var(--ifm-color-secondary-s2);
+  border-color: var(--ifm-bg-emphasis);
 }
 
 
@@ -145,7 +145,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: white;
+  background-color: var(--ifm-bg-neutral);
   border: 1px solid #ccc;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   border-radius: 20px;
@@ -216,7 +216,7 @@
 .form_label {
   font-size: 12px;
   color: var(--ifm-text-color);
-  background-color: var(--ifm-background-color);
+  background-color: var(--ifm-bg-neutral);
 }
 
 .project_information_container {
diff --git a/src/components/home/AboutQS/styles.module.css b/src/components/home/AboutQS/styles.module.css
@@ -1,39 +1,33 @@
-@media (max-width: 996px) {
-  .aboutQS_outer {
-    background-color: var(--ifm-color-secondary-s2);
-    color: white;
-    padding: var(--ifm-spacing-2xl) 0;
-  }
+.aboutQS_outer {
+  background: var(--ifm-bg-emphasis);
+  color: white;
+  padding: var(--ifm-spacing-2xl) 0;
+}
 
-  .aboutQS_text {
-    font-size: 14px;
-    text-align: center;
-    margin-bottom: var(--ifm-spacing-xl);
-  }
+.aboutQS_text {
+  font-size: 14px;
+  text-align: center;
+  margin-bottom: var(--ifm-spacing-xl);
+}
 
-  .learn_more_button_container {
-    display: flex;
-    justify-content: center;
-    margin-top: var(--ifm-spacing-xl);
-  }
+.learn_more_button_container {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--ifm-spacing-xl);
+}
+
+.learn_more_button_container :global(.link-to-button) {
+  background: var(--ifm-bg-brand);
+  color: var(--ifm-color-primary-p2);
 }
 
 @media (min-width: 996px) {
   .aboutQS_outer {
-    background: linear-gradient(180deg, var(--ifm-color-primary-p0) 0%, #ffffff 100%);
-    color: var(--ifm-color-primary-p2);
     padding: var(--ifm-spacing-4xl) 0;
   }
 
   .aboutQS_text {
     font-size: 24px;
-    text-align: center;
     margin-bottom: var(--ifm-spacing-lg);
   }
-
-  .learn_more_button_container {
-    display: flex;
-    justify-content: center;
-    margin-top: var(--ifm-spacing-xl);
-  }
 }
diff --git a/src/components/home/Hero/styles.module.css b/src/components/home/Hero/styles.module.css
@@ -9,7 +9,7 @@
 }
 
 .hero_container {
-  background-color: var(--ifm-color-primary-p0);
+  background-color: var(--ifm-bg-brand);
   padding-bottom: var(--ifm-spacing-3xl);
 }
 
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
@@ -1,5 +1,6 @@
 
 import Hero from "./Hero";
+import TrustedBy from "./TrustedBy";
 import WhatWeDo from "./WhatWeDo";
 import ProjectsOverview from "./ProjectsOverview";
 import AboutQS from "./AboutQS";
@@ -11,6 +12,7 @@ export function Home(): JSX.Element {
   return (
    <>
       <Hero />
+      <TrustedBy />
       <WhatWeDo />
       <ProjectsOverview />
       <AboutQS />
diff --git a/src/components/home/ProjectsOverview/DataAnalysis.tsx b/src/components/home/ProjectsOverview/DataAnalysis.tsx
@@ -6,7 +6,6 @@ import ApacheArrowPicture from "@site/static/img/projects/apache_arrow.svg";
 export default function DataAnalysisProjects() {
   return (
     <SplitSection
-      bg="light"
       reverse
       image={<ApacheArrowPicture style={{ maxWidth: "100%" }} />}
     >
diff --git a/src/components/home/ProjectsOverview/Robotics.tsx b/src/components/home/ProjectsOverview/Robotics.tsx
@@ -6,7 +6,6 @@ import RoboticsPictureUrl from "@site/static/img/projects/robotics.png";
 export default function RoboticsProjects() {
   return (
     <SplitSection
-      bg="light"
       reverse
       image={<img src={RoboticsPictureUrl} alt={"Picture showing two jupyterlab user interfaces displaying robotics projects."} style={{ maxWidth: "100%" }} />}
     >
diff --git a/src/components/home/ProjectsOverview/SupplyChain.tsx b/src/components/home/ProjectsOverview/SupplyChain.tsx
@@ -6,7 +6,6 @@ import MambaPictureUrl from "@site/static/img/projects/mamba_console.png";
 export default function SupplyChainProjects() {
   return (
     <SplitSection
-      bg="light"
       reverse
       image={<img src={MambaPictureUrl} alt={"Picture showing a terminal in which mamba commands are run."} style={{ maxWidth: "100%" }} />}
     >
diff --git a/src/components/home/ProjectsOverview/index.tsx b/src/components/home/ProjectsOverview/index.tsx
@@ -4,11 +4,15 @@ import SpecialProjects from "./SpecialProjects";
 import RoboticsProjects from "./Robotics";
 import ComputingProjects from "./Computing";
 import DataAnalysisProjects from "./DataAnalysis";
+import Section from "../../layout/Section";
 import styles from "./styles.module.css";
 
 export default function ProjectsOverview() {
   return (
     <div className={styles.projects_overview_container}>
+      <Section bg="yellow">
+        <h2 className="text--center">Our open-source projects</h2>
+      </Section>
       <JupyterProject />
       <SupplyChainProjects />
       <SpecialProjects />
diff --git a/src/components/home/TrustedBy/styles.module.css b/src/components/home/TrustedBy/styles.module.css
@@ -1,5 +1,5 @@
 .trusted_by_outer {
-  background-color: var(--ifm-color-primary-p0);
+  background-color: var(--ifm-bg-neutral);
   padding: var(--ifm-spacing-2xl) 0;
 }
 
diff --git a/src/components/home/WhatWeDo/TopicsCard.tsx b/src/components/home/WhatWeDo/TopicsCard.tsx
@@ -3,7 +3,7 @@ import Card from "../../layout/Card";
 
 export function TopicsCard({ topics, TopicsDescriptionMD }) {
   return (
-    <Card bg="yellow" className={styles.topics_card}>
+    <Card bg="transparent" className={styles.topics_card}>
       <div className={styles.topics_header}>{topics.name}</div>
       <div><TopicsDescriptionMD /></div>
     </Card>
diff --git a/src/components/home/WhatWeDo/styles.module.css b/src/components/home/WhatWeDo/styles.module.css
@@ -33,7 +33,7 @@
   }
 
   .whatwedo_outer {
-    background: linear-gradient(180deg, #ffffff 0%, var(--ifm-color-primary-p0) 100%);
+    background: var(--ifm-bg-neutral);
     padding: var(--ifm-spacing-3xl) 0;
   }
 
diff --git a/src/components/home/styles.module.css b/src/components/home/styles.module.css
@@ -25,7 +25,7 @@
 
 @media only screen and (min-width: 996px) {
   .link_to {
-    background-color: var(--ifm-color-secondary-s2);
+    background-color: var(--ifm-bg-emphasis);
     color: white;
     width: 358px;
     font-weight: 700;
@@ -40,7 +40,7 @@
 
 
   .link_to_about_us {
-    background-color: var(--ifm-color-secondary-s2);
+    background-color: var(--ifm-bg-emphasis);
     color: white;
     width: 358px;
     font-weight: 700;
diff --git a/src/components/layout/Card.tsx b/src/components/layout/Card.tsx
@@ -3,7 +3,7 @@ import styles from "./styles.module.css";
 import React from "react";
 
 type Props = {
-  bg?: "white" | "yellow";
+  bg?: "white" | "yellow" | "transparent";
   hover?: boolean;
   className?: string;
   onClick?: () => void;
@@ -16,6 +16,7 @@ export default function Card({ bg = "white", hover = false, className, onClick,
       className={clsx(
         styles.card,
         bg === "yellow" && styles.card_yellow,
+        bg === "transparent" && styles.card_transparent,
         hover && styles.card_hover,
         className
       )}
diff --git a/src/components/layout/Section.tsx b/src/components/layout/Section.tsx
@@ -3,7 +3,7 @@ import styles from "./styles.module.css";
 import type { ReactNode } from "react";
 
 type Props = {
-  bg?: "white" | "light" | "dark";
+  bg?: "white" | "yellow" | "dark";
   spacing?: "normal" | "tight" | "loose";
   pageTop?: boolean;
   children: ReactNode;
diff --git a/src/components/layout/styles.module.css b/src/components/layout/styles.module.css
@@ -10,15 +10,15 @@
 }
 
 .section_white {
-  background: var(--ifm-background-color);
+  background: var(--ifm-bg-neutral);
 }
 
-.section_light {
-  background: var(--ifm-color-orange-light);
+.section_yellow {
+  background: var(--ifm-bg-brand);
 }
 
 .section_dark {
-  background: var(--ifm-color-secondary-s2);
+  background: var(--ifm-bg-emphasis);
   color: white;
 }
 
@@ -92,7 +92,7 @@
 /* ─── Card ─── */
 
 .card {
-  background: white;
+  background: var(--ifm-bg-neutral);
   border-radius: 10px;
   padding: var(--ifm-spacing-lg);
   box-shadow: var(--ifm-shadow-card);
@@ -103,7 +103,12 @@
 }
 
 .card_yellow {
-  background: var(--ifm-color-primary-p0);
+  background: var(--ifm-bg-brand);
+}
+
+.card_transparent {
+  background: transparent;
+  box-shadow: none;
 }
 
 .card_hover {
@@ -186,17 +191,11 @@
 }
 
 .banner_dark {
-  background: var(--ifm-color-secondary-s2);
+  background: var(--ifm-bg-emphasis);
   color: white;
   font-size: 28px;
 }
 
-.banner_light {
-  background: var(--ifm-color-orange-light);
-  color: var(--ifm-color-primary-p2);
-  font-size: 22px;
-  font-weight: 400;
-}
 
 .banner_title {
   font-style: normal;
diff --git a/src/components/projects/AllProjects.tsx b/src/components/projects/AllProjects.tsx
@@ -9,7 +9,7 @@ export default function AllProjects() {
         <ProjectCard
           key={index}
           project={project}
-          bg={index % 2 === 0 ? "light" : "white"}
+          bg="white"
         />
       ))}
     </>
diff --git a/src/components/projects/Header.tsx b/src/components/projects/Header.tsx
@@ -4,7 +4,7 @@ import HeaderMD from "./descriptions/Header.md";
 
 export default function Header() {
   return (
-    <Section pageTop bg="light">
+    <Section pageTop bg="yellow">
       <h1 className={styles.header_title}>Working in the open</h1>
       <div className={styles.header_text}>
         <HeaderMD />
diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx
@@ -3,7 +3,7 @@ import SplitSection from "../layout/SplitSection";
 
 type Props = {
   project: any;
-  bg?: "white" | "light";
+  bg?: "white";
 };
 
 export default function ProjectCard({ project, bg = "light" }: Props) {
diff --git a/src/components/services/Header.tsx b/src/components/services/Header.tsx
@@ -3,7 +3,7 @@ import styles from "./styles.module.css";
 
 export default function Header() {
   return (
-    <Section pageTop>
+    <Section pageTop bg="yellow">
       <h1 className={styles.services_header_text}>
         Hire QuantStack to build upon the Jupyter, Mamba, and the PyData
         ecosystem.
diff --git a/src/components/services/SpecialProjects.tsx b/src/components/services/SpecialProjects.tsx
@@ -6,7 +6,7 @@ export default function SpecialProjects() {
   return (
     <SplitSection
       ratio="50/50"
-      bg="light"
+      bg="white"
       image={
         <SpecialProjectsIllustration
           alt="Picture showing an illustration of a group of people working together in an office."
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -32,7 +32,13 @@
   --ifm-overlay-background: rgba(0, 0, 0, 0.3);
 
   --ifm-text-color: var(--ifm-color-primary-p2);
-  --ifm-background-color: white;
+  --ifm-background-color: var(--ifm-bg-neutral);
+
+  /* Semantic background roles */
+  --ifm-bg-neutral: #ffffff;                         /* default reading surface */
+  --ifm-bg-brand: var(--ifm-color-primary-p0);       /* brand identity — yellow */
+  --ifm-bg-emphasis: var(--ifm-color-secondary-s2);  /* CTA / strong contrast — navy */
+
 
   /* footer */
   --ifm-background-color-footer: var(--ifm-color-primary-p1);
@@ -318,7 +324,7 @@ so they are already assumed to be clickable anyway */
 .pagination-nav__link:active,
 a.card:active,
 a.menu__link:active {
-  background: white;
+  background: var(--ifm-bg-neutral);
   color: #000;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`.form_label {`
`14`	`14`	`font-size: 12px;`
`15`	`15`	`color: var(--ifm-text-color);`
`16`		`- background-color: var(--ifm-background-color);`
	`16`	`+ background-color: var(--ifm-bg-neutral);`
`17`	`17`	`}`
`18`	`18`
`19`	`19`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`.hero_container {`
`12`		`- background-color: var(--ifm-color-primary-p0);`
	`12`	`+ background-color: var(--ifm-bg-brand);`
`13`	`13`	`padding-bottom: var(--ifm-spacing-3xl);`
`14`	`14`	`}`
`15`	`15`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,6 @@ import ApacheArrowPicture from "@site/static/img/projects/apache_arrow.svg";`
`6`	`6`	`export default function DataAnalysisProjects() {`
`7`	`7`	`return (`
`8`	`8`	`<SplitSection`
`9`		`- bg="light"`
`10`	`9`	`reverse`
`11`	`10`	`image={<ApacheArrowPicture style={{ maxWidth: "100%" }} />}`
`12`	`11`	`>`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,6 @@ import RoboticsPictureUrl from "@site/static/img/projects/robotics.png";`
`6`	`6`	`export default function RoboticsProjects() {`
`7`	`7`	`return (`
`8`	`8`	`<SplitSection`
`9`		`- bg="light"`
`10`	`9`	`reverse`
`11`	`10`	`image={<img src={RoboticsPictureUrl} alt={"Picture showing two jupyterlab user interfaces displaying robotics projects."} style={{ maxWidth: "100%" }} />}`
`12`	`11`	`>`