Okami

Live preview ->

Okami is a complete website for creative agencies, product studios and SaaS businesses. The demo is a design and product studio that works with SaaS teams, and the same structure works for a software company presenting its own product. The homepage opens on a split hero: a centred headline on the left and full-height botanical artwork on the right.

The Why Choose Us section holds three small working interfaces: a launch board with an Organize button, a brand card whose colour swatches change its accent, and a product dashboard with tabs. Case studies sit on a dark background, and four solution pages, an about page, testimonials, an FAQ and an optional journal complete the site.

Property	Value
Tier	Pro ($59)
Category	Agency / SaaS
Font	Manrope Variable (self-hosted)
Palette	Deep red (#a71926), dark teal (#10363a) and coral (#d16e61) on white
Motion	Lightweight scroll reveals and a looping partner band, no animation library
Collections	services, projects, blog
Configuration	Everything visible lives in src/config/site.ts

Included routes

• / - homepage with split hero, partner band, about statement, stats, solutions, three interactive cards, selected work, testimonials, journal preview, FAQ, and closing call to action
• /services/ and /services/[slug]/ - solutions overview and four generated solution pages
• /work/ and /work/[slug]/ - work index and two generated case studies
• /blog/, /blog/page/[n]/, and /blog/[slug]/ - paginated journal and three generated articles
• /about/, /contact/
• /privacy/, /terms/, /404.html
• Generated sitemap output

The production build generates 19 static pages, including the custom 404.

What makes Okami different

• Working product cards - the launch board reorganises when you press Organize, the brand card’s swatches change its accent colour, and the dashboard’s tabs switch with a click or the arrow keys.
• A photo instead, when you want one - each of the three cards can show your own image by changing its visual setting.
• One layout for an agency or a SaaS business - use Solutions as services and Work as case studies, or rename them to product capabilities and customer stories.
• Every visible edit in one file - copy, palette, business details, testimonials, FAQs, legal placeholders and form settings are in site.ts, and any solution, case study or article can be overridden there too.
• Original imagery - three images made for this theme, stored locally with no remote image dependency.

Okami-specific setup

Change the identity and palette

Start in src/config/site.ts. identity holds the name, legal name, URL, language, theme colour and favicon. appearance holds the palette:

appearance: {
  ink: "#111111",
  muted: "#777777",
  paper: "#ffffff",
  soft: "#f6f6f6",
  line: "#ededed",
  red: "#a71926",
  teal: "#10363a",
  coral: "#d16e61",
},
motion: { enabled: true, duration: 560, distance: 16 },

motion turns the scroll reveals and the partner band on or off and sets the reveal duration and distance. Both stay still for visitors who prefer reduced motion. business holds the email, phone, address, hours and the structured-data type (ProfessionalService by default).

Edit the homepage

The homepage blocks in site.ts are hero (including the partner names), about (the statement and the four stats), services, why, work, reviews, journal, faq and homeCta. Each owns its headings, copy, images, alt text and links. The About page reads about and process.

Swap an interactive card for an image

Each entry in why.items chooses its visual. Keep the built-in card with { type: "interactive" }, or show a local image:

visual: {
  type: "image",
  src: "/images/your-visual.webp",
  alt: "Literal description of what the image shows",
  objectPosition: "center 40%",
  fit: "cover", // or "contain"
},

The three cards are independent, so you can replace one and keep the other two.

Add or edit solutions, case studies, and articles

Content lives in three collections:

• src/content/services/ - each solution generates /services/[slug]/
• src/content/projects/ - each case study generates /work/[slug]/
• src/content/blog/ - each article generates /blog/[slug]/

Every shipped entry is also mirrored in siteConfig.content.overrides, so you can edit all of it from site.ts. data replaces selected frontmatter fields and body replaces the Markdown body:

content: {
  overrides: {
    projects: {
      aera: {
        data: { title: "New project title" },
        body: "## New case study\n\nStandard Markdown works here.",
      },
    },
  },
},

To add an entry, create its Markdown file first, then add the same slug to the matching override map. To remove one, delete both. Every listing, detail page, homepage preview and footer reference uses the resolved values.

If you rename a solution, keep its option in contact.services the same words. Each solution page links to the contact form with its title, and the form preselects the option that matches, ignoring case.

Set up the journal

The journal is on by default with two articles per page, so the three included posts demonstrate /blog/ and /blog/page/2/. Change journal.pagination.pageSize and the pagination labels in site.ts, or set journal.enabled to false to remove the journal’s navigation and routes.

Connect the contact form

Okami starts in safe demo mode and sends no data. siteConfig.contact.form.provider accepts:

• formspree
• formsubmit
• netlify
• custom
• demo

Add the matching ID, email or endpoint in the same block. Demo mode and incomplete settings make no request and say so clearly on the page. Test delivery on your own deployment with an inbox you control.

Localization

Okami is i18n-ready. English stays the complete source in src/config/site.ts; register another language in src/i18n/config.ts with an override that only holds the translated keys. Every page and content detail has a mirrored route, internal links receive the language prefix, and untranslated keys fall back to English. Arrays such as why.items are replaced as a whole, so translate the complete array. Put translated solution, case study and article text in that language’s content.overrides map. Leave journal.dateLocale blank to derive it from the language.

Step by step, with the checklist: Add a language.

Agent-ready

The theme ships an AGENTS.md at its root, plus a CLAUDE.md that points at it. Claude Code, Cursor, Copilot and Codex read these on open, so an agent starts with the file map: what site.ts owns, how content overrides mirror every entry, how the interactive cards switch to images, which routes must stay mirrored, and the rule that the contact form stays in honest demo mode until a provider is set.

HTML edition

Okami is also available as a plain HTML template: the same design as ready-made HTML, CSS and JavaScript files that open straight from disk, with no build step. The three interactive cards still work, the solution pages still preselect the contact form, and the README explains where the palette lives and how to connect the form.