Your next site starts here.

1/* src/styles/tokens/colors.css */
2:root {
3  /* Brand Scale - International Orange */
4  --brand-500: oklch(62.5% 0.22 38);
5  --brand-600: oklch(53.2% 0.19 38);
6 
7  /* Semantic Tokens - Light Mode */
8  --background: var(--gray-0);
9  --foreground: var(--gray-900);
10  --border: var(--gray-200);
11  --primary: var(--gray-900);
12  --accent: var(--brand-500);
13}
14 
15/* Dark Mode */
16.dark {
17  --background: var(--gray-950);
18  --foreground: var(--gray-50);
19  --border: var(--gray-800);
20  --primary: var(--gray-0);
21}

1---
2// src/components/seo/SEO.astro
3import { SEO as AstroSEO } from 'astro-seo';
4import siteConfig from '@/config/site.config';
5 
6interface Props {
7  title?: string;
8  description?: string;
9  image?: string;
10}
11 
12const { title, description, image } = Astro.props;
13const canonicalURL = new URL(Astro.url.pathname, Astro.site);
14 
15// Auto-generate OG image if none provided
16const ogImage = image || `/og/${Astro.url.pathname}.png`;
17---
18 
19<AstroSEO
20  title={title}
21  description={description}
22  canonical={canonicalURL.toString()}
23  openGraph={{ basic: { title, image: ogImage } }}
24/>

1---
2// src/pages/index.astro
3import Hero from '../components/landing/Hero.astro';
4import PricingCalculator from '../components/PricingCalculator.tsx';
5---
6 
7<!-- Static HTML - ships 0kb JS -->
8<Hero />
9 
10<!-- Hydrates only when visible in viewport -->
11<PricingCalculator client:visible />
12 
13<!-- Hydrates only on user interaction -->
14<Newsletter client:idle />
15 
16<!-- Hydrates only on specific media query -->
17<MobileMenu client:media="(max-width: 768px)" />

1// src/components/ui/Button.tsx
2import { forwardRef } from 'react';
3import { cn } from '@/lib/cn';
4 
5type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
6type ButtonSize = 'sm' | 'md' | 'lg';
7 
8interface ButtonProps {
9  variant?: ButtonVariant;
10  size?: ButtonSize;
11  loading?: boolean;
12  children: React.ReactNode;
13}
14 
15export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
16  ({ variant = 'primary', size = 'md', loading, children }, ref) => (
17    <button
18      ref={ref}
19      className={cn(baseStyles, variants[variant], sizes[size])}
20      disabled={loading}
21    >
22      {loading && <Spinner />}
23      {children}
24    </button>
25  )
26);

1// src/i18n/config.ts (with --i18n flag)
2export const languages = {
3  en: 'English',
4  es: 'Español',
5  fr: 'Français',
6} as const;
7 
8export const defaultLang = 'en';
9 
10// src/i18n/translations/en.ts
11export default {
12  'nav.home': 'Home',
13  'nav.about': 'About',
14  'hero.title': 'Ship faster with Velocity',
15  'hero.subtitle': 'The modern Astro starter',
16} as const;
17 
18// Usage in components
19import { t } from '@/i18n';
20const title = t('hero.title'); // "Ship faster..."

1// src/content.config.ts
2import { defineCollection, z } from 'astro:content';
3import { glob } from 'astro/loaders';
4 
5const blog = defineCollection({
6  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
7  schema: ({ image }) =>
8    z.object({
9      title: z.string().max(100),
10      description: z.string().max(200),
11      publishedAt: z.coerce.date(),
12      author: z.string().default('Team'),
13      image: image().optional(),
14      tags: z.array(z.string()).default([]),
15      draft: z.boolean().default(false),
16    }),
17});
18 
19export const collections = { blog };
20// + Pagefind indexes all content at build time