chore(design-system): tidy up mobile styling (#41267)

* feat: tidy up header on mobile

* fix: graceful searchbar header

* fix: header classes and unused elements

* feat: trim down logo on header

* fix: logos again

* chore: remove dead code

* fix: classic dark logo header

* fix: page padding tidy ups

* fix: some font sizing

* feat: updated homepage cards

* fix: toc layout

* fix: toc again

* feat: homepage cards all the same size

* fix: footer paddings

* fix: pager if only 1 directional item

* fix: sidebar padding issues

* chore: killing all the defaults

* fix: import for side nav

* fix: sidebar complaining about dialog title

* fix: homepage paddings

* fix: killing one more default export

* feat: update colours icon to francescos

* fix: loose repeated copy

apps/design-system/app/(app)/docs/[[...slug]]/page.tsx

@@ -4,7 +4,7 @@ import { SourcePanel } from '@/components/source-panel'
 import { DashboardTableOfContents } from '@/components/toc'
 import { siteConfig } from '@/config/site'
 import { getTableOfContents } from '@/lib/toc'
-import { absoluteUrl, cn } from '@/lib/utils'
+import { absoluteUrl } from '@/lib/utils'
 import '@/styles/code-block-variables.css'
 import '@/styles/mdx.css'
 import { allDocs } from 'contentlayer/generated'
@@ -83,15 +83,15 @@ export default async function DocPage(props: DocPageProps) {
   const toc = await getTableOfContents(doc.body.raw)
 
   return (
-    <main className="relative lg:gap-10 xl:grid xl:grid-cols-[1fr_200px] pr-6 lg:py-8">
-      <div className="mx-auto w-full min-w-0 max-w-4xl">
+    <div className="relative xl:grid xl:grid-cols-[1fr_160px] gap-4 px-6 py-6 lg:py-8">
+      <div className="mx-auto w-full min-w-0 max-w-4xl flex-1">
         <div className="mb-4 flex items-center space-x-1 text-sm text-foreground-muted">
           <div className="overflow-hidden text-ellipsis whitespace-nowrap">Docs</div>
           <ChevronRight className="h-4 w-4 text-foreground-muted" />
           <div className="text-foreground-lighter">{doc.title}</div>
         </div>
         <div className="space-y-2 mb-5">
-          <h1 className={cn('scroll-m-20 text-4xl tracking-tight')}>{doc.title}</h1>
+          <h1 className="scroll-m-20 text-4xl tracking-tight">{doc.title}</h1>
           {doc.description && (
             <p className="text-lg text-foreground-light">
               <Balancer>{doc.description}</Balancer>
@@ -107,15 +107,15 @@ export default async function DocPage(props: DocPageProps) {
       </div>
       {doc.toc && (
         <div className="hidden text-sm xl:block">
-          <div className="sticky top-16 -mt-10 pt-4">
+          <div className="sticky top-8 -mt-10 pt-8">
             <ScrollArea className="pb-10">
-              <div className="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] py-12">
+              <div className="h-[calc(100vh-3.5rem)] py-14">
                 <DashboardTableOfContents toc={toc} />
               </div>
             </ScrollArea>
           </div>
         </div>
       )}
-    </main>
+    </div>
   )
 }

apps/design-system/app/(app)/layout.tsx

@@ -1,34 +1,28 @@
-import SideNavigation from '@/components/side-navigation'
+import { SideNavigation } from '@/components/side-navigation'
 import { SiteFooter } from '@/components/site-footer'
-// import ThemeSettings from '@/components/theme-settings'
-import TopNavigation from '@/components/top-navigation'
+import { TopNavigation } from '@/components/top-navigation'
+import { MobileSidebarSheet } from '@/components/mobile-sidebar-sheet'
 import { ScrollArea } from 'ui'
 
 interface AppLayoutProps {
   children: React.ReactNode
 }
 
-export default function AppLayout({ children }: AppLayoutProps) {
+export default async function AppLayout({ children }: AppLayoutProps) {
   return (
     <>
       <TopNavigation />
-      {/* main container */}
-      <div className="">
-        {/* main content */}
-        <main className="flex-1 max-w-site mx-auto w-full border-l border-r">
-          {/* {children} */}
-          <div className="border-b">
-            <div className="flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
-              <aside className="fixed top-10 z-30 hidden h-[calc(100vh-3rem)] w-full shrink-0 md:sticky md:block border-r">
-                <ScrollArea className="h-full py-6 lg:py-8">
-                  <SideNavigation />
-                </ScrollArea>
-              </aside>
-              {children}
-            </div>
-          </div>
-        </main>
-      </div>
+      <MobileSidebarSheet />
+      <main className="flex-1 max-w-site mx-auto w-full border-l border-r border-b">
+        <div className="flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] lg:grid-cols-[240px_minmax(0,1fr)]">
+          <aside className="fixed top-10 z-30 hidden h-[calc(100vh-3rem)] w-full shrink-0 md:sticky md:block border-r">
+            <ScrollArea className="h-full">
+              <SideNavigation />
+            </ScrollArea>
+          </aside>
+          {children}
+        </div>
+      </main>
       <SiteFooter />
     </>
   )

apps/design-system/app/(app)/page.tsx

@@ -1,85 +1,59 @@
 import { HomepageSvgHandler } from '@/components/homepage-svg-handler'
 import Link from 'next/link'
+import { Paintbrush } from 'lucide-react'
+import { Realtime, Database, Auth } from 'icons/src/icons'
 
 export default function Home() {
   return (
-    <main className="relative lg:gap-10 pr-6 lg:py-20">
-      <div className="mx-auto w-full min-w-0 max-w-6xl flex flex-col gap-20">
-        <div className="flex flex-col gap-8 justify-start">
-          {/* <div>
-            <DesignSystemMarks />
-          </div> */}
-          <div>
-            <h1 className="text-4xl text-foreground mb-3">Supabase Design System</h1>
-            <h2 className="text-xl text-foreground-light font-light">
-              Design resources for building consistent user experiences
-            </h2>
-          </div>
+    <div className="relative gap-4 px-6 py-6 lg:py-8">
+      <div className="mx-auto w-full min-w-0 max-w-4xl flex-1">
+        <div className="flex flex-col gap-2 justify-start my-8 w-full">
+          <h1 className="text-2xl lg:text-4xl text-foreground">Supabase Design System</h1>
+          <h2 className="md:text-xl text-base text-foreground-light font-light">
+            Design resources for building consistent user experiences
+          </h2>
         </div>
 
-        {/* Homepage items */}
-
-        <div className="grid grid-cols-2 gap-10">
-          <Link href="/docs/components/atom-components">
-            <div className="px-10 py-8 min-h-[18rem] flex flex-col justify-between bg-surface-75/50 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
-              <HomepageSvgHandler name="atoms-illustration" />
+        <div className="grid md:grid-cols-2 grid-cols-1 gap-4 w-full">
+          <Link href="/docs/components/atom-components" className="h-full flex">
+            <div className="p-6 gap-4 flex flex-col justify-between h-full w-full bg-surface-75 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
+              <div className="flex items-center justify-start min-h-[24px]">
+                <HomepageSvgHandler name="atoms" className="w-6 h-6" />
+              </div>
               <div>
                 <h3 className="font-medium text-foreground">Atom components</h3>
                 <p className="text-sm text-foreground-light">Building blocks of User interfaces</p>
               </div>
             </div>
           </Link>
-          <Link href="/docs/components/fragment-components">
-            <div className="px-10 py-8 min-h-[18rem] flex flex-col justify-between bg-surface-75/50 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
-              <HomepageSvgHandler name="fragments-illustration" />
+          <Link href="/docs/fragments/fragment-components" className="h-full flex">
+            <div className="p-6 gap-4 flex flex-col justify-between h-full w-full bg-surface-75 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
+              <div className="flex items-center justify-start min-h-[24px]">
+                <HomepageSvgHandler name="fragments" className="w-6 h-6" />
+              </div>
               <div>
                 <h3 className="font-medium text-foreground">Fragment components</h3>
                 <p className="text-sm text-foreground-light">Components assembled from Atoms</p>
               </div>
             </div>
           </Link>
-          <Link href="/docs/color-usage">
-            <div className="px-10 py-8 min-h-[18rem] flex flex-col justify-between bg-surface-75/50 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
-              <div className="flex flex-col gap-1">
-                <div className="flex flex-row gap-0.5">
-                  <div className="w-3 h-16 rounded border bg-foreground"></div>
-                  <div className="w-3 h-16 rounded border bg-foreground-light"></div>
-                  <div className="w-3 h-16 rounded border bg-foreground-lighter"></div>
-                  <div className="w-3 h-16 rounded border bg-foreground-muted"></div>
-                  <div className="w-3 h-16 rounded border"></div>
-
-                  <div className="w-3 h-16 rounded border bg"></div>
-                  <div className="w-3 h-16 rounded border bg-200"></div>
-                  <div className="w-3 h-16 rounded border bg-surface-75"></div>
-                  <div className="w-3 h-16 rounded border bg-surface-100"></div>
-                  <div className="w-3 h-16 rounded border bg-surface-200"></div>
-                  <div className="w-3 h-16 rounded border bg-surface-300"></div>
-                  <div className="w-3 h-16 rounded border"></div>
-
-                  <div className="w-3 h-16 rounded border bg-brand-200"></div>
-                  <div className="w-3 h-16 rounded border bg-brand-300"></div>
-                  <div className="w-3 h-16 rounded border bg-brand-400"></div>
-                  <div className="w-3 h-16 rounded border bg-brand-500"></div>
-                  <div className="w-3 h-16 rounded border bg-brand"></div>
-                  <div className="w-3 h-16 rounded border bg-brand-600"></div>
-                  <div className="w-3 h-16 rounded border"></div>
-
-                  <div className="w-3 h-16 rounded border bg-warning-200"></div>
-                  <div className="w-3 h-16 rounded border bg-warning-300"></div>
-                  <div className="w-3 h-16 rounded border bg-warning-400"></div>
-                  <div className="w-3 h-16 rounded border bg-warning-500"></div>
-                  <div className="w-3 h-16 rounded border bg-warning"></div>
-                  <div className="w-3 h-16 rounded border bg-warning-600"></div>
-                  <div className="w-3 h-16 rounded border"></div>
-
-                  <div className="w-3 h-16 rounded border bg-destructive-200"></div>
-                  <div className="w-3 h-16 rounded border bg-destructive-300"></div>
-                  <div className="w-3 h-16 rounded border bg-destructive-400"></div>
-                  <div className="w-3 h-16 rounded border bg-destructive-500"></div>
-                  <div className="w-3 h-16 rounded border bg-destructive"></div>
-                  <div className="w-3 h-16 rounded border bg-destructive-600"></div>
-                  <div className="w-3 h-16 rounded border"></div>
-                </div>
+          <Link href="/docs/components/ui-patterns" className="h-full flex">
+            <div className="p-6 gap-4 flex flex-col justify-between h-full w-full bg-surface-75 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
+              <div className="flex items-center justify-start min-h-[24px]">
+                <HomepageSvgHandler name="ui-patterns" className="w-6 h-6" />
+              </div>
+              <div>
+                <h3 className="font-medium text-foreground">UI Patterns components</h3>
+                <p className="text-sm text-foreground-light">
+                  Components assembled from Atoms &amp; Fragments
+                </p>
+              </div>
+            </div>
+          </Link>
+          <Link href="/docs/color-usage" className="h-full flex">
+            <div className="p-6 gap-4 flex flex-col justify-between h-full w-full bg-surface-75 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
+              <div className="flex flex-col gap-2 min-h-[24px]">
+                <HomepageSvgHandler name="colours" className="w-6 h-6" />
               </div>
               <div>
                 <h3 className="font-medium text-foreground">Colors</h3>
@@ -88,27 +62,33 @@ export default function Home() {
             </div>
           </Link>
 
-          <Link href="/docs/theming">
-            <div className="px-10 py-8 min-h-[18rem] flex flex-col justify-between bg-surface-75/50 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
-              <HomepageSvgHandler name="fragments-illustration" />
+          <Link href="/docs/theming" className="h-full flex">
+            <div className="p-6 gap-4 flex flex-col justify-between h-full w-full bg-surface-75 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
+              <div className="flex items-center justify-start min-h-[24px] text-brand">
+                <Paintbrush className="w-6 h-6" strokeWidth={1.5} stroke="currentColor" />
+              </div>
               <div>
                 <h3 className="font-medium text-foreground">Theming</h3>
-                <p className="text-sm text-foreground-light">Components assembled from Atoms</p>
+                <p className="text-sm text-foreground-light">Simple extensible theming system</p>
               </div>
             </div>
           </Link>
 
-          <Link href="/docs/icons">
-            <div className="px-10 py-8 min-h-[18rem] flex flex-col justify-between bg-surface-75/50 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
-              <HomepageSvgHandler name="fragments-illustration" />
+          <Link href="/docs/icons" className="h-full flex">
+            <div className="p-6 gap-4 flex flex-col justify-between h-full w-full bg-surface-75 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
+              <div className="flex items-center justify-start min-h-[24px] gap-3 text-brand">
+                <Realtime className="w-5 h-5" strokeWidth={1.5} stroke="currentColor" />
+                <Database className="w-5 h-5 opacity-60" strokeWidth={1.5} stroke="currentColor" />
+                <Auth className="w-5 h-5 opacity-30" strokeWidth={1.5} stroke="currentColor" />
+              </div>
               <div>
                 <h3 className="font-medium text-foreground">Icons</h3>
-                <p className="text-sm text-foreground-light">Components assembled from Atoms</p>
+                <p className="text-sm text-foreground-light">Custom icons for Supabase</p>
               </div>
             </div>
           </Link>
         </div>
       </div>
-    </main>
+    </div>
   )
 }

apps/design-system/app/Providers.tsx

@@ -5,12 +5,15 @@ import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import { ThemeProviderProps } from 'next-themes/dist/types'
 
 import { TooltipProvider } from 'ui'
+import { MobileSidebarProvider } from '@/context/mobile-sidebar-context'
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return (
     <JotaiProvider>
       <NextThemesProvider {...props}>
-        <TooltipProvider delayDuration={0}>{children}</TooltipProvider>
+        <TooltipProvider delayDuration={0}>
+          <MobileSidebarProvider>{children}</MobileSidebarProvider>
+        </TooltipProvider>
       </NextThemesProvider>
     </JotaiProvider>
   )

apps/design-system/components/command-menu.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { CircleIcon, LaptopIcon, MoonIcon, SunIcon } from 'lucide-react'
+import { CircleIcon, LaptopIcon, MoonIcon, SunIcon, Search } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useRouter } from 'next/navigation'
 import * as React from 'react'
@@ -17,6 +17,7 @@ import {
   CommandList_Shadcn_,
   CommandSeparator_Shadcn_,
   DialogProps,
+  DialogTitle,
 } from 'ui'
 
 export function CommandMenu({ ...props }: DialogProps) {
@@ -55,8 +56,7 @@ export function CommandMenu({ ...props }: DialogProps) {
       <Button
         type="outline"
         className={cn(
-          `relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-foreground-muted shadow-none sm:pr-12 md:w-40 lg:w-64
-            hover:border-foreground-muted hover:bg-surface-100 hover:text-foreground-lighter
+          `lg:flex hidden relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-foreground-muted shadow-none sm:pr-12 md:w-40 lg:w-64 hover:border-foreground-muted hover:bg-surface-100 hover:text-foreground-lighter
           `
         )}
         onClick={() => setOpen(true)}
@@ -68,26 +68,18 @@ export function CommandMenu({ ...props }: DialogProps) {
           <span className="text-sm">⌘</span>K
         </kbd>
       </Button>
+      <Button
+        type="text"
+        size="tiny"
+        className="px-1 group lg:hidden"
+        onClick={() => setOpen(true)}
+        icon={<Search size={16} />}
+      />
       <CommandDialog open={open} onOpenChange={setOpen}>
+        <DialogTitle className="sr-only">Search Design System...</DialogTitle>
         <CommandInput_Shadcn_ placeholder="Type a command or search..." />
         <CommandList_Shadcn_>
           <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-          {/* <CommandGroup_Shadcn_ heading="Links">
-            {docsConfig.mainNav
-              .filter((navitem) => !navitem.external)
-              .map((navItem) => (
-                <CommandItem_Shadcn_
-                  key={navItem.href}
-                  value={navItem.title}
-                  onSelect={() => {
-                    runCommand(() => router.push(navItem.href as string))
-                  }}
-                >
-                  <FileIcon className="mr-2 h-4 w-4" strokeWidth={1} />
-                  {navItem.title}
-                </CommandItem_Shadcn_>
-              ))}
-          </CommandGroup_Shadcn_> */}
           {docsConfig.sidebarNav.map((group) => (
             <CommandGroup_Shadcn_ key={group.title} heading={group.title}>
               {group.items.map((navItem) => (

apps/design-system/components/mobile-sidebar-sheet.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { SideNavigation } from '@/components/side-navigation'
+import { useMobileSidebar } from '@/hooks/use-mobile-sidebar'
+import { Sheet, SheetContent, SheetTitle, ScrollArea } from 'ui'
+
+export function MobileSidebarSheet() {
+  const { open, setOpen } = useMobileSidebar()
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetContent side="left" className="p-0 w-[240px] sm:w-[280px]" showClose={false}>
+        <SheetTitle className="sr-only">Navigation</SheetTitle>
+        <ScrollArea className="h-full py-6 lg:py-8">
+          <SideNavigation />
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  )
+}

apps/design-system/components/pager.tsx

@@ -4,7 +4,6 @@ import { NavItem, NavItemWithChildren } from '@/types/nav'
 
 import { docsConfig } from '@/config/docs'
 import { cn } from '@/lib/utils'
-import { buttonVariants } from 'ui'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 
 interface DocsPagerProps {
@@ -18,8 +17,10 @@ export function DocsPager({ doc }: DocsPagerProps) {
     return null
   }
 
+  const hasBoth = pager?.prev?.href && pager?.next?.href
+
   return (
-    <div className="flex flex-row items-center justify-between">
+    <div className={cn('flex flex-row items-center', hasBoth ? 'justify-between' : 'justify-end')}>
       {pager?.prev?.href && (
         <Link
           href={pager.prev.href}

apps/design-system/components/side-navigation-item.tsx

@@ -5,15 +5,22 @@ import { cn } from 'ui/src/lib/utils/cn'
 import { usePathname } from 'next/navigation'
 import Link from 'next/link'
 import React from 'react'
+import { useMobileSidebar } from '@/hooks/use-mobile-sidebar'
 
-const NavigationItem: React.FC<{ item: SidebarNavItem }> = React.memo(({ item }) => {
+export const NavigationItem: React.FC<{ item: SidebarNavItem }> = React.memo(({ item }) => {
   const pathname = usePathname()
+  const { setOpen } = useMobileSidebar()
 
   const isActive = pathname === item.href
 
+  const handleClick = () => {
+    setOpen(false)
+  }
+
   return (
     <Link
       href={`${item.href}`}
+      onClick={handleClick}
       className={cn(
         'relative',
         'flex',
@@ -40,5 +47,3 @@ const NavigationItem: React.FC<{ item: SidebarNavItem }> = React.memo(({ item })
 })
 
 NavigationItem.displayName = 'NavigationItem'
-
-export default NavigationItem

apps/design-system/components/side-navigation.tsx

@@ -1,9 +1,9 @@
-import NavigationItem from '@/components/side-navigation-item'
+import { NavigationItem } from '@/components/side-navigation-item'
 import { docsConfig } from '@/config/docs'
 
-function SideNavigation() {
+export const SideNavigation = () => {
   return (
-    <nav className="min-w-[220px]">
+    <nav className="min-w-[220px] py-6 lg:py-8">
       {docsConfig.sidebarNav.map((section, i) => (
         <div key={`${section.title}-${i}`} className="pb-10 space-y-0.5">
           <div className="font-mono uppercase text-xs text-foreground-lighter/75 mb-2 px-6 tracking-widest">
@@ -26,5 +26,3 @@ function SideNavigation() {
     </nav>
   )
 }
-
-export default SideNavigation

apps/design-system/components/site-footer.tsx

@@ -2,8 +2,8 @@ import { siteConfig } from '@/config/site'
 
 export function SiteFooter() {
   return (
-    <footer className="py-6 md:px-8 md:py-0 mx-auto border-r border-l border-b w-full max-w-site">
-      <div className="flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+    <footer className="py-6 px-6 mx-auto border-r border-l border-b w-full max-w-site">
+      <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
         <p className="text-balance text-center text-sm leading-loose text-foreground-muted md:text-left">
           Built by{' '}
           <a

apps/design-system/components/theme-switcher-dropdown.tsx

@@ -3,7 +3,6 @@
 import { Moon, Sun } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
-import SVG from 'react-inlinesvg'
 import {
   Button,
   DropdownMenu,
@@ -13,8 +12,6 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  RadioGroupLargeItem_Shadcn_,
-  RadioGroup_Shadcn_,
   Theme,
   singleThemes,
 } from 'ui'
@@ -36,22 +33,7 @@ const ThemeSwitcherDropdown = () => {
     return null
   }
 
-  function SingleThemeSelection() {
-    return (
-      <form>
-        <RadioGroup_Shadcn_
-          name="theme"
-          onValueChange={setTheme}
-          aria-label="Choose a theme"
-          defaultValue={theme}
-          value={theme}
-          className="flex flex-wrap gap-3"
-        ></RadioGroup_Shadcn_>
-      </form>
-    )
-  }
-
-  const iconClasses = 'text-foreground-light group-data-[state=open]:text-foreground'
+  const iconClasses = 'text-foreground-lighter group-data-[state=open]:text-foreground'
 
   return (
     <>
@@ -68,7 +50,7 @@ const ThemeSwitcherDropdown = () => {
                 <Moon className={iconClasses} />
               )
             }
-          ></Button>
+          />
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-56" align="end">
           <DropdownMenuLabel>Theme</DropdownMenuLabel>

apps/design-system/components/top-navigation.tsx

@@ -1,30 +1,37 @@
-// import { docsConfig } from '@/config/docs'
+'use client'
+
 import Link from 'next/link'
+import { Menu } from 'lucide-react'
+import { Button } from 'ui'
 import { CommandMenu } from './command-menu'
 import { HomepageSvgHandler } from './homepage-svg-handler'
 import { ThemeSwitcherDropdown } from './theme-switcher-dropdown'
+import { useMobileSidebar } from '@/hooks/use-mobile-sidebar'
+
+export const TopNavigation = () => {
+  const { toggle } = useMobileSidebar()
 
-function TopNavigation() {
   return (
-    <header className="sticky top-0 z-50 w-full border-t bg-studio/95 backdrop-blur supports-[backdrop-filter]:bg-studio/60">
-      <div className="absolute border-b border-dashed w-full top-[3.4rem] -z-10"></div>
-      <nav className="h-14 w-full flex">
-        <div className="max-w-site border-b w-full flex flex-row items-center gap-6 mx-auto px-6 border-r border-l justify-between">
-          <div className="flex items-center gap-8">
-            <Link href="/">
-              <h1>Supabase Design System</h1>
+    <header className="sticky top-0 z-50 w-full bg-studio/95 backdrop-blur supports-[backdrop-filter]:bg-studio/60 border-b border-l border-r">
+      <nav className="py-3 w-full flex">
+        <div className="max-w-site w-full flex flex-row items-center gap-6 mx-auto md:px-6 px-4 justify-between">
+          <div className="flex items-center gap-2">
+            <Button
+              type="text"
+              size="tiny"
+              className="px-1 md:hidden"
+              onClick={toggle}
+              icon={<Menu size={16} />}
+              aria-label="Toggle navigation menu"
+            />
+            <Link href="/" className="flex items-center lg:gap-6 gap-4">
+              <h1 className="hidden md:flex line-clamp-1 lg:text-2xl text-xl">
+                Supabase Design System
+              </h1>
+              <HomepageSvgHandler name="logo" className="h-4 w-auto" />
             </Link>
-            <HomepageSvgHandler name="design-system-marks" className="h-4 w-auto" />
           </div>
-          {/* {docsConfig.mainNav.map((section) => (
-            <>
-            <div className="font-mono uppercase text-xs text-foreground-lighter">
-            {section.title}
-            </div>
-            </>
-          ))} */}
-          <div className="flex items-center gap-8">
-            {/* <TopNavigationSearch /> */}
+          <div className="flex items-center gap-2">
             <CommandMenu />
             <ThemeSwitcherDropdown />
           </div>
@@ -33,5 +40,3 @@ function TopNavigation() {
     </header>
   )
 }
-
-export default TopNavigation

apps/design-system/config/docs.ts

@@ -48,145 +48,6 @@ export const docsConfig: DocsConfig = {
         },
       ],
     },
-    {
-      title: 'UI Patterns',
-      sortOrder: 'alphabetical',
-      items: [
-        {
-          title: 'Introduction',
-          href: '/docs/ui-patterns/ui-patterns',
-          items: [],
-          priority: true,
-        },
-        {
-          title: 'Charts',
-          href: '/docs/ui-patterns/charts',
-          items: [],
-        },
-        {
-          title: 'Empty States',
-          href: '/docs/ui-patterns/empty-states',
-          items: [],
-        },
-        {
-          title: 'Forms',
-          href: '/docs/ui-patterns/forms',
-          items: [],
-        },
-        {
-          title: 'Layout',
-          href: '/docs/ui-patterns/layout',
-          items: [],
-        },
-        {
-          title: 'Navigation',
-          href: '/docs/ui-patterns/navigation',
-          items: [],
-        },
-        {
-          title: 'Tables',
-          href: '/docs/ui-patterns/tables',
-          items: [],
-        },
-      ],
-    },
-    {
-      title: 'Fragment Components',
-      sortOrder: 'alphabetical',
-      items: [
-        {
-          title: 'Introduction',
-          href: '/docs/fragments/fragment-components',
-          items: [],
-          priority: true,
-        },
-        {
-          title: 'Admonition',
-          href: '/docs/fragments/admonition',
-          items: [],
-        },
-        {
-          title: 'Assistant Chat',
-          href: '/docs/fragments/assistant-chat',
-          items: [],
-        },
-        {
-          title: 'EmptyStatePresentational',
-          href: '/docs/fragments/empty-state-presentational',
-          items: [],
-        },
-        {
-          title: 'Modal',
-          href: '/docs/fragments/modal',
-          items: [],
-        },
-        {
-          title: 'Page Container',
-          href: '/docs/fragments/page-container',
-          items: [],
-        },
-        {
-          title: 'Page Header',
-          href: '/docs/fragments/page-header',
-          items: [],
-        },
-        {
-          title: 'Page Section',
-          href: '/docs/fragments/page-section',
-          items: [],
-        },
-        {
-          title: 'Text Confirm Dialog',
-          href: '/docs/fragments/text-confirm-dialog',
-          items: [],
-        },
-        {
-          title: 'Info Tooltip',
-          href: '/docs/fragments/info-tooltip',
-          items: [],
-        },
-        {
-          title: 'Inner Side Menu',
-          href: '/docs/fragments/inner-side-menu',
-          items: [],
-        },
-        {
-          title: 'Data Input',
-          href: '/docs/fragments/data-input',
-          items: [],
-        },
-        {
-          title: 'Form Item Layout',
-          href: '/docs/fragments/form-item-layout',
-          items: [],
-        },
-        {
-          title: 'Multi Select',
-          href: '/docs/fragments/multi-select',
-          items: [],
-        },
-        {
-          title: 'Filter Bar',
-          href: '/docs/fragments/filter-bar',
-          items: [],
-        },
-        {
-          title: 'Logs Bar Chart',
-          href: '/docs/fragments/logs-bar-chart',
-          items: [],
-        },
-        {
-          title: 'Metric Card',
-          href: '/docs/fragments/metric-card',
-          items: [],
-        },
-        {
-          title: 'Table of Contents (TOC)',
-          href: '/docs/fragments/toc',
-          items: [],
-        },
-      ],
-    },
     {
       title: 'Atom Components',
       sortOrder: 'alphabetical',
@@ -477,5 +338,144 @@ export const docsConfig: DocsConfig = {
         },
       ],
     },
+    {
+      title: 'Fragment Components',
+      sortOrder: 'alphabetical',
+      items: [
+        {
+          title: 'Introduction',
+          href: '/docs/fragments/fragment-components',
+          items: [],
+          priority: true,
+        },
+        {
+          title: 'Admonition',
+          href: '/docs/fragments/admonition',
+          items: [],
+        },
+        {
+          title: 'Assistant Chat',
+          href: '/docs/fragments/assistant-chat',
+          items: [],
+        },
+        {
+          title: 'EmptyStatePresentational',
+          href: '/docs/fragments/empty-state-presentational',
+          items: [],
+        },
+        {
+          title: 'Modal',
+          href: '/docs/fragments/modal',
+          items: [],
+        },
+        {
+          title: 'Page Container',
+          href: '/docs/fragments/page-container',
+          items: [],
+        },
+        {
+          title: 'Page Header',
+          href: '/docs/fragments/page-header',
+          items: [],
+        },
+        {
+          title: 'Page Section',
+          href: '/docs/fragments/page-section',
+          items: [],
+        },
+        {
+          title: 'Text Confirm Dialog',
+          href: '/docs/fragments/text-confirm-dialog',
+          items: [],
+        },
+        {
+          title: 'Info Tooltip',
+          href: '/docs/fragments/info-tooltip',
+          items: [],
+        },
+        {
+          title: 'Inner Side Menu',
+          href: '/docs/fragments/inner-side-menu',
+          items: [],
+        },
+        {
+          title: 'Data Input',
+          href: '/docs/fragments/data-input',
+          items: [],
+        },
+        {
+          title: 'Form Item Layout',
+          href: '/docs/fragments/form-item-layout',
+          items: [],
+        },
+        {
+          title: 'Multi Select',
+          href: '/docs/fragments/multi-select',
+          items: [],
+        },
+        {
+          title: 'Filter Bar',
+          href: '/docs/fragments/filter-bar',
+          items: [],
+        },
+        {
+          title: 'Logs Bar Chart',
+          href: '/docs/fragments/logs-bar-chart',
+          items: [],
+        },
+        {
+          title: 'Metric Card',
+          href: '/docs/fragments/metric-card',
+          items: [],
+        },
+        {
+          title: 'Table of Contents (TOC)',
+          href: '/docs/fragments/toc',
+          items: [],
+        },
+      ],
+    },
+    {
+      title: 'UI Patterns',
+      sortOrder: 'alphabetical',
+      items: [
+        {
+          title: 'Introduction',
+          href: '/docs/ui-patterns/ui-patterns',
+          items: [],
+          priority: true,
+        },
+        {
+          title: 'Charts',
+          href: '/docs/ui-patterns/charts',
+          items: [],
+        },
+        {
+          title: 'Empty States',
+          href: '/docs/ui-patterns/empty-states',
+          items: [],
+        },
+        {
+          title: 'Forms',
+          href: '/docs/ui-patterns/forms',
+          items: [],
+        },
+        {
+          title: 'Layout',
+          href: '/docs/ui-patterns/layout',
+          items: [],
+        },
+        {
+          title: 'Navigation',
+          href: '/docs/ui-patterns/navigation',
+          items: [],
+        },
+        {
+          title: 'Tables',
+          href: '/docs/ui-patterns/tables',
+          items: [],
+        },
+      ],
+    },
   ],
 }

apps/design-system/context/mobile-sidebar-context.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import React, { ReactNode, useState, useCallback } from 'react'
+import { MobileSidebarContext, MobileSidebarContextType } from '@/hooks/use-mobile-sidebar'
+
+interface MobileSidebarProviderProps {
+  children: ReactNode
+}
+
+/**
+ * Provider component for mobile sidebar state
+ * Wraps children with context that provides mobile sidebar state and controls
+ */
+export function MobileSidebarProvider({ children }: MobileSidebarProviderProps) {
+  const [open, setOpen] = useState(false)
+
+  // Use useCallback for stable function references
+  const handleSetOpen = useCallback((value: boolean) => {
+    setOpen(value)
+  }, [])
+
+  const toggle = useCallback(() => {
+    setOpen((prev) => !prev)
+  }, [])
+
+  // Memoize the context value to prevent unnecessary re-renders
+  const value: MobileSidebarContextType = {
+    open,
+    setOpen: handleSetOpen,
+    toggle,
+  }
+
+  return <MobileSidebarContext.Provider value={value}>{children}</MobileSidebarContext.Provider>
+}

apps/design-system/eslint.config.cjs

@@ -4,7 +4,7 @@ const supabaseConfig = require('eslint-config-supabase/next')
 module.exports = defineConfig([
   supabaseConfig,
   {
-    files: ['registry/**/*.tsx', '__registry__/**/*.tsx'],
+    files: ['registry/**/*.tsx', '__registry__/**/*.tsx', 'app/**/*.tsx'],
     rules: {
       'no-restricted-exports': 'off',
     },

apps/design-system/hooks/use-mobile-sidebar.ts

@@ -0,0 +1,24 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+
+export interface MobileSidebarContextType {
+  open: boolean
+  setOpen: (open: boolean) => void
+  toggle: () => void
+}
+
+export const MobileSidebarContext = createContext<MobileSidebarContextType | null>(null)
+
+export function useMobileSidebar(): MobileSidebarContextType {
+  const context = useContext(MobileSidebarContext)
+
+  if (context === null) {
+    throw new Error(
+      'useMobileSidebar must be used within a MobileSidebarProvider. ' +
+        'Ensure your component is wrapped with MobileSidebarProvider.'
+    )
+  }
+
+  return context
+}

apps/design-system/public/img/design-system-marks/atoms--classic-dark.svg

@@ -0,0 +1,8 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3733_538" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="96" height="96">
+<path d="M96 0H0V96H96V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3733_538)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96 48L48 0L0 48L48 96L96 48ZM7.54099 48L48 7.54133L88.459 48L48 88.4587L7.54099 48Z" fill="#B4B4B4"/>
+</g>
+</svg>

apps/design-system/public/img/design-system-marks/atoms--dark.svg

@@ -0,0 +1 @@
+<svg fill="none" height="96" viewBox="0 0 96 96" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><mask id="a" height="96" maskUnits="userSpaceOnUse" width="96" x="0" y="0"><path d="m96 0h-96v96h96z" fill="#fff"/></mask><g mask="url(#a)"><path clip-rule="evenodd" d="m96 48-48-48-48 48 48 48zm-88.45901 0 40.45901-40.45867 40.459 40.45867-40.459 40.4587z" fill="#16b674" fill-rule="evenodd"/></g></svg>

apps/design-system/public/img/design-system-marks/atoms--light.svg

@@ -0,0 +1,8 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3733_544" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="96" height="96">
+<path d="M96 0H0V96H96V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3733_544)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96 48L48 0L0 48L48 96L96 48ZM7.54099 48L48 7.54133L88.459 48L48 88.4587L7.54099 48Z" fill="#16B674"/>
+</g>
+</svg>

apps/design-system/public/img/design-system-marks/colours--classic-dark.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 48L3.771 51.7707L17.227 65.2267L21.003 68.9973L24.773 65.2267L38.229 51.7707L42 48L38.229 44.2293L24.773 30.7733L21.003 27.0027L17.227 30.7733L3.771 44.2293L0 48Z" fill="#E54D2E"/>
+<path d="M54 48L57.771 51.7707L71.227 65.2267L75.003 68.9973L78.773 65.2267L92.229 51.7707L96 48L92.229 44.2293L78.773 30.7733L75.003 27.0027L71.227 30.7733L57.771 44.2293L54 48Z" fill="#FFB224"/>
+<path d="M27 74.9973L30.771 78.768L44.227 92.224L48.003 95.9946L51.773 92.224L65.229 78.768L69 74.9973L65.229 71.2266L51.773 57.7706L48.003 54L44.227 57.7706L30.771 71.2266L27 74.9973Z" fill="#16B674"/>
+<path d="M27 20.9973L30.771 24.768L44.227 38.224L48.003 41.9946L51.773 38.224L65.229 24.768L69 20.9973L65.229 17.2266L51.773 3.7706L48.003 0L44.227 3.7706L30.771 17.2266L27 20.9973Z" fill="#A0A0A0"/>
+</svg>

apps/design-system/public/img/design-system-marks/colours--dark.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 48L3.771 51.7707L17.227 65.2267L21.003 68.9973L24.773 65.2267L38.229 51.7707L42 48L38.229 44.2293L24.773 30.7733L21.003 27.0027L17.227 30.7733L3.771 44.2293L0 48Z" fill="#E54D2E"/>
+<path d="M54 48L57.771 51.7707L71.227 65.2267L75.003 68.9973L78.773 65.2267L92.229 51.7707L96 48L92.229 44.2293L78.773 30.7733L75.003 27.0027L71.227 30.7733L57.771 44.2293L54 48Z" fill="#FFB224"/>
+<path d="M27 74.9973L30.771 78.768L44.227 92.224L48.003 95.9946L51.773 92.224L65.229 78.768L69 74.9973L65.229 71.2266L51.773 57.7706L48.003 54L44.227 57.7706L30.771 71.2266L27 74.9973Z" fill="#16B674"/>
+<path d="M27 20.9973L30.771 24.768L44.227 38.224L48.003 41.9946L51.773 38.224L65.229 24.768L69 20.9973L65.229 17.2266L51.773 3.7706L48.003 0L44.227 3.7706L30.771 17.2266L27 20.9973Z" fill="#A0A0A0"/>
+</svg>

apps/design-system/public/img/design-system-marks/colours--light.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 48L3.771 51.7707L17.227 65.2267L21.003 68.9973L24.773 65.2267L38.229 51.7707L42 48L38.229 44.2293L24.773 30.7733L21.003 27.0027L17.227 30.7733L3.771 44.2293L0 48Z" fill="#E54D2E"/>
+<path d="M54 48L57.771 51.7707L71.227 65.2267L75.003 68.9973L78.773 65.2267L92.229 51.7707L96 48L92.229 44.2293L78.773 30.7733L75.003 27.0027L71.227 30.7733L57.771 44.2293L54 48Z" fill="#FFB224"/>
+<path d="M27 74.9973L30.771 78.768L44.227 92.224L48.003 95.9946L51.773 92.224L65.229 78.768L69 74.9973L65.229 71.2266L51.773 57.7706L48.003 54L44.227 57.7706L30.771 71.2266L27 74.9973Z" fill="#16B674"/>
+<path d="M27 20.9973L30.771 24.768L44.227 38.224L48.003 41.9946L51.773 38.224L65.229 24.768L69 20.9973L65.229 17.2266L51.773 3.7706L48.003 0L44.227 3.7706L30.771 17.2266L27 20.9973Z" fill="#1C1C1C"/>
+</svg>

apps/design-system/public/img/design-system-marks/fragments--classic-dark.svg

@@ -0,0 +1,8 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3732_3807" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="96" height="96">
+<path d="M96 0H0V96H96V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3732_3807)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0027 21.0027L30.7733 24.7733L44.2293 38.2293L48 42L51.7707 38.2293L65.2267 24.7733L68.9973 21.0027L65.2267 17.2267L51.7707 3.77067L48 0L44.2293 3.77067L30.7733 17.2267L27.0027 21.0027ZM61.456 21.0027L48 34.4533L34.544 20.9973L48 7.54133L61.456 21.0027ZM27.0027 74.9973L30.7733 78.7733L44.2293 92.2293L48 96L51.7707 92.2293L65.2267 78.7733L68.9973 75.0027L65.2267 71.2267L51.7707 57.7707L48 54L44.2293 57.7707L30.7733 71.2267L27.0027 74.9973ZM61.456 74.9973L48 88.464L34.544 75.008L48 61.536L61.456 74.9973ZM3.77067 51.7707L0 48L3.77067 44.2293L17.2267 30.7733L21.0027 27.0027L24.7733 30.7733L38.2293 44.2293L42 48L38.2293 51.7707L24.7733 65.2267L21.0027 68.9973L17.2267 65.2267L3.77067 51.7707ZM20.9973 61.456L34.464 48L20.9973 34.544L7.54133 48L20.9973 61.456ZM54 48L57.7707 51.7707L71.2267 65.2267L74.9973 68.9973L78.7733 65.2267L92.2293 51.7707L96 48L92.2293 44.2293L78.7733 30.7733L75.0027 27.0027L71.2267 30.7733L57.7707 44.2293L54 48ZM88.4533 48L74.9973 61.456L61.5467 48L75.008 34.544L88.4533 48Z" fill="#B4B4B4"/>
+</g>
+</svg>

apps/design-system/public/img/design-system-marks/fragments--dark.svg

@@ -0,0 +1,8 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3732_3855" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="96" height="96">
+<path d="M96 0H0V96H96V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3732_3855)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0027 21.0027L30.7733 24.7733L44.2293 38.2293L48 42L51.7707 38.2293L65.2267 24.7733L68.9973 21.0027L65.2267 17.2267L51.7707 3.77067L48 0L44.2293 3.77067L30.7733 17.2267L27.0027 21.0027ZM61.456 21.0027L48 34.4533L34.544 20.9973L48 7.54133L61.456 21.0027ZM27.0027 74.9973L30.7733 78.7733L44.2293 92.2293L48 96L51.7707 92.2293L65.2267 78.7733L68.9973 75.0027L65.2267 71.2267L51.7707 57.7707L48 54L44.2293 57.7707L30.7733 71.2267L27.0027 74.9973ZM61.456 74.9973L48 88.464L34.544 75.008L48 61.536L61.456 74.9973ZM3.77067 51.7707L0 48L3.77067 44.2293L17.2267 30.7733L21.0027 27.0027L24.7733 30.7733L38.2293 44.2293L42 48L38.2293 51.7707L24.7733 65.2267L21.0027 68.9973L17.2267 65.2267L3.77067 51.7707ZM20.9973 61.456L34.464 48L20.9973 34.544L7.54133 48L20.9973 61.456ZM54 48L57.7707 51.7707L71.2267 65.2267L74.9973 68.9973L78.7733 65.2267L92.2293 51.7707L96 48L92.2293 44.2293L78.7733 30.7733L75.0027 27.0027L71.2267 30.7733L57.7707 44.2293L54 48ZM88.4533 48L74.9973 61.456L61.5467 48L75.008 34.544L88.4533 48Z" fill="#16B674"/>
+</g>
+</svg>

apps/design-system/public/img/design-system-marks/fragments--light.svg

@@ -0,0 +1,8 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3732_3855" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="96" height="96">
+<path d="M96 0H0V96H96V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3732_3855)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0027 21.0027L30.7733 24.7733L44.2293 38.2293L48 42L51.7707 38.2293L65.2267 24.7733L68.9973 21.0027L65.2267 17.2267L51.7707 3.77067L48 0L44.2293 3.77067L30.7733 17.2267L27.0027 21.0027ZM61.456 21.0027L48 34.4533L34.544 20.9973L48 7.54133L61.456 21.0027ZM27.0027 74.9973L30.7733 78.7733L44.2293 92.2293L48 96L51.7707 92.2293L65.2267 78.7733L68.9973 75.0027L65.2267 71.2267L51.7707 57.7707L48 54L44.2293 57.7707L30.7733 71.2267L27.0027 74.9973ZM61.456 74.9973L48 88.464L34.544 75.008L48 61.536L61.456 74.9973ZM3.77067 51.7707L0 48L3.77067 44.2293L17.2267 30.7733L21.0027 27.0027L24.7733 30.7733L38.2293 44.2293L42 48L38.2293 51.7707L24.7733 65.2267L21.0027 68.9973L17.2267 65.2267L3.77067 51.7707ZM20.9973 61.456L34.464 48L20.9973 34.544L7.54133 48L20.9973 61.456ZM54 48L57.7707 51.7707L71.2267 65.2267L74.9973 68.9973L78.7733 65.2267L92.2293 51.7707L96 48L92.2293 44.2293L78.7733 30.7733L75.0027 27.0027L71.2267 30.7733L57.7707 44.2293L54 48ZM88.4533 48L74.9973 61.456L61.5467 48L75.008 34.544L88.4533 48Z" fill="#16B674"/>
+</g>
+</svg>

apps/design-system/public/img/design-system-marks/logo--classic-dark.svg

@@ -0,0 +1,26 @@
+<svg width="570" height="96" viewBox="0 0 570 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_75_339" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="96" height="96">
+<path d="M96 0H0V96H96V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_75_339)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0027 21.0027L30.7733 24.7733L44.2293 38.2293L48 42L51.7707 38.2293L65.2267 24.7733L68.9973 21.0027L65.2267 17.2267L51.7707 3.77067L48 0L44.2293 3.77067L30.7733 17.2267L27.0027 21.0027ZM61.456 21.0027L48 34.4533L34.544 20.9973L48 7.54133L61.456 21.0027ZM27.0027 74.9973L30.7733 78.7733L44.2293 92.2293L48 96L51.7707 92.2293L65.2267 78.7733L68.9973 75.0027L65.2267 71.2267L51.7707 57.7707L48 54L44.2293 57.7707L30.7733 71.2267L27.0027 74.9973ZM61.456 74.9973L48 88.464L34.544 75.008L48 61.536L61.456 74.9973ZM3.77067 51.7707L0 48L3.77067 44.2293L17.2267 30.7733L21.0027 27.0027L24.7733 30.7733L38.2293 44.2293L42 48L38.2293 51.7707L24.7733 65.2267L21.0027 68.9973L17.2267 65.2267L3.77067 51.7707ZM20.9973 61.456L34.464 48L20.9973 34.544L7.54133 48L20.9973 61.456ZM54 48L57.7707 51.7707L71.2267 65.2267L74.9973 68.9973L78.7733 65.2267L92.2293 51.7707L96 48L92.2293 44.2293L78.7733 30.7733L75.0027 27.0027L71.2267 30.7733L57.7707 44.2293L54 48ZM88.4533 48L74.9973 61.456L61.5467 48L75.008 34.544L88.4533 48Z" fill="#B4B4B4"/>
+</g>
+<mask id="mask1_75_339" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="158" y="0" width="96" height="96">
+<path d="M254 0H158V96H254V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_75_339)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M254 48L206 0L158 48L206 96L254 48Z" fill="#B4B4B4"/>
+</g>
+<mask id="mask2_75_339" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="316" y="0" width="96" height="96">
+<path d="M412 0H316V96H412V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_75_339)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M412 48L364 0L316 48L364 96L412 48ZM323.541 48L364 7.54133L404.459 48L364 88.4587L323.541 48Z" fill="#B4B4B4"/>
+</g>
+<mask id="mask3_75_339" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="474" y="0" width="96" height="96">
+<path d="M570 0H474V96H570V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask3_75_339)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M501.003 21.0027L504.773 24.7733L518.229 38.2293L522 42L525.771 38.2293L539.227 24.7733L542.997 21.0027L539.227 17.2267L525.771 3.77067L522 0L518.229 3.77067L504.773 17.2267L501.003 21.0027ZM501.003 74.9973L504.773 78.7733L518.229 92.2293L522 96L525.771 92.2293L539.227 78.7733L542.997 75.0027L539.227 71.2267L525.771 57.7707L522 54L518.229 57.7707L504.773 71.2267L501.003 74.9973ZM477.771 51.7707L474 48L477.771 44.2293L491.227 30.7733L495.003 27.0027L498.773 30.7733L512.229 44.2293L516 48L512.229 51.7707L498.773 65.2267L495.003 68.9973L491.227 65.2267L477.771 51.7707ZM528 48L531.771 51.7707L545.227 65.2267L548.997 68.9973L552.773 65.2267L566.229 51.7707L570 48L566.229 44.2293L552.773 30.7733L549.003 27.0027L545.227 30.7733L531.771 44.2293L528 48Z" fill="#B4B4B4"/>
+</g>
+</svg>

apps/design-system/public/img/design-system-marks/logo--dark.svg

@@ -0,0 +1,26 @@
+<svg width="570" height="96" viewBox="0 0 570 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_75_361" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="96" height="96">
+<path d="M96 0H0V96H96V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_75_361)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0027 21.0027L30.7733 24.7733L44.2293 38.2293L48 42L51.7707 38.2293L65.2267 24.7733L68.9973 21.0027L65.2267 17.2267L51.7707 3.77067L48 0L44.2293 3.77067L30.7733 17.2267L27.0027 21.0027ZM61.456 21.0027L48 34.4533L34.544 20.9973L48 7.54133L61.456 21.0027ZM27.0027 74.9973L30.7733 78.7733L44.2293 92.2293L48 96L51.7707 92.2293L65.2267 78.7733L68.9973 75.0027L65.2267 71.2267L51.7707 57.7707L48 54L44.2293 57.7707L30.7733 71.2267L27.0027 74.9973ZM61.456 74.9973L48 88.464L34.544 75.008L48 61.536L61.456 74.9973ZM3.77067 51.7707L0 48L3.77067 44.2293L17.2267 30.7733L21.0027 27.0027L24.7733 30.7733L38.2293 44.2293L42 48L38.2293 51.7707L24.7733 65.2267L21.0027 68.9973L17.2267 65.2267L3.77067 51.7707ZM20.9973 61.456L34.464 48L20.9973 34.544L7.54133 48L20.9973 61.456ZM54 48L57.7707 51.7707L71.2267 65.2267L74.9973 68.9973L78.7733 65.2267L92.2293 51.7707L96 48L92.2293 44.2293L78.7733 30.7733L75.0027 27.0027L71.2267 30.7733L57.7707 44.2293L54 48ZM88.4533 48L74.9973 61.456L61.5467 48L75.008 34.544L88.4533 48Z" fill="#15593B"/>
+</g>
+<mask id="mask1_75_361" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="158" y="0" width="96" height="96">
+<path d="M254 0H158V96H254V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_75_361)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M254 48L206 0L158 48L206 96L254 48Z" fill="#16B674"/>
+</g>
+<mask id="mask2_75_361" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="316" y="0" width="96" height="96">
+<path d="M412 0H316V96H412V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_75_361)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M412 48L364 0L316 48L364 96L412 48ZM323.541 48L364 7.54133L404.459 48L364 88.4587L323.541 48Z" fill="#15593B"/>
+</g>
+<mask id="mask3_75_361" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="474" y="0" width="96" height="96">
+<path d="M570 0H474V96H570V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask3_75_361)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M501.003 21.0027L504.773 24.7733L518.229 38.2293L522 42L525.771 38.2293L539.227 24.7733L542.997 21.0027L539.227 17.2267L525.771 3.77067L522 0L518.229 3.77067L504.773 17.2267L501.003 21.0027ZM501.003 74.9973L504.773 78.7733L518.229 92.2293L522 96L525.771 92.2293L539.227 78.7733L542.997 75.0027L539.227 71.2267L525.771 57.7707L522 54L518.229 57.7707L504.773 71.2267L501.003 74.9973ZM477.771 51.7707L474 48L477.771 44.2293L491.227 30.7733L495.003 27.0027L498.773 30.7733L512.229 44.2293L516 48L512.229 51.7707L498.773 65.2267L495.003 68.9973L491.227 65.2267L477.771 51.7707ZM528 48L531.771 51.7707L545.227 65.2267L548.997 68.9973L552.773 65.2267L566.229 51.7707L570 48L566.229 44.2293L552.773 30.7733L549.003 27.0027L545.227 30.7733L531.771 44.2293L528 48Z" fill="#16B674"/>
+</g>
+</svg>

apps/design-system/public/img/design-system-marks/logo--light.svg

@@ -0,0 +1,26 @@
+<svg width="570" height="96" viewBox="0 0 570 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_75_340" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="96" height="96">
+<path d="M96 0H0V96H96V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_75_340)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0027 21.0027L30.7733 24.7733L44.2293 38.2293L48 42L51.7707 38.2293L65.2267 24.7733L68.9973 21.0027L65.2267 17.2267L51.7707 3.77067L48 0L44.2293 3.77067L30.7733 17.2267L27.0027 21.0027ZM61.456 21.0027L48 34.4533L34.544 20.9973L48 7.54133L61.456 21.0027ZM27.0027 74.9973L30.7733 78.7733L44.2293 92.2293L48 96L51.7707 92.2293L65.2267 78.7733L68.9973 75.0027L65.2267 71.2267L51.7707 57.7707L48 54L44.2293 57.7707L30.7733 71.2267L27.0027 74.9973ZM61.456 74.9973L48 88.464L34.544 75.008L48 61.536L61.456 74.9973ZM3.77067 51.7707L0 48L3.77067 44.2293L17.2267 30.7733L21.0027 27.0027L24.7733 30.7733L38.2293 44.2293L42 48L38.2293 51.7707L24.7733 65.2267L21.0027 68.9973L17.2267 65.2267L3.77067 51.7707ZM20.9973 61.456L34.464 48L20.9973 34.544L7.54133 48L20.9973 61.456ZM54 48L57.7707 51.7707L71.2267 65.2267L74.9973 68.9973L78.7733 65.2267L92.2293 51.7707L96 48L92.2293 44.2293L78.7733 30.7733L75.0027 27.0027L71.2267 30.7733L57.7707 44.2293L54 48ZM88.4533 48L74.9973 61.456L61.5467 48L75.008 34.544L88.4533 48Z" fill="#16B674"/>
+</g>
+<mask id="mask1_75_340" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="158" y="0" width="96" height="96">
+<path d="M254 0H158V96H254V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_75_340)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M254 48L206 0L158 48L206 96L254 48Z" fill="#16B674"/>
+</g>
+<mask id="mask2_75_340" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="316" y="0" width="96" height="96">
+<path d="M412 0H316V96H412V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_75_340)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M412 48L364 0L316 48L364 96L412 48ZM323.541 48L364 7.54133L404.459 48L364 88.4587L323.541 48Z" fill="#16B674"/>
+</g>
+<mask id="mask3_75_340" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="474" y="0" width="96" height="96">
+<path d="M570 0H474V96H570V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask3_75_340)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M501.003 21.0027L504.773 24.7733L518.229 38.2293L522 42L525.771 38.2293L539.227 24.7733L542.997 21.0027L539.227 17.2267L525.771 3.77067L522 0L518.229 3.77067L504.773 17.2267L501.003 21.0027ZM501.003 74.9973L504.773 78.7733L518.229 92.2293L522 96L525.771 92.2293L539.227 78.7733L542.997 75.0027L539.227 71.2267L525.771 57.7707L522 54L518.229 57.7707L504.773 71.2267L501.003 74.9973ZM477.771 51.7707L474 48L477.771 44.2293L491.227 30.7733L495.003 27.0027L498.773 30.7733L512.229 44.2293L516 48L512.229 51.7707L498.773 65.2267L495.003 68.9973L491.227 65.2267L477.771 51.7707ZM528 48L531.771 51.7707L545.227 65.2267L548.997 68.9973L552.773 65.2267L566.229 51.7707L570 48L566.229 44.2293L552.773 30.7733L549.003 27.0027L545.227 30.7733L531.771 44.2293L528 48Z" fill="#16B674"/>
+</g>
+</svg>

apps/design-system/public/img/design-system-marks/ui-patterns--classic-dark.svg

@@ -0,0 +1,8 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3732_3812" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="96" height="96">
+<path d="M96 0H0V96H96V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3732_3812)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.003 21.0027L30.773 24.7733L44.229 38.2293L48 42L51.771 38.2293L65.227 24.7733L68.997 21.0027L65.227 17.2267L51.771 3.77067L48 0L44.229 3.77067L30.773 17.2267L27.003 21.0027ZM27.003 74.9973L30.773 78.7733L44.229 92.2293L48 96L51.771 92.2293L65.227 78.7733L68.997 75.0027L65.227 71.2267L51.771 57.7707L48 54L44.229 57.7707L30.773 71.2267L27.003 74.9973ZM3.771 51.7707L0 48L3.771 44.2293L17.227 30.7733L21.003 27.0027L24.773 30.7733L38.229 44.2293L42 48L38.229 51.7707L24.773 65.2267L21.003 68.9973L17.227 65.2267L3.771 51.7707ZM54 48L57.771 51.7707L71.227 65.2267L74.997 68.9973L78.773 65.2267L92.229 51.7707L96 48L92.229 44.2293L78.773 30.7733L75.003 27.0027L71.227 30.7733L57.771 44.2293L54 48Z" fill="#B4B4B4"/>
+</g>
+</svg>

apps/design-system/public/img/design-system-marks/ui-patterns--dark.svg

@@ -0,0 +1,8 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3732_3860" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="96" height="96">
+<path d="M96 0H0V96H96V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3732_3860)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.003 21.0027L30.773 24.7733L44.229 38.2293L48 42L51.771 38.2293L65.227 24.7733L68.997 21.0027L65.227 17.2267L51.771 3.77067L48 0L44.229 3.77067L30.773 17.2267L27.003 21.0027ZM27.003 74.9973L30.773 78.7733L44.229 92.2293L48 96L51.771 92.2293L65.227 78.7733L68.997 75.0027L65.227 71.2267L51.771 57.7707L48 54L44.229 57.7707L30.773 71.2267L27.003 74.9973ZM3.771 51.7707L0 48L3.771 44.2293L17.227 30.7733L21.003 27.0027L24.773 30.7733L38.229 44.2293L42 48L38.229 51.7707L24.773 65.2267L21.003 68.9973L17.227 65.2267L3.771 51.7707ZM54 48L57.771 51.7707L71.227 65.2267L74.997 68.9973L78.773 65.2267L92.229 51.7707L96 48L92.229 44.2293L78.773 30.7733L75.003 27.0027L71.227 30.7733L57.771 44.2293L54 48Z" fill="#16B674"/>
+</g>
+</svg>

apps/design-system/public/img/design-system-marks/ui-patterns--light.svg

@@ -0,0 +1,8 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3732_3860" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="96" height="96">
+<path d="M96 0H0V96H96V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3732_3860)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.003 21.0027L30.773 24.7733L44.229 38.2293L48 42L51.771 38.2293L65.227 24.7733L68.997 21.0027L65.227 17.2267L51.771 3.77067L48 0L44.229 3.77067L30.773 17.2267L27.003 21.0027ZM27.003 74.9973L30.773 78.7733L44.229 92.2293L48 96L51.771 92.2293L65.227 78.7733L68.997 75.0027L65.227 71.2267L51.771 57.7707L48 54L44.229 57.7707L30.773 71.2267L27.003 74.9973ZM3.771 51.7707L0 48L3.771 44.2293L17.227 30.7733L21.003 27.0027L24.773 30.7733L38.229 44.2293L42 48L38.229 51.7707L24.773 65.2267L21.003 68.9973L17.227 65.2267L3.771 51.7707ZM54 48L57.771 51.7707L71.227 65.2267L74.997 68.9973L78.773 65.2267L92.229 51.7707L96 48L92.229 44.2293L78.773 30.7733L75.003 27.0027L71.227 30.7733L57.771 44.2293L54 48Z" fill="#16B674"/>
+</g>
+</svg>