Sample Log Entry Title
This is a brief summary of what this log entry is about.
Color System
The color system uses CSS variables for consistent theming across the site.
--color-accent1
#E45B5F
#E45B5F
--color-accent2
#4BA3C3
#4BA3C3
--color-accent3
#FFB865
#FFB865
--color-background
#FFFFFF
#FFFFFF
--color-border
#f0f0f0
#f0f0f0
--color-text
#2D3032
#2D3032
--color-text-muted
#757F8C
#757F8C
Typography
Heading 1 (--font-size-2xl)
Heading 2 (--font-size-xl)
Heading 3 (--font-size-lg)
Heading 4
Heading 5
Heading 6
This is a paragraph with bold text, italic text, and a link. The base font size is 16px (1rem) with a line height of 1.5.
Code elements like const example = "hello world"; use the monospace font.
Sans-serif Font (--font-sans)
The quick brown fox jumps over the lazy dog. 1234567890
Monospace Font (--font-mono)
The quick brown fox jumps over the lazy dog. 1234567890
Buttons
Buttons can also be used as links:
Cards
Card Title
This is a simple card with some content. Cards are used to group related information.
Learn MoreTags
Tags are used for categorization and filtering content.
Alerts
Alerts are used to provide feedback to the user.
Info: This is an informational message.
Success: Your action was completed successfully!
Warning: This action might have consequences.
Error: Something went wrong. Please try again.
Forms
Tables
| Name | Role | Status | |
|---|---|---|---|
| John Doe | john@example.com | Developer | Active |
| Jane Smith | jane@example.com | Designer | Active |
| Bob Johnson | bob@example.com | Manager | Inactive |
Content Entries
The site uses a unified style for various types of content entries.
Log Entry
Thought Entry
The best code is often the code you don't have to write. Simplicity isn't just about fewer lines, but about fewer concepts to hold in your mind simultaneously.
Now Entry
Current Focus
- Building this website
- Exploring digital gardens
- Reading about system design
Hero Section
Breadcrumbs
Breadcrumbs help users navigate and understand their location in the site hierarchy.
Accordions
Accordions provide progressive disclosure for content-heavy pages.
Astro is a modern static site builder that delivers lightning-fast performance with a great developer experience.
Islands architecture allows you to hydrate only the interactive components that need JavaScript, keeping the rest of your site as static HTML.
Tooltips
Tooltips provide additional context or information on hover.
This is a tooltip with helpful information
Another example with inline text You can use tooltips on any element
Pagination
Pagination helps users navigate through multi-page content.
Code Blocks
Syntax-highlighted code blocks improve readability for technical content.
JavaScript
// Code example
const message = "Hello world";
const sum = 1 + 2;
console.log(message, sum);Social Sharing
Social sharing buttons encourage content distribution.
Dark Mode Toggle
Allow users to switch between light and dark themes.
Newsletter Subscription
Capture email addresses to build your audience.
Default Newsletter
Newsletter with Custom Button
Card Component
Reusable card layout system for organizing content.
Example Card Section
A flexible grid system for displaying cards
Card 1
Card 2
Card 3
Card A (2-column)
Card B (2-column)
Buttons
Call-to-action buttons in different styles and sizes.
Figures
Styled figures with captions for displaying images with explanatory text.
Featured Quotes
Styled blockquotes to highlight important quotes or key takeaways.
The best way to predict the future is to invent it.
— Alan Kay
Simplicity is the ultimate sophistication.
— Leonardo da Vinci
Design is not just what it looks like and feels like. Design is how it works.
— Steve Jobs
This is an unattributed quote that stands on its own, perfect for highlighting key concepts or ideas without attribution.
Video Embeds
Responsive video embeds for YouTube and other video platforms.
Footer Components
Footer elements provide navigation, contact information, and legal links at the bottom of your pages.