Most custom work starts in three places: site config, design tokens, and content.
1. Change the site config
Open src/config/site.js and update the site title, author, URL, repository, social links, and SEO metadata.
2. Change the tokens
Open src/styles/global.css for the base Tailwind @theme tokens and default theme values. Non-default color theme overrides live in src/styles/themes.css.
The most important values are:
- Brand colors
- Background colors
- Text colors
- Fonts
- Container widths
Change a small set of tokens first, then inspect /elements before touching component markup.
3. Replace the content
Blog posts live in src/content/post/. Each post is an MDX file with frontmatter for title, description, date, tags, image, and reading time.
The home page is a regular Astro page at src/pages/index.astro. Its sections are plain arrays and components, so you can replace the starter copy without learning a CMS first.
4. Build new pages from Elements
Use /elements as the source for UI patterns. It shows how buttons, badges, cards, form controls, typography, separators, and motion behave in the current theme.