new conf design — foundation card

src/app/colors.css

@@ -1,8 +1,8 @@
 :root,
 .light {
   --color-pri-lighter: 319 100% 90%;
-  --color-pri-light: 319 100% 90%;
-  --color-pri-base: 319 100% 44%;
+  --color-pri-light: 318 100% 80%;
+  --color-pri-base: 319 100% 44.1%;
   --color-pri-dark: 319 100% 30%;
   --color-pri-darker: 319 100% 20%;
 

src/app/conf/2025/components/graphql-foundation-card.tsx

@@ -0,0 +1,20 @@
+import { clsx } from "clsx"
+
+import FoundationWordmark from "../assets/graphql-foundation-wordmark.svg?svgr"
+
+export function GraphQLFoundationCard({ className }: { className?: string }) {
+  return (
+    <section className={clsx("gql-conf-section", className)}>
+      <div className="flex divide-neu-300 border border-neu-300 bg-neu-100 dark:divide-neu-100 dark:border-neu-100 dark:bg-neu-50 max-md:flex-col max-md:divide-y md:divide-x">
+        <div className="flex items-center justify-center px-8 py-10 lg:px-16 lg:py-24">
+          <FoundationWordmark className="text-rhodamine h-[68px] dark:text-current lg:h-[100px] [&_g]:fill-current" />
+        </div>
+        <p className="text-pretty px-8 py-10 typography-body-lg max-md:text-center lg:px-16 lg:py-24">
+          GraphQLConf is presented by the GraphQL Foundation, uniting the global
+          GraphQL community to promote education, adoption, and advancement of
+          GraphQL.
+        </p>
+      </div>
+    </section>
+  )
+}

src/app/conf/2025/faq.tsx

@@ -200,7 +200,7 @@ export function FAQ({ className }: { className?: string }) {
     <section
       id="faq"
       className={clsx(
-        "gql-conf-section flex gap-10 max-lg:flex-col xl:gap-24 2xl:gap-36",
+        "gql-conf-section flex gap-10 max-lg:flex-col xl:gap-24 xl:py-16 2xl:gap-36",
         className,
       )}
     >

src/app/conf/2025/page.tsx

@@ -10,7 +10,7 @@ import TopMindsSection from "./components/top-minds"
 import { GetYourTicket } from "./components/get-your-ticket"
 import { RegisterSection } from "./components/register-section"
 import { Sponsors } from "./components/sponsors"
-
+import { GraphQLFoundationCard } from "./components/graphql-foundation-card"
 export const metadata: Metadata = {
   title: "GraphQLConf 2025 — Sept 08-10",
 }
@@ -30,9 +30,10 @@ export default function Page() {
       <div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/50 before:dark:bg-blk/30">
         <RegisterSection />
         <Sponsors heading="Thanks to our 2024 sponsors!" />
-        <CallForProposals />
         <Sponsor />
+        <CallForProposals />
         <Venue />
+        <GraphQLFoundationCard />
         <FAQ />
       </div>
     </main>

src/app/conf/2025/sponsorship.tsx

@@ -3,7 +3,7 @@ import { Button } from "../_design-system/button"
 
 export function Sponsor() {
   return (
-    <section id="sponsors" className="gql-conf-section">
+    <section id="sponsors" className="gql-conf-section xl:py-16">
       <InfoGrid
         title="Become a Sponsor"
         subtitle="Connect with the global GraphQL community and showcase your brand to industry leaders and decision-makers."

tailwind.config.ts

@@ -57,6 +57,12 @@ const config: Config = {
         "neu-900": "hsl(var(--color-neu-900) / <alpha-value>)",
 
         blk: "#000",
+
+        /**
+         * GraphQL Rhodamine as per the trademark guidelines
+         * https://www.graphql.org/brand/
+         */
+        rhodamine: "#e10098",
         // #endregion new design system colors
       },
       backgroundImage: {