Develi is a complete studio and agency website for design shops, development consultancies, and any team whose own site is the first thing a prospect judges them on. It ships 12 designed pages that build to 29 from the sample content, three content collections, and a three-layer token system you can rebrand by editing one block of CSS.
Built to win studio work
- The work section is a content collection, not a gallery. Each case study carries "The challenge" and "The approach" as labelled frontmatter rows that render as a left rail beside the prose
- Three surfaces read the same six entries: the /work/ index, each detail page, and the home page's case-study band. Add a seventh case and all three update
- A tabbed services rail over six services whose labels and routes live in one config array, with the footer's Services column derived from it so the two cannot drift apart
- Paginated MDX blog with category routes, RSS, and author profiles the build resolves. The sample content is 8 posts across 5 categories and 4 authors, not a stub
Everything is source you own
- 46 UI primitives, each a folder with a tailwind-variants recipe: dialog, dropdown, mega-menu, combobox, tabs, table, carousel, accordion, tooltip and popover, plus the quiet ones most kits skip like pagination windows, password strength, count-up and marquee
- 51 production section components across 9 page groups, and 7 content-aware cards
- 572 icons behind a typed <Icon> component, inlined into HTML at build time. A typo fails astro check instead of rendering a blank box, and not one byte of the set reaches client JavaScript
- No UI kit, no animation package, no SEO plugin, and no React, Preact, Vue or Svelte runtime
Accessible and fast by default
- 37 KB of JavaScript for the entire site, dropping to 26 KB once the dev-only catalog is deleted, 16 KB of it the optional view-transitions router
- Dark mode ships server-rendered as class="dark" on the <html> element, so it holds with JavaScript disabled and there is no frame where the wrong theme paints
- 87 animation utilities ported dependency-free, with scroll-driven reveals built on native CSS view() timelines
- A global prefers-reduced-motion guard that uses near-zero durations rather than none, so animationend listeners still fire, plus one flag that turns the decorative layer off site-wide
- Landmarks, a skip link to a focusable <main>, labelled navs and visible focus rings
SEO ready
Generated sitemap, RSS feed, robots.txt, and llms.txt for AI crawlers, every meta and Open Graph tag emitted natively, and typed JSON-LD builders with stable @id values so Organization, WebSite, Article and BreadcrumbList cross-reference inside one @graph. One canonical URL shape throughout, and a production build refuses to run while SITE_URL is still the placeholder, so a placeholder domain cannot poison canonical, OG, JSON-LD, the sitemap and robots.txt at once.
Astro 7, Tailwind CSS v4 CSS-first, TypeScript 6 in strict mode, three Zod-validated content collections, and 11 assert-based self-checks that run on Node's own type stripping with no test framework. Cloudflare Workers Static Assets config ships and is documented; delete one file and one devDependency to host elsewhere. AGENTS.md, CLAUDE.md, five coding-rule files and a bundled subsystem wiki ship at the root, so Claude Code or Cursor extends the template along its own conventions.
