[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import type React from "react" import Link from "next/link" import { ArrowRight, ExternalLink, Eye, Code, Layers } from "lucide-react" export default function Home() { return (

{/* Hero section with distinctive SFMOMA red */}

SFMOMA Design System

A comprehensive design language inspired by the San Francisco Museum of Modern Art's bold architectural presence and curatorial vision.

Explore Components View Guidelines

{/* Foundation section with asymmetrical layout */}

Design Foundations

The building blocks that form our design language, inspired by SFMOMA's architectural elements and exhibition spaces.

View All Foundations

Colors

Bold, distinctive colors that reflect the museum's visual identity and architectural character.

Explore Colors

Aa Bb Cc Dd Ee

Typography

Impactful type systems that command attention while maintaining clarity and hierarchy.

Explore Typography

Spacing

Carefully considered spatial relationships that create rhythm and balance in layouts.

Explore Spacing

Grid System

Flexible grid structures that organize content with architectural precision.

Explore Grid System

{/* Components section with museum-like display */}

Components

Carefully crafted interface elements that embody SFMOMA's design principles, providing both function and aesthetic coherence.

View All Components

Card Title

Content that showcases information in a contained, focused manner.

Input Label

Checkbox option

{/* Featured component */}

Featured Component

Exhibition Card

A distinctive card component designed to showcase exhibitions, artworks, or featured content. Inspired by SFMOMA's exhibition signage and catalog design.

View Component

Exhibition Image

Apr 6 - Aug 12, 2023

Gerhard Richter: Painting After All

A comprehensive survey of the German artist's career, spanning six decades of his experimental practice.

{/* Patterns section with full-width showcase */}

UI Patterns

Complete interface patterns that demonstrate how components work together to create cohesive, museum-quality experiences.

Featured Pattern

Exhibition Hero

A bold, attention-grabbing section designed to feature key exhibitions and content. Inspired by SFMOMA's gallery entrances and exhibition introductions.

View Pattern

Nam June Paik

Pioneering video and installation artist

May 8 - Oct 3, 2023

Featured

Featured Pattern

Gallery Grid

A flexible grid system for displaying collections of artwork, photography, or content cards. Designed to showcase visual content with museum-quality presentation.

View Pattern

{/* Guidelines section */}

Design Guidelines

Principles and best practices that guide the application of our design system, ensuring consistency and quality across all touchpoints.

} title="Accessibility" description="Guidelines for creating inclusive experiences that can be used by everyone, regardless of ability." href="/guidelines/accessibility" /> } title="Development" description="Technical standards and implementation guidelines for developers working with the design system." href="/guidelines/development" /> } title="Content" description="Principles for creating clear, consistent, and effective content that aligns with SFMOMA's voice." href="/guidelines/content" />

{/* Resources section */}

Resources

Access design assets, code repositories, and additional resources to help you implement the SFMOMA Design System in your projects.

Get Started

Ready to implement the SFMOMA Design System in your project? Follow our comprehensive installation and setup guide.

Installation Guide

) } function ComponentPreview({ title, description, href, children, }: { title: string description: string href: string children: React.ReactNode }) { return (

{children}

{title}

{description}

View Component

) } function GuidelineCard({ icon, title, description, href, }: { icon: React.ReactNode title: string description: string href: string }) { return (

{icon}

{title}

{description}

View Guidelines

) } function ResourceLink({ href, label }: { href: string; label: string }) { return ( {label} ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter, Archivo } from "next/font/google" import "./globals.css" import Header from "@/components/header" import Footer from "@/components/footer" const archivo = Archivo({ subsets: ["latin"], variable: "--font-archivo", display: "swap", }) const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap", }) export const metadata: Metadata = { title: "SFMOMA Design System", description: "A design system inspired by the San Francisco Museum of Modern Art", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

SFMOMA Design System

Design Foundations

Colors

Typography

Spacing

Grid System

Components

Card Title

Exhibition Card

Gerhard Richter: Painting After All

UI Patterns

Exhibition Hero

Nam June Paik

Gallery Grid

Design Guidelines

Resources

{title}

{title}

Card Title

Card Title

Media Card Title

Media Card Title

Artist Talk: Julie Mehretu

Artist Talk: Julie Mehretu

Featured Exhibition

Featured Exhibition

Nam June Paik: Electronic Superhighway

Nam June Paik: Electronic Superhighway

Gerhard Richter: Painting After All

Gerhard Richter: Painting After All

Become a Member

Become a Member

Exhibition Title

Exhibition Title

Card Title

Section Title

Card 1

Card 2

Another Section

Main Content Area

Nested Grid Item 1

Nested Grid Item 2

Sidebar Area

Main Content Area

Nested Grid Item 1

Nested Grid Item 2

Sidebar Area

Card 1

Card 2

Card 3

Card 1

Card 2

Card 3

Inputs

Input Variants

Text Input

Input with Icon

Select Input

Textarea

Usage Guidelines

Best Practices

Accessibility

About

About