Daymark

Live preview →

Daymark is a SaaS marketing theme built with Astro 7, Tailwind CSS 4, and TypeScript. Noto Serif headings, Geist body text, warm neutrals, and configurable accents give it a calm, editorial feel. Both fonts are self-hosted.

The theme price is $49, with $59 as the original price.

EmDash CMS edition

Daymark also has an EmDash CMS edition for teams that want to update the site without editing source files or rebuilding. It is a separate product priced at $69, with $79 as the compare-at price. There is no launch coupon. The current $199 All-Access product contains the static themes only.

The CMS edition keeps the same fixed Daymark layouts and visual system. Its admin manages 15 page entries, three starter blog posts, three changelog entries, four menus, General settings, and a media library. Page copy, links, pricing, repeaters, paired light/dark images, legal content, posts, releases, site identity, SEO defaults, and navigation are editable. All page entries share one schema whose labels identify the owning page; this is structured content editing rather than a page builder.

Editors can sign in at /_emdash/admin, preview the site, enable Edit, and click mapped content on the rendered page. Published blog posts and the sitemap update at request time, so adding a post does not require a new build. Drafts remain private to preview sessions. Content translations are created in the admin, while locale files contain only mechanical interface labels.

Local development uses SQLite and local uploads. Production uses Cloudflare Workers with D1, R2, and the SESSION KV namespace provisioned by the adapter. EmDash is pinned to version 0.36.0. The first setup imports 24 Daymark images into the buyer’s storage and therefore needs internet access.

Quick start for the CMS edition requires Node.js 22.16 or newer:

npm install
cp .env.example .env
npx emdash secrets generate
# Paste the first printed line into .env as EMDASH_ENCRYPTION_KEY=...
npm run setup
npm run dev

Then open http://localhost:4321/_emdash/admin. See the included CMS edition README for seed updates, translation, and Cloudflare deployment.

Included pages

The default build generates 19 static pages: Home, Features, Pricing, Customers, Resources, About, Team, Contact, Blog, three articles, a latest-article demo route, Changelog, Waitlist, Privacy, Terms, 404, and a section library. Sitemap and robots files are generated as well.

The homepage includes a product hero, logo cloud, solutions, features, benefits, process, workspaces, integrations, customer stories, testimonials, pricing, FAQ, and a closing CTA.

Edit content

src/config/site.ts contains website copy, navigation, links, image paths, legal text, form labels, accessibility labels, and brand settings. Components read it through getSiteConfig(Astro.url) so translated configuration and internal links stay consistent.

Blog articles live in src/content/blog/; release entries live in src/content/changelog/. Layout and typography remain in components and src/styles/global.css. Text inside generated images is part of the artwork, so changing it requires replacing the image.

Accents and appearance

The theme settings control the initial mode, visibility of the mode switch, and paired accent colors:

theme: {
  toggle: true,
  default: "light",
  storageKey: "daymark:theme",
  accent: "#f28e6e",          // dark mode accent
  accentText: "#201b18",      // text on the dark accent
  lightAccent: "#c74b2b",     // light mode accent
  lightAccentText: "#ffffff"  // text on the light accent
}

These feed --accent and --accent-text. Live buttons, badges, links, borders, and controls use the shared variables. Base surfaces and text colors are defined for both modes in src/styles/global.css.

previewAccentSwitcher.colors contains Persimmon, Sage, Blue, and Violet presets. Add your own paired colors there, or set previewAccentSwitcher.enabled to false to hide the floating control. Visitor choices persist; use Reset appearance when checking a new default.

Product imagery

The project includes 24 local WebP images. Product visuals have separate light and dark variants, rendered through a single ThemeImage.astro element whose source changes with the selected mode. Photography stays the same in both modes.

Each main product section has distinct artwork. ASSETS.md records the generation prompts. CSS accent changes affect the live UI; the images retain their baked-in persimmon colors. Replace the artwork if you want the pixels inside it to match a different brand color.

Blog and changelog

Write posts in src/content/blog/ with title, description, date, author, and category frontmatter. image is optional; draft: true excludes a post from lists and generated article routes.

blog.postsPerPage controls pagination. The default is nine posts per page. Pagination appears when the collection has more than one page; the newest article is featured on the first page. /blog/post/ is a latest-article demo alias, so avoid a post named post.md.

Releases in src/content/changelog/ use version, title, and date, with optional image, darkImage, and imageAlt fields. Their Markdown bodies appear on /changelog/ in reverse chronological order.

Forms

Set contactForm.provider to formspree, formsubmit, or netlify and supply the relevant account settings. The default opens an email draft using contactSection.email. Contact labels, placeholders, topics, and information cards live in contactSection.

Newsletter settings live in newsletter. Supported providers are Mailchimp, ConvertKit, and Buttondown; supply the provider’s form endpoint in actionUrl. Fields remain disabled until a provider and endpoint are configured.

Set waitlist.actionUrl to a signup endpoint. Without one, the page shows an email invitation link using waitlist.email and waitlist.emailSubject.

Languages

English is the complete source in site.ts. Copy src/i18n/locales/template.ts, translate the required values, and register the new locale in src/i18n/config.ts. Route mirrors under src/pages/[locale]/ generate translated pages, and internal links retain their locale prefix.

Locale overrides replace arrays in full, so include every item and required field when translating an array. Blog and release bodies stay shared unless you extend the collections and routes with per-language entries.

Legal text supports {siteName}, {contactEmail}, and {privacyLink} tokens, rendered safely as text or links.

Motion and reusable sections

Add reveal to a heading, card, or image wrapper for a one-time fade-up on scroll. data-delay="1" through "6" staggers related items. Avoid nested reveal wrappers and wrappers around entire long pages.

The animation uses IntersectionObserver with 14px movement and a 0.9-second transition. Content remains visible with reduced motion, without JavaScript, and when printing.

/sections/ is a noindex development showcase containing additional layouts, including tabs, a gallery lightbox, carousel, comparison table, timeline, app links, location card, and documentation sidebar.

Working with agents

AGENTS.md and CLAUDE.md describe the configuration, design conventions, theme-aware images, localization, forms, and validation commands. README.md covers installation and customization, and ASSETS.md documents the generated imagery.

Run pnpm check and pnpm build after changes. Check affected routes at desktop and phone widths in both modes before deploying.