{
  "$schema": "/schemas/registry-item.json",
  "name": "studio-index",
  "type": "registry:page",
  "title": "Studio Index",
  "description": "A minimal brand and product designer portfolio with an expansive work grid and reusable case-study pages.",
  "categories": [
    "portfolio",
    "brand",
    "product"
  ],
  "dependencies": [],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "site/app/themes/studio-index/preview/page.tsx",
      "type": "registry:page",
      "target": "app/studio-index/page.tsx",
      "content": "import type { Metadata } from \"next\";\nimport { ProjectCard, StudioHeader } from \"./DashboardComponents\";\nimport { studioProjects } from \"./projects\";\nimport \"./studio-index.css\";\n\nexport const metadata: Metadata = { title: \"Studio Index — Brand & Product Designer\", description: \"A minimal portfolio theme for independent brand and product designers, built with Coordiation.\" };\n\nexport default function StudioIndexPreview() {\n  return <main className=\"studio-index\" id=\"top\"><StudioHeader /><section className=\"si-intro\"><p className=\"si-eyebrow\">Independent practice · 2016—now</p><h1>Designer based in Jakarta.<br />Building brands and useful products.</h1><p>I work with people making things worth caring about—through positioning, visual identity, digital products, and systems that stay useful after launch.</p></section><section className=\"si-grid co-grid\" id=\"work\">{studioProjects.map((project) => <ProjectCard project={project} key={project.slug} />)}</section><footer className=\"si-footer co-flex co-items-center co-justify-between\" id=\"contact\"><p>Have a useful challenge?<br /><a href=\"mailto:hello@coordiation.com\">hello@coordiation.com</a></p><div className=\"co-flex co-items-center\"><a href=\"#top\">Back to top</a><a href=\"#work\">Selected work</a></div></footer></main>;\n}\n"
    },
    {
      "path": "site/app/themes/studio-index/preview/work/[slug]/page.tsx",
      "type": "registry:page",
      "target": "app/studio-index/work/[slug]/page.tsx",
      "content": "import type { Metadata } from \"next\";\nimport { notFound } from \"next/navigation\";\nimport ThemeIcon from \"../../ThemeIcon\";\nimport { DetailLabel, StudioHeader } from \"../../DashboardComponents\";\nimport { getStudioProject, studioProjects } from \"../../projects\";\nimport \"../../studio-index.css\";\n\nexport function generateStaticParams() {\n  return studioProjects.map(({ slug }) => ({ slug }));\n}\n\nexport async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {\n  const { slug } = await params;\n  const project = getStudioProject(slug);\n  if (!project) return { title: \"Case study not found\" };\n  return { title: `${project.title} — Studio Index`, description: project.summary, openGraph: { title: `${project.title} — Studio Index`, description: project.summary, images: [project.hero] }, twitter: { card: \"summary_large_image\", title: `${project.title} — Studio Index`, description: project.summary, images: [project.hero] } };\n}\n\nexport default async function StudioProjectDetail({ params }: { params: Promise<{ slug: string }> }) {\n  const { slug } = await params;\n  const project = getStudioProject(slug);\n  if (!project) notFound();\n  return <main className=\"studio-index si-detail-page\"><StudioHeader /><a className=\"si-back co-inline-flex co-items-center\" href=\"/themes/studio-index/preview\"><ThemeIcon name=\"arrow-right\" size={15} />All work</a><section className=\"si-detail-hero\"><div><p className=\"si-eyebrow\">{project.discipline}</p><h1>{project.title}</h1><p>{project.statement}</p></div><div className=\"si-detail-labels co-grid\"><DetailLabel icon=\"user\" label=\"Client\">{project.client}</DetailLabel><DetailLabel icon=\"case-minimalistic\" label=\"Role\">{project.role}</DetailLabel><DetailLabel icon=\"global\" label=\"Place\">{project.location}</DetailLabel><DetailLabel icon=\"calendar\" label=\"Year\">{project.period}</DetailLabel></div></section><figure className=\"si-detail-image\"><img src={project.hero} alt={`${project.title} feature`} /></figure><section className=\"si-detail-story co-grid\"><div><p className=\"si-eyebrow\">Concept</p><h2>A distinct idea that can grow without losing itself.</h2></div><p>{project.concept}</p></section><section className=\"si-system co-grid\"><div className=\"si-system-card\" style={{ background: project.color }}><span>Primary mark</span><b>{project.title.slice(0, 1)}</b></div><div className=\"si-system-copy\"><p className=\"si-eyebrow\">Visual language</p><h2>Designed to be recognized before it is explained.</h2><p>Every element has a practical role: color holds attention, type sets the pace, and the icon language gives repeated moments a familiar shape.</p><div className=\"si-swatches co-flex\"><i style={{ background: project.color }} /><i /><i /><i /></div></div></section><section className=\"si-gallery co-grid\">{project.gallery.map((image, index) => <figure className={index === 1 ? \"is-tall\" : \"\"} key={image}><img src={image} alt={`${project.title} project detail ${index + 1}`} /></figure>)}</section><section className=\"si-detail-outcome\"><p className=\"si-eyebrow\">Outcome</p><h2>{project.outcome}</h2><a className=\"si-case-link co-inline-flex co-items-center\" href=\"/themes/studio-index/preview\">See more work <ThemeIcon name=\"arrow-right\" size={15} /></a></section><footer className=\"si-footer co-flex co-items-center co-justify-between\"><p>© 2026 Coordiation.<br />Built with Coordiation components.</p><a href=\"mailto:hello@coordiation.com\">Start a conversation <ThemeIcon name=\"arrow-to-top-right\" size={15} /></a></footer></main>;\n}\n"
    },
    {
      "path": "site/app/themes/studio-index/preview/studio-index.css",
      "type": "registry:style",
      "target": "app/studio-index/studio-index.css",
      "content": ".studio-index{--si-ink:#111;--si-muted:#5f5f61;--si-line:#dedee0;--si-paper:#fff;min-height:100vh;padding:24px max(28px,calc((100vw - 1440px)/2));background:var(--si-paper);color:var(--si-ink);font:14px/1.5 Arial,Helvetica,sans-serif}.studio-index *,.studio-index *:before,.studio-index *:after{box-sizing:border-box}.studio-index h1,.studio-index h2,.studio-index p,.studio-index figure{margin:0}.studio-index a{color:inherit;text-decoration:none}.studio-index img{display:block;max-width:100%}.studio-index .co-flex{display:flex}.studio-index .co-inline-flex{display:inline-flex}.studio-index .co-grid{display:grid}.studio-index .co-items-start{align-items:flex-start}.studio-index .co-items-center{align-items:center}.studio-index .co-items-end{align-items:flex-end}.studio-index .co-justify-between{justify-content:space-between}.studio-index .co-justify-center{justify-content:center}.studio-index .co-flex-col{flex-direction:column}.studio-index .co-relative{position:relative}.studio-index .co-absolute{position:absolute}.studio-index .co-overflow-hidden{overflow:hidden}.studio-index .co-w-full{width:100%}.studio-index .co-h-full{height:100%}.studio-index .co-object-cover{object-fit:cover}.studio-index .co-transition{transition-property:transform,opacity,color,border-color}.studio-index .co-duration-300{transition-duration:.3s}.studio-index .co-duration-500{transition-duration:.5s}.studio-index .co-ease-out{transition-timing-function:cubic-bezier(.16,1,.3,1)}.studio-index .co-text-center{text-align:center}\n.si-icon{display:block;flex:0 0 auto}.si-icon-light{filter:brightness(0) invert(1)}.si-header{min-height:170px}.si-identity{font-size:11px;line-height:1.35}.si-identity strong{margin-bottom:7px}.si-header nav{gap:13px}.si-header nav a{display:grid;width:26px;height:26px;place-items:center;border-radius:50%;transition:background .25s ease}.si-header nav a:hover{background:#eee}.si-eyebrow{margin-bottom:14px!important;color:#777;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.si-intro{padding:70px 0 88px}.si-intro h1{max-width:930px;font-size:clamp(40px,5vw,74px);font-weight:400;letter-spacing:-.06em;line-height:1.02}.si-intro>p:last-child{max-width:590px;margin-top:30px;color:var(--si-muted);font-size:16px}.si-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:70px 16px;padding-bottom:130px}.si-project{min-width:0}.si-project-cover{display:block;aspect-ratio:1/1;border-radius:18px}.si-project-cover img{transition:transform .5s cubic-bezier(.16,1,.3,1)}.si-project-cover:hover img{transform:scale(1.035)}.si-project-meta{gap:12px;margin-top:19px;font-size:11px;line-height:1.1}.si-project-meta strong{font-size:12px}.si-project-meta span{color:#5e5e60}.si-project p{max-width:620px;margin:14px 0 24px;color:#555;font-size:12px}.si-case-link{gap:9px;padding-bottom:2px;border-bottom:1px solid currentColor;font-size:11px;font-weight:700}.si-case-link:hover{color:#555}.si-footer{min-height:150px;padding:27px 0;border-top:1px solid var(--si-line);font-size:11px}.si-footer p{line-height:1.55}.si-footer p a{font-weight:700}.si-footer>div{gap:20px}.si-footer>div a{color:#666}\n.si-detail-page{width:100%;margin:0 auto}.si-detail-page .si-header{min-height:115px}.si-back{gap:9px;margin:15px 0 75px;font-size:11px;font-weight:700}.si-back img{transform:rotate(180deg)}.si-detail-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:clamp(38px,6vw,90px);padding-bottom:65px}.si-detail-hero>*{min-width:0}.si-detail-hero h1{max-width:700px;font-size:clamp(64px,10vw,150px);font-weight:400;letter-spacing:-.085em;line-height:.83}.si-detail-hero>div:first-child>p:last-child{max-width:590px;margin-top:32px;color:#343436;font-size:clamp(17px,2vw,25px);line-height:1.28}.si-detail-labels{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:20px;padding-top:35px}.si-detail-label{display:flex;min-height:110px;min-width:0;flex-direction:column;justify-content:space-between;padding:15px 0;border-top:1px solid var(--si-line)}.si-detail-label span{gap:8px;color:#777;font-size:10px;letter-spacing:.05em;text-transform:uppercase}.si-detail-label strong{max-width:190px;font-size:13px;line-height:1.3;overflow-wrap:anywhere}.si-detail-image{overflow:hidden;border-radius:20px;background:#f1f1ef}.si-detail-image img{width:100%;height:min(65vw,720px);object-fit:cover}.si-detail-story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14%;padding:120px 9%}.si-detail-story h2,.si-system-copy h2{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:clamp(31px,4vw,57px);font-weight:400;letter-spacing:-.055em;line-height:.98}.si-detail-story>p{max-width:490px;padding-top:42px;color:#454549;font-size:16px}.si-system{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch;padding:0 9% 110px}.si-system>*{min-width:0}.si-system-card{display:flex;min-height:500px;overflow:hidden;flex-direction:column;justify-content:space-between;padding:26px;border-radius:18px;color:#fff}.si-system-card span{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.si-system-card b{font-size:clamp(160px,20vw,310px);font-weight:400;letter-spacing:-.12em;line-height:.72}.si-system-copy{display:flex;min-height:500px;flex-direction:column;justify-content:center;padding:9%}.si-system-copy>p:not(.si-eyebrow){max-width:430px;margin-top:28px;color:#56565a}.si-swatches{gap:9px;margin-top:38px;flex-wrap:wrap}.si-swatches i{width:35px;height:35px;flex:0 0 35px;border-radius:50%;background:#141414}.si-swatches i:nth-child(3){background:#d6d4ce}.si-swatches i:nth-child(4){background:#f1eee6}.si-gallery{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding-bottom:120px}.si-gallery figure{min-height:430px;overflow:hidden;border-radius:18px;background:#f1f1ef}.si-gallery figure:first-child{grid-column:1/3;min-height:680px}.si-gallery figure.is-tall{min-height:630px}.si-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}.si-gallery figure:hover img{transform:scale(1.025)}.si-detail-outcome{max-width:970px;padding:0 0 130px}.si-detail-outcome h2{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;margin-bottom:42px;font-size:clamp(36px,5vw,72px);font-weight:400;letter-spacing:-.065em;line-height:.96}.si-detail-page .si-footer>a{display:inline-flex;align-items:center;gap:9px;font-weight:700}\n@media(max-width:760px){.studio-index{padding-inline:16px}.si-header{min-height:125px}.si-intro{padding:35px 0 55px}.si-intro>p:last-child{font-size:14px}.si-grid{grid-template-columns:1fr;gap:65px;padding-bottom:95px}.si-project-cover{border-radius:13px}.si-project-meta{align-items:flex-start;flex-wrap:wrap}.si-project-meta strong{width:100%}.si-footer{min-height:130px;align-items:flex-start!important;flex-direction:column;justify-content:center!important;gap:18px}.si-detail-page .si-header{min-height:95px}.si-back{margin-bottom:45px}.si-detail-hero{grid-template-columns:1fr;gap:15px;padding-bottom:44px}.si-detail-hero h1{font-size:clamp(62px,18vw,100px)}.si-detail-labels{padding-top:16px}.si-detail-image{border-radius:13px}.si-detail-image img{height:74vw}.si-detail-story{grid-template-columns:1fr;gap:14px;padding:78px 0}.si-detail-story>p{padding-top:10px;font-size:15px}.si-system{grid-template-columns:1fr;padding:0 0 78px}.si-system-card,.si-system-copy{min-height:340px}.si-system-card b{font-size:210px}.si-system-copy{padding:38px 0}.si-gallery{grid-template-columns:1fr;padding-bottom:80px}.si-gallery figure,.si-gallery figure:first-child,.si-gallery figure.is-tall{grid-column:auto;min-height:330px;border-radius:13px}.si-detail-outcome{padding-bottom:90px}}\n@media(max-width:420px){.si-detail-hero h1{font-size:56px}.si-detail-labels{grid-template-columns:1fr;gap:0}.si-detail-label{min-height:88px}.si-detail-image img{height:82vw}.si-system-card{min-height:300px;padding:22px}.si-system-card b{font-size:165px}.si-system-copy{min-height:0;padding:30px 0 10px}.si-gallery figure,.si-gallery figure:first-child,.si-gallery figure.is-tall{min-height:260px}.si-detail-page .si-footer>a{max-width:100%;overflow-wrap:anywhere}}\n@media(prefers-reduced-motion:reduce){.studio-index *,.studio-index *:before,.studio-index *:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}\n"
    },
    {
      "path": "site/app/themes/studio-index/preview/projects.ts",
      "type": "registry:file",
      "target": "app/studio-index/projects.ts",
      "content": "export type StudioProject = {\n  slug: string;\n  title: string;\n  period: string;\n  discipline: string;\n  summary: string;\n  color: string;\n  cover: string;\n  hero: string;\n  client: string;\n  role: string;\n  location: string;\n  statement: string;\n  concept: string;\n  outcome: string;\n  gallery: string[];\n};\n\nexport const studioProjects: StudioProject[] = [\n  {\n    slug: \"root-table\",\n    title: \"Root Table\",\n    period: \"2025–2026\",\n    discipline: \"Brand & Strategy\",\n    summary: \"A warm identity and digital home for a vegetable-led neighborhood restaurant.\",\n    color: \"#258a54\",\n    cover: \"/themes/studio-index/root-table.jpg\",\n    hero: \"/themes/studio-index/detail-food.jpg\",\n    client: \"Root Table\",\n    role: \"Strategy, identity and digital direction\",\n    location: \"Jakarta, Indonesia\",\n    statement: \"A neighborhood restaurant built around growers, honest ingredients, and the pleasure of sharing a table.\",\n    concept: \"The identity begins with a simple seed and unfolds into an open flower. A compact mark, generous typography, and earthy colors make the restaurant feel both contemporary and familiar.\",\n    outcome: \"Root Table launched with one coherent system across signage, menus, social storytelling, staff materials, and a responsive reservation website.\",\n    gallery: [\"/themes/studio-index/detail-chef.jpg\", \"/themes/studio-index/detail-material.jpg\", \"/themes/studio-index/detail-mobile.jpg\"],\n  },\n  {\n    slug: \"playroom\",\n    title: \"Playroom\",\n    period: \"2024–2025\",\n    discipline: \"Product Design\",\n    summary: \"A flexible creative workspace that helps distributed teams turn rough ideas into shared decisions.\",\n    color: \"#e9b633\",\n    cover: \"/themes/studio-index/playroom.jpg\",\n    hero: \"/themes/studio-index/detail-team.jpg\",\n    client: \"Playroom Labs\",\n    role: \"Product strategy and interaction design\",\n    location: \"Remote\",\n    statement: \"A collaborative product for the messy, energetic stage before an idea becomes a roadmap.\",\n    concept: \"We designed an intentionally light interface where notes, images, sketches, and decisions could coexist without forcing teams into a rigid workflow.\",\n    outcome: \"The first release helped product teams shorten review cycles and gave every contributor a clearer view of what had changed and why.\",\n    gallery: [\"/themes/studio-index/detail-work.jpg\", \"/themes/studio-index/detail-mobile.jpg\", \"/themes/studio-index/aperture.jpg\"],\n  },\n  {\n    slug: \"aperture\",\n    title: \"Aperture\",\n    period: \"2024\",\n    discipline: \"Identity & Editorial\",\n    summary: \"A colorful visual system for an ideas festival where every session should feel like an invitation.\",\n    color: \"#e86b47\",\n    cover: \"/themes/studio-index/aperture.jpg\",\n    hero: \"/themes/studio-index/detail-work.jpg\",\n    client: \"Aperture Festival\",\n    role: \"Naming, identity and event experience\",\n    location: \"Yogyakarta, Indonesia\",\n    statement: \"An annual gathering where artists, makers, and curious organizations meet around better questions.\",\n    concept: \"Aperture uses a modular window as its core device. It crops, frames, and changes color across posters, social assets, wayfinding, and the event platform.\",\n    outcome: \"The new identity gave a young festival a flexible public voice that could be built by a small internal team without losing its character.\",\n    gallery: [\"/themes/studio-index/detail-material.jpg\", \"/themes/studio-index/detail-team.jpg\", \"/themes/studio-index/detail-mobile.jpg\"],\n  },\n  {\n    slug: \"homebase\",\n    title: \"Homebase\",\n    period: \"2023–2024\",\n    discipline: \"Digital Product\",\n    summary: \"A calmer way to find, compare, and organize the essentials of moving into a new home.\",\n    color: \"#88b7eb\",\n    cover: \"/themes/studio-index/homebase.jpg\",\n    hero: \"/themes/studio-index/detail-mobile.jpg\",\n    client: \"Homebase\",\n    role: \"Product vision, UX and design system\",\n    location: \"Southeast Asia\",\n    statement: \"A home setup assistant for people navigating decisions that are expensive, emotional, and rarely made twice.\",\n    concept: \"The product puts context before comparison. We paired simple checklists with flexible collections, clear explanations, and a friendly visual language that lowers the pressure of making choices.\",\n    outcome: \"A single responsive system brought the web app, mobile flows, and lifecycle emails into one recognisable experience.\",\n    gallery: [\"/themes/studio-index/detail-work.jpg\", \"/themes/studio-index/playroom.jpg\", \"/themes/studio-index/detail-team.jpg\"],\n  },\n  {\n    slug: \"signal\",\n    title: \"Signal\",\n    period: \"2023\",\n    discipline: \"Service Design\",\n    summary: \"A new ticketing experience built around transparency, timing, and a much more human queue.\",\n    color: \"#32b4e4\",\n    cover: \"/themes/studio-index/signal.jpg\",\n    hero: \"/themes/studio-index/detail-mobile.jpg\",\n    client: \"Signal Events\",\n    role: \"Service design and interface direction\",\n    location: \"Indonesia\",\n    statement: \"A ticketing service that treats anticipation as part of the experience, rather than a problem to be managed.\",\n    concept: \"We simplified the purchase journey into a few deliberate moments: discover, decide, pay, and prepare. A clear status system keeps people informed when demand is high.\",\n    outcome: \"The launch delivered a clearer checkout, fewer support requests, and a pattern library teams could reuse across every event season.\",\n    gallery: [\"/themes/studio-index/detail-team.jpg\", \"/themes/studio-index/detail-work.jpg\", \"/themes/studio-index/aperture.jpg\"],\n  },\n  {\n    slug: \"sidecar\",\n    title: \"Sidecar\",\n    period: \"2022–2023\",\n    discipline: \"Brand & Product\",\n    summary: \"A mobile companion that helps small teams turn informal knowledge into reusable field notes.\",\n    color: \"#9478ef\",\n    cover: \"/themes/studio-index/sidecar.jpg\",\n    hero: \"/themes/studio-index/detail-team.jpg\",\n    client: \"Sidecar Collective\",\n    role: \"Identity, product design and launch direction\",\n    location: \"Remote\",\n    statement: \"A portable working memory for people who learn by doing and need their best discoveries close at hand.\",\n    concept: \"The visual system combines utilitarian labels with generous space. Notes can be captured quickly in the field, then returned to as polished references when the team is back at a desk.\",\n    outcome: \"Sidecar shipped a clear, approachable product language from its first invitation through to the daily workspace.\",\n    gallery: [\"/themes/studio-index/detail-work.jpg\", \"/themes/studio-index/detail-material.jpg\", \"/themes/studio-index/detail-mobile.jpg\"],\n  },\n];\n\nexport function getStudioProject(slug: string) {\n  return studioProjects.find((project) => project.slug === slug);\n}\n"
    },
    {
      "path": "site/app/themes/studio-index/preview/ThemeIcon.tsx",
      "type": "registry:component",
      "target": "app/studio-index/ThemeIcon.tsx",
      "content": "const icons = {\n  \"arrow-right\": \"/icons/solar-linear/arrow-right.svg\",\n  \"arrow-to-top-right\": \"/icons/solar-linear/arrow-to-top-right.svg\",\n  \"hamburger-menu\": \"/icons/solar-linear/hamburger-menu.svg\",\n  letter: \"/icons/solar-linear/letter.svg\",\n  global: \"/icons/solar-linear/global.svg\",\n  palette: \"/icons/solar-linear/palette.svg\",\n  code: \"/icons/solar-linear/code.svg\",\n  user: \"/icons/solar-linear/user.svg\",\n  calendar: \"/icons/solar-linear/calendar.svg\",\n  \"gallery-minimalistic\": \"/icons/solar-linear/gallery-minimalistic.svg\",\n  \"layers-minimalistic\": \"/icons/solar-linear/layers-minimalistic.svg\",\n  \"case-minimalistic\": \"/icons/solar-linear/case-minimalistic.svg\",\n  link: \"/icons/solar-linear/link.svg\",\n} as const;\n\nexport type ThemeIconName = keyof typeof icons;\n\nexport default function ThemeIcon({ name, size = 16, tone = \"dark\" }: { name: ThemeIconName; size?: number; tone?: \"dark\" | \"light\" }) {\n  return <img className={`si-icon si-icon-${tone}`} src={icons[name]} width={size} height={size} alt=\"\" aria-hidden=\"true\" />;\n}\n"
    },
    {
      "path": "site/app/themes/studio-index/preview/DashboardComponents.tsx",
      "type": "registry:component",
      "target": "app/studio-index/DashboardComponents.tsx",
      "content": "import type { ReactNode } from \"react\";\nimport ThemeIcon from \"./ThemeIcon\";\nimport type { StudioProject } from \"./projects\";\n\nexport function StudioHeader() {\n  return <header className=\"si-header co-flex co-items-start co-justify-between\"><a className=\"si-identity co-flex co-flex-col\" href=\"/themes/studio-index/preview\"><strong>Ayla Vermeer</strong><span>Brand &amp; Product Design</span><span>©2026 Coordiation</span></a><nav className=\"co-flex co-items-center\" aria-label=\"Portfolio navigation\"><a href=\"/themes/studio-index/preview#contact\" aria-label=\"Email\"><ThemeIcon name=\"letter\" /></a><a href=\"/themes/studio-index/preview#work\" aria-label=\"Portfolio\"><ThemeIcon name=\"gallery-minimalistic\" /></a><a href=\"/themes/studio-index/preview#contact\" aria-label=\"Contact\"><ThemeIcon name=\"link\" /></a></nav></header>;\n}\n\nexport function ProjectCard({ project }: { project: StudioProject }) {\n  return <article className=\"si-project\"><a className=\"si-project-cover co-relative co-overflow-hidden\" href={`/themes/studio-index/preview/work/${project.slug}`} style={{ background: project.color }}><img className=\"co-w-full co-h-full co-object-cover co-transition co-duration-500 co-ease-out\" src={project.cover} alt={`${project.title} project cover`} /></a><div className=\"si-project-meta co-flex co-items-center\"><strong>{project.title}</strong><span>{project.period}</span><span>{project.discipline}</span></div><p>{project.summary}</p><a className=\"si-case-link co-inline-flex co-items-center\" href={`/themes/studio-index/preview/work/${project.slug}`}>View case study <ThemeIcon name=\"arrow-right\" size={14} /></a></article>;\n}\n\nexport function DetailLabel({ icon, label, children }: { icon: \"user\" | \"global\" | \"case-minimalistic\" | \"calendar\"; label: string; children: ReactNode }) {\n  return <div className=\"si-detail-label\"><span className=\"co-inline-flex co-items-center\"><ThemeIcon name={icon} size={14} />{label}</span><strong>{children}</strong></div>;\n}\n"
    },
    {
      "path": "site/public/icons/solar-linear/arrow-right.svg",
      "type": "registry:file",
      "target": "public/icons/solar-linear/arrow-right.svg",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" class=\"solar solar-arrow-right-linear\"><path d=\"M4 12H20M14 18L20 12L14 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>"
    },
    {
      "path": "site/public/icons/solar-linear/arrow-to-top-right.svg",
      "type": "registry:file",
      "target": "public/icons/solar-linear/arrow-to-top-right.svg",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" class=\"solar solar-arrow-to-top-right-linear\"><path d=\"M17 9.5L12 4.5L7 9.5M12 4.5C12 4.5 12 12.8333 12 14.5C12 16.1667 13 19.5 17 19.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>"
    },
    {
      "path": "site/public/icons/solar-linear/hamburger-menu.svg",
      "type": "registry:file",
      "target": "public/icons/solar-linear/hamburger-menu.svg",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" class=\"solar solar-hamburger-menu-linear\"><path d=\"M20 7L4 7\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n<path d=\"M20 12L4 12\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n<path d=\"M20 17L4 17\" stroke=\"currentColor\" stroke-linecap=\"round\"/></svg>"
    },
    {
      "path": "site/public/icons/solar-linear/letter.svg",
      "type": "registry:file",
      "target": "public/icons/solar-linear/letter.svg",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" class=\"solar solar-letter-linear\"><path d=\"M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12Z\" stroke=\"currentColor\"/>\n<path d=\"M6 8L8.1589 9.79908C9.99553 11.3296 10.9139 12.0949 12 12.0949C13.0861 12.0949 14.0045 11.3296 15.8411 9.79908L18 8\" stroke=\"currentColor\" stroke-linecap=\"round\"/></svg>"
    },
    {
      "path": "site/public/icons/solar-linear/global.svg",
      "type": "registry:file",
      "target": "public/icons/solar-linear/global.svg",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" class=\"solar solar-global-linear\"><path d=\"M22 12C22 13.3132 21.7413 14.6136 21.2388 15.8268C20.7362 17.0401 19.9997 18.1425 19.0711 19.0711C18.1425 19.9997 17.0401 20.7362 15.8268 21.2388C14.6136 21.7413 13.3132 22 12 22C10.6868 22 9.38642 21.7413 8.17317 21.2388C6.95991 20.7362 5.85752 19.9997 4.92893 19.0711C4.00035 18.1425 3.26375 17.0401 2.7612 15.8268C2.25866 14.6136 2 13.3132 2 12C2 10.6868 2.25866 9.38642 2.76121 8.17316C3.26375 6.95991 4.00035 5.85752 4.92893 4.92893C5.85752 4.00035 6.95991 3.26375 8.17317 2.7612C9.38642 2.25866 10.6868 2 12 2C13.3132 2 14.6136 2.25866 15.8268 2.76121C17.0401 3.26375 18.1425 4.00035 19.0711 4.92893C19.9997 5.85752 20.7362 6.95991 21.2388 8.17317C21.7413 9.38642 22 10.6868 22 12L22 12Z\" stroke=\"currentColor\"/>\n<path d=\"M16 12C16 13.3132 15.8965 14.6136 15.6955 15.8268C15.4945 17.0401 15.1999 18.1425 14.8284 19.0711C14.457 19.9997 14.016 20.7362 13.5307 21.2388C13.0454 21.7413 12.5253 22 12 22C11.4747 22 10.9546 21.7413 10.4693 21.2388C9.98396 20.7362 9.54301 19.9997 9.17157 19.0711C8.80014 18.1425 8.5055 17.0401 8.30448 15.8268C8.10346 14.6136 8 13.3132 8 12C8 10.6868 8.10346 9.38642 8.30448 8.17316C8.5055 6.95991 8.80014 5.85752 9.17157 4.92893C9.54301 4.00035 9.98396 3.26375 10.4693 2.7612C10.9546 2.25866 11.4747 2 12 2C12.5253 2 13.0454 2.25866 13.5307 2.76121C14.016 3.26375 14.457 4.00035 14.8284 4.92893C15.1999 5.85752 15.4945 6.95991 15.6955 8.17317C15.8965 9.38642 16 10.6868 16 12L16 12Z\" stroke=\"currentColor\"/>\n<path d=\"M2 12H22\" stroke=\"currentColor\" stroke-linecap=\"round\"/></svg>"
    },
    {
      "path": "site/public/icons/solar-linear/palette.svg",
      "type": "registry:file",
      "target": "public/icons/solar-linear/palette.svg",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" class=\"solar solar-palette-linear\"><path d=\"M2 6C2 4.59987 2 3.8998 2.27248 3.36502C2.51217 2.89462 2.89462 2.51217 3.36502 2.27248C3.8998 2 4.59987 2 6 2C7.40013 2 8.1002 2 8.63498 2.27248C9.10538 2.51217 9.48783 2.89462 9.72752 3.36502C10 3.8998 10 4.59987 10 6V18C10 19.4001 10 20.1002 9.72752 20.635C9.48783 21.1054 9.10538 21.4878 8.63498 21.7275C8.1002 22 7.40013 22 6 22C4.59987 22 3.8998 22 3.36502 21.7275C2.89462 21.4878 2.51217 21.1054 2.27248 20.635C2 20.1002 2 19.4001 2 18V6Z\" stroke=\"currentColor\"/>\n<path d=\"M7 19H5\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n<path d=\"M13.3137 4.929L11.1716 7.07109C10.5935 7.64915 10.3045 7.93818 10.1522 8.30573C10 8.67327 10 9.08202 10 9.89952L10 19.5564L18.9705 10.5859C19.9606 9.59581 20.4556 9.10079 20.6411 8.52997C20.8042 8.02786 20.8042 7.48699 20.6411 6.98489C20.4556 6.41406 19.9606 5.91904 18.9705 4.929C17.9805 3.93896 17.4855 3.44394 16.9146 3.25847C16.4125 3.09532 15.8717 3.09532 15.3695 3.25847C14.7987 3.44394 14.3037 3.93896 13.3137 4.929Z\" stroke=\"currentColor\"/>\n<path d=\"M6 22L18 22C19.4001 22 20.1002 22 20.635 21.7275C21.1054 21.4878 21.4878 21.1054 21.7275 20.635C22 20.1002 22 19.4001 22 18C22 16.5999 22 15.8998 21.7275 15.365C21.4878 14.8946 21.1054 14.5122 20.635 14.2725C20.1002 14 19.4001 14 18 14L15.5 14\" stroke=\"currentColor\"/></svg>"
    },
    {
      "path": "site/public/icons/solar-linear/code.svg",
      "type": "registry:file",
      "target": "public/icons/solar-linear/code.svg",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" class=\"solar solar-code-linear\"><path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n<path d=\"M13.9868 5L12 12.4149L10.0132 19.8297\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"currentColor\" stroke-linecap=\"round\"/></svg>"
    },
    {
      "path": "site/public/icons/solar-linear/user.svg",
      "type": "registry:file",
      "target": "public/icons/solar-linear/user.svg",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" class=\"solar solar-user-linear\"><circle cx=\"12\" cy=\"6\" r=\"4\" stroke=\"currentColor\"/>\n<path d=\"M20 17.5C20 19.9853 20 22 12 22C4 22 4 19.9853 4 17.5C4 15.0147 7.58172 13 12 13C16.4183 13 20 15.0147 20 17.5Z\" stroke=\"currentColor\"/></svg>"
    },
    {
      "path": "site/public/icons/solar-linear/calendar.svg",
      "type": "registry:file",
      "target": "public/icons/solar-linear/calendar.svg",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" class=\"solar solar-calendar-linear\"><path d=\"M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12Z\" stroke=\"currentColor\"/>\n<path d=\"M7 4V2.5\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n<path d=\"M17 4V2.5\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n<path d=\"M2.5 9H21.5\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n<path d=\"M17 13H17.0001\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 13H12.0001\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M7 13H7.0001\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M17 17.0234H17.0001\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17.0234H12.0001\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M7 17.0234H7.0001\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>"
    },
    {
      "path": "site/public/icons/solar-linear/gallery-minimalistic.svg",
      "type": "registry:file",
      "target": "public/icons/solar-linear/gallery-minimalistic.svg",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" class=\"solar solar-gallery-minimalistic-linear\"><path d=\"M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z\" stroke=\"currentColor\"/>\n<circle cx=\"16\" cy=\"8\" r=\"2\" stroke=\"currentColor\"/>\n<path d=\"M5 13.307L5.81051 12.5542C6.73658 11.6941 8.18321 11.7424 9.04988 12.6623L11.6974 15.4727C12.2356 16.0439 13.1166 16.1209 13.7457 15.6516C14.6522 14.9753 15.9144 15.0522 16.7322 15.8334L19 18\" stroke=\"currentColor\" stroke-linecap=\"round\"/></svg>"
    },
    {
      "path": "site/public/icons/solar-linear/layers-minimalistic.svg",
      "type": "registry:file",
      "target": "public/icons/solar-linear/layers-minimalistic.svg",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" class=\"solar solar-layers-minimalistic-linear\"><path d=\"M4.97883 9.68508C2.99294 8.89073 2 8.49355 2 8C2 7.50645 2.99294 7.10927 4.97883 6.31492L7.7873 5.19153C9.77318 4.39718 10.7661 4 12 4C13.2339 4 14.2268 4.39718 16.2127 5.19153L19.0212 6.31492C21.0071 7.10927 22 7.50645 22 8C22 8.49355 21.0071 8.89073 19.0212 9.68508L16.2127 10.8085C14.2268 11.6028 13.2339 12 12 12C10.7661 12 9.77318 11.6028 7.7873 10.8085L4.97883 9.68508Z\" stroke=\"currentColor\"/>\n<path d=\"M22 12C22 12 21.0071 12.8907 19.0212 13.6851L16.2127 14.8085C14.2268 15.6028 13.2339 16 12 16C10.7661 16 9.77318 15.6028 7.7873 14.8085L4.97883 13.6851C2.99294 12.8907 2 12 2 12\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n<path d=\"M22 16C22 16 21.0071 16.8907 19.0212 17.6851L16.2127 18.8085C14.2268 19.6028 13.2339 20 12 20C10.7661 20 9.77318 19.6028 7.7873 18.8085L4.97883 17.6851C2.99294 16.8907 2 16 2 16\" stroke=\"currentColor\" stroke-linecap=\"round\"/></svg>"
    },
    {
      "path": "site/public/icons/solar-linear/case-minimalistic.svg",
      "type": "registry:file",
      "target": "public/icons/solar-linear/case-minimalistic.svg",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" class=\"solar solar-case-minimalistic-linear\"><path d=\"M14 6H10C8.64413 6 7.53199 6 6.60915 6.05445C4.96519 6.15144 3.92193 6.42122 3.17157 7.17157C2 8.34315 2 10.2288 2 14C2 17.7712 2 19.6569 3.17157 20.8284C4.34315 22 6.22876 22 10 22H14C17.7712 22 19.6569 22 20.8284 20.8284C22 19.6569 22 17.7712 22 14C22 10.2288 22 8.34315 20.8284 7.17157C20.0781 6.42122 19.0348 6.15144 17.3909 6.05445C16.468 6 15.3559 6 14 6Z\" stroke=\"currentColor\"/>\n<path d=\"M6.60938 6.05445C7.43282 6.03358 8.15925 5.45491 8.43944 4.68032C8.44806 4.65649 8.4569 4.62999 8.47457 4.57697L8.50023 4.5C8.54241 4.37344 8.56351 4.31014 8.58608 4.254C8.87427 3.53712 9.54961 3.05037 10.3208 3.00366C10.3812 3 10.4479 3 10.5814 3H13.4191C13.5525 3 13.6192 3 13.6796 3.00366C14.4508 3.05037 15.1262 3.53712 15.4144 4.254C15.4369 4.31014 15.458 4.37343 15.5002 4.5L15.5259 4.57697C15.5435 4.62992 15.5524 4.65651 15.561 4.68032C15.8412 5.45491 16.5676 6.03358 17.3911 6.05445\" stroke=\"currentColor\"/>\n<path d=\"M21.6618 8.71973C18.6519 10.6761 17.147 11.6543 15.5605 12.1472C13.2416 12.8677 10.7586 12.8677 8.43963 12.1472C6.85313 11.6543 5.34822 10.6761 2.33838 8.71973\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n<path d=\"M8 11V13\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n<path d=\"M16 11V13\" stroke=\"currentColor\" stroke-linecap=\"round\"/></svg>"
    },
    {
      "path": "site/public/icons/solar-linear/link.svg",
      "type": "registry:file",
      "target": "public/icons/solar-linear/link.svg",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" class=\"solar solar-link-linear\"><path d=\"M10.0464 14C8.54044 12.4882 8.67609 9.90087 10.3494 8.22108L15.197 3.35462C16.8703 1.67483 19.4476 1.53865 20.9536 3.05046C22.4596 4.56228 22.3239 7.14956 20.6506 8.82935L18.2268 11.2626\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n<path d=\"M13.9536 10C15.4596 11.5118 15.3239 14.0991 13.6506 15.7789L11.2268 18.2121L8.80299 20.6454C7.12969 22.3252 4.55237 22.4613 3.0464 20.9495C1.54043 19.4377 1.67609 16.8504 3.34939 15.1706L5.77323 12.7373\" stroke=\"currentColor\" stroke-linecap=\"round\"/></svg>"
    }
  ],
  "docs": "/docs/themes#studio-index",
  "meta": {
    "status": "stable",
    "copyright": "Coordiation",
    "framework": "Next.js App Router",
    "style": "minimal brand and product design portfolio",
    "palette": "white, ink and project-led colors",
    "namespace": "studio-index",
    "classPrefix": "si-",
    "preview": "/themes/studio-index/preview",
    "cover": "/themes/studio-index/root-table.jpg",
    "components": [
      "StudioHeader",
      "ProjectCard",
      "DetailLabel",
      "ThemeIcon"
    ],
    "sections": [
      "portfolio header",
      "introduction",
      "project index",
      "project metadata",
      "case-study hero",
      "project brief",
      "feature image",
      "concept",
      "visual system",
      "gallery",
      "outcome",
      "footer"
    ],
    "assets": [
      "/themes/studio-index/root-table.jpg",
      "/themes/studio-index/playroom.jpg",
      "/themes/studio-index/aperture.jpg",
      "/themes/studio-index/homebase.jpg",
      "/themes/studio-index/signal.jpg",
      "/themes/studio-index/sidecar.jpg",
      "/themes/studio-index/detail-food.jpg",
      "/themes/studio-index/detail-chef.jpg",
      "/themes/studio-index/detail-team.jpg",
      "/themes/studio-index/detail-work.jpg",
      "/themes/studio-index/detail-material.jpg",
      "/themes/studio-index/detail-mobile.jpg"
    ],
    "frameworkName": "Coordiation CSS",
    "sourceOwnership": "open-code"
  }
}
