Portfolios · React
Brand design studio
Bold dark site for an independent brand and identity studio, with case work, services and team.
What you get
A confident dark site for a small brand design studio: selected identity projects, services, how an engagement runs, the team, client notes and a new-business form. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
src/site.ts
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = { "brand": "Fieldwork Studio", "nav": [ { "label": "Work", "href": "#work" }, { "label": "Services", "href": "#services" }, { "label": "Studio", "href": "#studio" } ], "navCta": { "label": "New business", "href": "#contact" }, "sections": [ { "kind": "hero", "variant": "center", "eyebrow": "Independent brand studio · Melbourne", "title": "Identities for companies that make real things.", "text": "We're six designers and a writer working with food producers, makers and small manufacturers. Names, logos, packaging and the guidelines that keep it all together after we leave.", "primary": { "label": "See our work", "href": "#work" }, "secondary": { "label": "Start a project", "href": "#contact" }, "visual": { "type": "tiles", "tones": [ "#c2410c", "#3a2a22", "#a16207", "#1c1410" ], "caption": "Saltbush Dairy, packaging system, 2026" } }, { "kind": "projects", "id": "work", "eyebrow": "Selected work", "title": "Recent identities", "items": [ { "title": "Saltbush Dairy", "tag": "Name, identity and packaging for 14 cheeses", "year": "2026", "tone": "#9a3412" }, { "title": "Ironbark Cycles", "tag": "Identity and frame decals for a bike builder", "year": "2025", "tone": "#292524" }, { "title": "Low Tide Seafood", "tag": "Rebrand and fish-market signage", "year": "2025", "tone": "#134e4a" }, { "title": "Common Ground Coffee", "tag": "Identity, bags and café interior graphics", "year": "2024", "tone": "#78350f" } ] }, { "kind": "features", "id": "services", "eyebrow": "Services", "title": "What we do", "columns": 4, "items": [ { "title": "Naming", "text": "Names that are easy to say, spell and trademark.", "icon": "book" }, { "title": "Identity", "text": "Logo, type, colour and the rules for using them.", "icon": "star" }, { "title": "Packaging", "text": "Structures and labels that survive real shelves.", "icon": "box" }, { "title": "Guidelines", "text": "Practical brand books your team will actually open.", "icon": "globe" } ] }, { "kind": "steps", "eyebrow": "How we work", "title": "A typical engagement", "items": [ { "title": "Two weeks of listening", "text": "Interviews with founders, staff and customers, plus a day on the floor wherever you make things." }, { "title": "Six weeks of design", "text": "Three directions, one chosen, then refined with you in weekly sessions. No big reveal." }, { "title": "Rollout and handover", "text": "Files, templates and a guidelines book, plus three months of support while you launch." } ] }, { "kind": "team", "id": "studio", "eyebrow": "Studio", "title": "The people you'll work with", "items": [ { "name": "Leah Morton", "role": "Founder, creative director", "tone": "#9a3412" }, { "name": "Kai Tanaka", "role": "Design director", "tone": "#44403c" }, { "name": "Ruby Chen", "role": "Packaging designer", "tone": "#78350f" }, { "name": "Sam Okoro", "role": "Writer, naming", "tone": "#3f3f46" } ] }, { "kind": "quotes", "eyebrow": "Clients", "title": "What clients say", "items": [ { "quote": "They spent a full day in the cheese room before drawing anything. You can tell.", "name": "Anna B.", "role": "Founder, Saltbush Dairy" }, { "quote": "Our decals finally look as good as the frames. Customers ask for the stickers.", "name": "Tom W.", "role": "Owner, Ironbark Cycles" }, { "quote": "Clear fees, weekly check-ins and no jargon. We'd hire them again tomorrow.", "name": "Marcus L.", "role": "Director, Low Tide Seafood" } ] }, { "kind": "cta", "title": "Taking on projects from February 2027", "text": "Identity projects typically run 10–12 weeks and start from AU$28,000.", "primary": { "label": "Tell us about it", "href": "#contact" }, "secondary": { "label": "See more work", "href": "#work" } }, { "kind": "contact", "eyebrow": "New business", "title": "Start a project", "text": "A few lines about your company, what you need and when you'd like to launch. Leah replies to every enquiry personally.", "fields": [ "name", "email", "company", "message" ], "button": "Send enquiry" } ], "footer": { "text": "Fieldwork Studio. Brand identity and packaging, Melbourne.", "columns": [ { "title": "Studio", "links": [ "48 Smith Street, Collingwood", "hello@fieldwork.studio" ] }, { "title": "Follow", "links": [ "Instagram", "LinkedIn", "Newsletter" ] } ], "legal": "© Fieldwork Studio. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Brand design studio's files. The box is already started for you: finish “Start from Brand design studio and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
Product designer
Case-study portfolio for a product designer, with process, experience timeline and references.
3D & motion designer
High-contrast dark portfolio for a 3D and motion designer, with reels, projects, rates and process.
Architecture practice
Minimal, square-cornered portfolio for a small architecture practice with projects and process.
Build on Brand design studio
Create a free account, start from this template, and ask the AI agent to turn it into your app.