{ "$schema": "/schemas/registry-item.json", "name": "spectrum-studio", "type": "registry:page", "title": "Spectrum Studio", "description": "A high-energy independent creative studio theme for brand, product, web, and motion work.", "categories": [ "agency", "creative", "portfolio" ], "dependencies": [], "registryDependencies": [ "button", "card", "carousel" ], "files": [ { "path": "site/app/themes/spectrum-studio/preview/page.tsx", "type": "registry:page", "target": "app/spectrum-studio/page.tsx", "content": "import type { Metadata } from \"next\";\nimport SpectrumExperience from \"./SpectrumExperience\";\nimport \"./spectrum-studio.css\";\n\nexport const metadata: Metadata = {\n title: \"Spectrum Studio — Independent Creative Studio\",\n description: \"A high-energy creative studio theme for brand, product, web, and motion work, built with Coordiation.\",\n};\n\nexport default function SpectrumStudioPreview() {\n return ;\n}\n" }, { "path": "site/app/themes/spectrum-studio/preview/work/[slug]/page.tsx", "type": "registry:page", "target": "app/spectrum-studio/work/[slug]/page.tsx", "content": "import type { Metadata } from \"next\";\nimport { notFound } from \"next/navigation\";\nimport CaseVisual from \"../../CaseVisual\";\nimport ThemeIcon from \"../../ThemeIcon\";\nimport { getSpectrumProject, spectrumProjects } from \"../../projects\";\nimport \"../../spectrum-studio.css\";\n\nexport function generateStaticParams() {\n return spectrumProjects.map(({ slug }) => ({ slug }));\n}\n\nexport async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise {\n const { slug } = await params;\n const project = getSpectrumProject(slug);\n if (!project) return { title: \"Project not found\" };\n return { title: `${project.title} — Spectrum Studio`, description: project.summary, openGraph: { title: `${project.title} — Spectrum Studio`, description: project.summary, images: [project.image] }, twitter: { card: \"summary_large_image\", title: `${project.title} — Spectrum Studio`, description: project.summary, images: [project.image] } };\n}\n\nexport default async function SpectrumProjectDetail({ params }: { params: Promise<{ slug: string }> }) {\n const { slug } = await params;\n const project = getSpectrumProject(slug);\n if (!project) notFound();\n const index = spectrumProjects.findIndex((item) => item.slug === project.slug);\n const next = spectrumProjects[(index + 1) % spectrumProjects.length];\n\n return
\n
SPECTRUM*
\n

01 / Selected project

{project.number}

{project.title}

Client{project.client}
Year{project.year}
Scope{project.scope}
\n

02 / The assignment

{project.discipline}

{project.summary}

{project.context}

{project.approach}

\n

03 / The system

ONE SIGNAL.
ENDLESS RANGE.

\"\"
MOVE YOUR POINT OF VIEW

形に意味を与える

{project.system}

\n

04 / The outcome

Built to stay clear
while everything moves.

{project.results.map(([title,copy],resultIndex)=>
{String(resultIndex+1).padStart(2,\"0\")}

{title}

{copy}

)}
\n
{`${project.title}
{`${project.title}
\n

05 / Continue exploring

Next project{next.title}
\n \n
;\n}\n" }, { "path": "site/app/themes/spectrum-studio/preview/projects.ts", "type": "registry:file", "target": "app/spectrum-studio/projects.ts", "content": "export type SpectrumProject = {\n slug: string;\n title: string;\n client: string;\n year: string;\n number: string;\n scope: string;\n discipline: string;\n image: string;\n alt: string;\n summary: string;\n context: string;\n approach: string;\n system: string;\n results: readonly (readonly [string, string])[];\n};\n\nexport const spectrumProjects: readonly SpectrumProject[] = [\n {\n slug: \"chromatic-ritual\", title: \"Chromatic Ritual\", client: \"Astra\", year: \"2026\", number: \"01 — 06\", scope: \"Brand system · Campaign\", discipline: \"Identity / Art direction\", image: \"/themes/spectrum-studio/project-01.jpg\", alt: \"Iridescent glass forms against a teal background\",\n summary: \"A visual identity designed to move between culture, product, and space without losing its signal.\",\n context: \"Astra was growing beyond a single product. The brand needed a recognisable language that could connect launches, collaborations, and live experiences.\",\n approach: \"We built a flexible system around refracted light, lucid surfaces, and controlled repetition—giving every expression a shared rhythm while leaving room for surprise.\",\n system: \"The identity behaves like light through glass: one source becoming many expressions. Typography stays direct while colour, crop, and motion create a different ritual at every scale.\",\n results: [[\"Recognition\", \"A distinctive visual signature across every touchpoint.\"], [\"Flexibility\", \"A modular system that scales without becoming predictable.\"], [\"Momentum\", \"A launch language designed for continuous evolution.\"]],\n },\n {\n slug: \"motion-engineered\", title: \"Motion, Engineered\", client: \"Vektor\", year: \"2026\", number: \"02 — 06\", scope: \"Digital · Motion · Launch\", discipline: \"Experience / Motion\", image: \"/themes/spectrum-studio/project-02.jpg\", alt: \"Colorful neon illustrations covering a city facade at night\",\n summary: \"A launch experience that turns an engineered product story into an electric public signal.\",\n context: \"Vektor needed to introduce a new platform without sounding like every other technology launch. The experience had to feel precise and alive at once.\",\n approach: \"We translated technical performance into a kinetic language of illuminated lines, directional type, and responsive sequences that accelerate with attention.\",\n system: \"Every touchpoint follows one motion principle: energy travels, gathers, and releases. The result connects campaign film, product UI, web, and city-scale media as one continuous event.\",\n results: [[\"Clarity\", \"Complex performance translated into a simple visual story.\"], [\"Energy\", \"A motion language recognisable in less than a second.\"], [\"Launch\", \"One system connecting screens, spaces, and social media.\"]],\n },\n {\n slug: \"nothing-static\", title: \"Nothing Static\", client: \"Kinetik\", year: \"2025\", number: \"03 — 06\", scope: \"Strategy · Identity · Product\", discipline: \"Brand / Product\", image: \"/themes/spectrum-studio/project-03.jpg\", alt: \"Abstract chrome structure with iridescent edges\",\n summary: \"A product brand shaped around continuous change, without sacrificing precision or trust.\",\n context: \"Kinetik operates in a category built on speed, but its old identity felt fixed. The challenge was to create movement without relying on familiar performance clichés.\",\n approach: \"We used tension, reflection, and shifting geometry to make change visible. A restrained base system keeps the brand credible while chromatic edges reveal its energy.\",\n system: \"The visual language never presents a fully closed form. Frames bend, surfaces respond, and layouts create implied direction—making even still applications feel ready to move.\",\n results: [[\"Precision\", \"A sharper system for product and commercial teams.\"], [\"Distinction\", \"A category-defying look built from proprietary behaviours.\"], [\"Scale\", \"Shared rules across product, brand, and partner channels.\"]],\n },\n {\n slug: \"form-after-dark\", title: \"Form After Dark\", client: \"Noir Lab\", year: \"2025\", number: \"04 — 06\", scope: \"Identity · Environment\", discipline: \"Culture / Spatial\", image: \"/themes/spectrum-studio/project-04.jpg\", alt: \"Neon-lit skyscrapers rising into the night fog\",\n summary: \"An identity for nocturnal culture that uses darkness as material rather than background.\",\n context: \"Noir Lab needed to connect a programme of music, architecture, and late-night events under one name without flattening their individual character.\",\n approach: \"We designed for low light first: luminous typography, atmospheric gradients, and structures that emerge gradually instead of demanding attention all at once.\",\n system: \"Contrast controls the experience. Dense black fields create pause; electric cyan and magenta mark moments of discovery across posters, tickets, screens, and spaces.\",\n results: [[\"Atmosphere\", \"A brand recognised as much by mood as by its mark.\"], [\"Coherence\", \"One visual structure for a diverse cultural programme.\"], [\"Presence\", \"A system engineered to perform in physical space.\"]],\n },\n {\n slug: \"human-interface\", title: \"Human Interface\", client: \"Synapse\", year: \"2026\", number: \"05 — 06\", scope: \"Product · Design system\", discipline: \"UX / Interface\", image: \"/themes/spectrum-studio/project-05.jpg\", alt: \"Rainbow skylight casting color across concrete architecture\",\n summary: \"A digital system that makes advanced technology feel calm, legible, and unmistakably human.\",\n context: \"Synapse had powerful technology and a fragmented experience. Users needed a clearer sense of place, progress, and control across an expanding platform.\",\n approach: \"We created an interface architecture based on natural light: information appears in layers, colour signals context, and motion explains what changed and why.\",\n system: \"A shared component language connects product and brand. Strong structural grids carry complex information, while spectral accents guide the eye without becoming decoration.\",\n results: [[\"Orientation\", \"Clearer journeys through complex product workflows.\"], [\"Consistency\", \"A shared component system across every team.\"], [\"Confidence\", \"A calmer experience for high-stakes decisions.\"]],\n },\n {\n slug: \"secret-language\", title: \"Secret Language\", client: \"Orphic\", year: \"2025\", number: \"06 — 06\", scope: \"Brand · Editorial · Digital\", discipline: \"Editorial / Culture\", image: \"/themes/spectrum-studio/project-06.jpg\", alt: \"Iridescent light refracting through textured glass\",\n summary: \"An editorial identity that rewards curiosity and turns ambiguity into a reason to look closer.\",\n context: \"Orphic curates emerging ideas across art and technology. It needed a system that could hold strong voices together without explaining away their mystery.\",\n approach: \"We paired rigorous typography with translucent layers and coded details. The surface stays quiet from a distance and becomes richer as the audience moves closer.\",\n system: \"Information is organised in visible and hidden layers. Texture distorts the expected reading order, while a disciplined grid ensures the experience never loses clarity.\",\n results: [[\"Curiosity\", \"A visual language that invites deeper attention.\"], [\"Voice\", \"Editorial tools that amplify different contributors.\"], [\"Continuity\", \"A system connecting print, web, and exhibitions.\"]],\n },\n] as const;\n\nexport function getSpectrumProject(slug: string) {\n return spectrumProjects.find((project) => project.slug === slug);\n}\n" }, { "path": "site/app/themes/spectrum-studio/preview/CaseVisual.tsx", "type": "registry:component", "target": "app/spectrum-studio/CaseVisual.tsx", "content": "\"use client\";\n\nimport { useRef, type PointerEvent } from \"react\";\n\nexport default function CaseVisual({ image, alt }: { image: string; alt: string }) {\n const visualRef = useRef(null);\n\n const move = (event: PointerEvent) => {\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n const rect = event.currentTarget.getBoundingClientRect();\n const x = (event.clientX - rect.left) / rect.width - 0.5;\n const y = (event.clientY - rect.top) / rect.height - 0.5;\n visualRef.current?.style.setProperty(\"--sp-case-x\", `${((x + 0.5) * 100).toFixed(1)}%`);\n visualRef.current?.style.setProperty(\"--sp-case-y\", `${((y + 0.5) * 100).toFixed(1)}%`);\n visualRef.current?.style.setProperty(\"--sp-case-tx\", `${(x * -8).toFixed(1)}px`);\n visualRef.current?.style.setProperty(\"--sp-case-ty\", `${(y * -5).toFixed(1)}px`);\n };\n\n return
visualRef.current?.removeAttribute(\"style\")}>\n {alt}\n \"\"\n \"\"\n
\n Spectrum Studio / Case Study\n
;\n}\n" }, { "path": "site/app/themes/spectrum-studio/preview/studio/[slug]/page.tsx", "type": "registry:page", "target": "app/spectrum-studio/studio/[slug]/page.tsx", "content": "import type { Metadata } from \"next\";\nimport { notFound } from \"next/navigation\";\nimport PortraitVisual from \"../../PortraitVisual\";\nimport ThemeIcon from \"../../ThemeIcon\";\nimport { getSpectrumPerson, spectrumPeople } from \"../../people\";\nimport \"../../spectrum-studio.css\";\n\nexport function generateStaticParams() {\n return spectrumPeople.map(({ slug }) => ({ slug }));\n}\n\nexport async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise {\n const { slug } = await params;\n const person = getSpectrumPerson(slug);\n if (!person) return { title: \"Profile not found\" };\n const name = `${person.first} ${person.last}`;\n return { title: `${name} — Spectrum Studio`, description: person.intro, openGraph: { title: `${name} — Spectrum Studio`, description: person.intro, images: [person.image] }, twitter: { card: \"summary_large_image\", title: `${name} — Spectrum Studio`, description: person.intro, images: [person.image] } };\n}\n\nexport default async function SpectrumProfile({ params }: { params: Promise<{ slug: string }> }) {\n const { slug } = await params;\n const person = getSpectrumPerson(slug);\n if (!person) notFound();\n const index = spectrumPeople.findIndex((item) => item.slug === person.slug);\n const next = spectrumPeople[(index + 1) % spectrumPeople.length];\n const name = `${person.first} ${person.last}`;\n\n return
\n
SPECTRUM*
\n

01 / The studio

{person.number}

{person.first}{person.last}

Role{person.role}

{person.intro}

\n

02 / Perspective

形に意味を与える

{person.statement}

{person.bio[0]}

{person.bio[1]}

\n

03 / Point of view

“{person.quote}”

— {name}, Spectrum Studio

\n

04 / Areas of focus

Where perspective
becomes practice.

{person.focus.map((focus,focusIndex)=>
{String(focusIndex+1).padStart(2,\"0\")}

{focus}

)}
\n

05 / Selected work

Work shaped
with {person.first}.

{person.work.map((project)=>
{project.alt}

{project.title}{project.client}

)}
\n

06 / Meet the studio

Next person{next.first} {next.last}
\n \n
;\n}\n" }, { "path": "site/app/themes/spectrum-studio/preview/people.ts", "type": "registry:file", "target": "app/spectrum-studio/people.ts", "content": "export type SpectrumPerson = {\n slug: string;\n first: string;\n last: string;\n number: string;\n role: string;\n image: string;\n intro: string;\n statement: string;\n bio: readonly [string, string];\n quote: string;\n focus: readonly string[];\n work: readonly { slug: string; title: string; client: string; image: string; alt: string }[];\n};\n\nexport const spectrumPeople: readonly SpectrumPerson[] = [\n {\n slug: \"arka-wijaya\", first: \"Arka\", last: \"Wijaya\", number: \"01 — 03\", role: \"Founder / Creative Direction\", image: \"/themes/spectrum-studio/person-01.avif\",\n intro: \"Building identities that stay clear as brands, products, and culture move around them.\",\n statement: \"Clarity is not the absence of character. It is what allows character to travel.\",\n bio: [\"Arka founded Spectrum to keep strategy, design, and making in the same room. He believes the best creative direction begins by identifying the one idea a team can return to when everything else changes.\", \"His practice connects identity and experience, helping organisations turn complex ambitions into systems people can actually use—from a first positioning decision to the final detail in motion.\"],\n quote: \"The strongest work does not ask for attention. It gives attention somewhere useful to go.\",\n focus: [\"Creative Direction\", \"Brand Architecture\", \"Editorial Design\", \"Studio Leadership\"],\n work: [{ slug: \"chromatic-ritual\", title: \"Chromatic Ritual\", client: \"Astra — 2026\", image: \"/themes/spectrum-studio/project-01.jpg\", alt: \"Iridescent glass forms against a teal background\" }, { slug: \"form-after-dark\", title: \"Form After Dark\", client: \"Noir Lab — 2025\", image: \"/themes/spectrum-studio/project-04.jpg\", alt: \"Neon-lit skyscrapers rising into the night fog\" }],\n },\n {\n slug: \"maya-adelia\", first: \"Maya\", last: \"Adelia\", number: \"02 — 03\", role: \"Strategy / Brand Systems\", image: \"/themes/spectrum-studio/person-02.avif\",\n intro: \"Finding the simple decision that helps ambitious organisations move with confidence.\",\n statement: \"Strategy matters when it changes what a team can see, choose, and make together.\",\n bio: [\"Maya leads strategy and brand systems at Spectrum. Her work begins inside the organisation—listening for the tension between what a business says, what it makes, and what people actually experience.\", \"She turns research into practical direction, shaping positioning, architecture, and decision tools that keep creative work coherent long after the first launch.\"],\n quote: \"A useful strategy should reduce noise without reducing possibility.\",\n focus: [\"Brand Strategy\", \"Positioning\", \"Portfolio Systems\", \"Research & Insight\"],\n work: [{ slug: \"human-interface\", title: \"Human Interface\", client: \"Synapse — 2026\", image: \"/themes/spectrum-studio/project-05.jpg\", alt: \"Rainbow skylight casting color across concrete architecture\" }, { slug: \"secret-language\", title: \"Secret Language\", client: \"Orphic — 2025\", image: \"/themes/spectrum-studio/project-06.jpg\", alt: \"Iridescent light refracting through textured glass\" }],\n },\n {\n slug: \"keiko-tan\", first: \"Keiko\", last: \"Tan\", number: \"03 — 03\", role: \"Design / Motion\", image: \"/themes/spectrum-studio/person-03.avif\",\n intro: \"Designing movement that reveals meaning, rhythm, and personality instead of adding noise.\",\n statement: \"Motion is not what happens after design. It is how a system explains itself over time.\",\n bio: [\"Keiko leads design and motion across Spectrum’s identity and digital work. She moves fluently between typography, interface, and animation, treating each as part of the same behaviour.\", \"Her process combines precise systems with expressive prototyping, allowing teams to understand not only how a design looks, but how it responds and feels in use.\"],\n quote: \"When movement has a reason, people understand the system before they notice the animation.\",\n focus: [\"Design Systems\", \"Motion Language\", \"Interaction Design\", \"Creative Prototyping\"],\n work: [{ slug: \"motion-engineered\", title: \"Motion, Engineered\", client: \"Vektor — 2026\", image: \"/themes/spectrum-studio/project-02.jpg\", alt: \"Colorful neon illustrations covering a city facade at night\" }, { slug: \"nothing-static\", title: \"Nothing Static\", client: \"Kinetik — 2025\", image: \"/themes/spectrum-studio/project-03.jpg\", alt: \"Abstract chrome structure with iridescent edges\" }],\n },\n] as const;\n\nexport function getSpectrumPerson(slug: string) {\n return spectrumPeople.find((person) => person.slug === slug);\n}\n" }, { "path": "site/app/themes/spectrum-studio/preview/PortraitVisual.tsx", "type": "registry:component", "target": "app/spectrum-studio/PortraitVisual.tsx", "content": "\"use client\";\n\nimport { useRef, type PointerEvent } from \"react\";\n\nexport default function PortraitVisual({ image, name }: { image: string; name: string }) {\n const frameRef = useRef(null);\n\n const move = (event: PointerEvent) => {\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n const rect = event.currentTarget.getBoundingClientRect();\n const x = (event.clientX - rect.left) / rect.width - 0.5;\n const y = (event.clientY - rect.top) / rect.height - 0.5;\n frameRef.current?.style.setProperty(\"--sp-portrait-x\", `${((x + 0.5) * 100).toFixed(1)}%`);\n frameRef.current?.style.setProperty(\"--sp-portrait-y\", `${((y + 0.5) * 100).toFixed(1)}%`);\n frameRef.current?.style.setProperty(\"--sp-portrait-tx\", `${(x * -13).toFixed(1)}px`);\n frameRef.current?.style.setProperty(\"--sp-portrait-ty\", `${(y * -9).toFixed(1)}px`);\n };\n\n return
frameRef.current?.removeAttribute(\"style\")}>{`Portrait
Spectrum Studio / Jakarta
;\n}\n" }, { "path": "site/app/themes/spectrum-studio/preview/start-project/page.tsx", "type": "registry:page", "target": "app/spectrum-studio/start-project/page.tsx", "content": "import type { Metadata } from \"next\";\nimport ThemeIcon from \"../ThemeIcon\";\nimport ProjectBriefForm from \"./ProjectBriefForm\";\nimport \"../spectrum-studio.css\";\n\nexport const metadata: Metadata = { title: \"Start a Project — Spectrum Studio\", description: \"Tell Spectrum what you are building, changing, or launching.\" };\n\nexport default function SpectrumStartProject() {\n return
\n
SPECTRUM*
\n

New business / 2026

Accepting selected projects

START SOMETHINGTHAT MATTERS.

Tell us what you are building, changing, or launching. A clear starting point helps us make the first conversation useful.

Begin the brief
\n

01 / Project brief

A few useful details.
Nothing unnecessary.

\n

Prefer a direct conversation?

hello@spectrum.studio
Jakarta · IndonesiaWorking worldwide
\n \n
;\n}\n" }, { "path": "site/app/themes/spectrum-studio/preview/start-project/ProjectBriefForm.tsx", "type": "registry:component", "target": "app/spectrum-studio/start-project/ProjectBriefForm.tsx", "content": "\"use client\";\n\nimport { useState, type FormEvent } from \"react\";\nimport ThemeIcon from \"../ThemeIcon\";\n\nconst services = [\"Brand strategy\", \"Visual identity\", \"Product design\", \"Website\", \"Motion system\", \"Not sure yet\"];\nconst budgets = [\"$10k–25k\", \"$25k–50k\", \"$50k–100k\", \"$100k+\", \"Let’s discuss\"];\n\nexport default function ProjectBriefForm() {\n const [count, setCount] = useState(0);\n const [success, setSuccess] = useState<{ name: string; mailto: string } | null>(null);\n\n const submit = (event: FormEvent) => {\n event.preventDefault();\n const form = event.currentTarget;\n if (!form.reportValidity()) return;\n const data = new FormData(form);\n const name = String(data.get(\"name\") ?? \"\").trim();\n const selectedServices = data.getAll(\"service\");\n const body = [\"Hello Spectrum,\", \"\", `My name is ${name}. I would like to discuss a new project.`, \"\", `Company: ${data.get(\"company\") || \"—\"}`, `Website: ${data.get(\"website\") || \"—\"}`, `Email: ${data.get(\"email\") || \"—\"}`, `Services: ${selectedServices.length ? selectedServices.join(\", \") : \"Open to discussion\"}`, `Budget: ${data.get(\"budget\") || \"—\"}`, `Ideal start: ${data.get(\"timeline\") || \"—\"}`, `How I found Spectrum: ${data.get(\"source\") || \"—\"}`, \"\", \"Project context:\", String(data.get(\"details\") || \"\")].join(\"\\n\");\n setSuccess({ name, mailto: `mailto:hello@spectrum.studio?subject=${encodeURIComponent(`New project enquiry — ${data.get(\"company\") || name}`)}&body=${encodeURIComponent(body)}` });\n requestAnimationFrame(() => document.querySelector(\".sp-form-success\")?.focus({ preventScroll: false }));\n };\n\n if (success) return

Brief prepared

THANK YOU,
{success.name.toUpperCase()}, WE'RE READY.

Your project brief is ready to send. Continue by email so it reaches the Spectrum team directly.

Continue by email
;\n\n return
\n
01About you
\n
02What do you need?
{services.map((service)=>)}
\n
03Shape of the project

Indicative budget *

{budgets.map((budget,index)=>)}
\n
04The useful context