Featured Projects

A few things I’ve shipped recently

{#each projects as project} dispatch('openModal', { title: project.title, component: project.component, props: { project } })} >

{project.title}

{project.description}

{/each}

Can you help me rewrite this using a different style? Specifically Catppuccin Macchiato style:

Subtle, Rounded Edges: All UI elements—from the lines of code to buttons and other components—have a gentle border-radius. This makes the UI feel soft and approachable, contrasting with the sharp, blocky UIs of many traditional code editors.

Minimalist and Flat: The design is primarily flat, with no gradients, shadows, or complex textures. This clean, modern look keeps the focus on the content.

Generous Spacing: There is often ample padding and margin around elements. This "breathing room" prevents the UI from feeling cluttered and contributes to a calm, organized feel.

Monospaced Fonts: For code editors, using a monospaced font is essential. Catppuccin themes are often paired with fonts like Jetspace Mono or other similar modern, legible monospaced fonts that may include ligatures.

**1. Rounded, Soft Geometry**

• Border Radius:
  • Buttons, panels, tabs, and tooltips often feature a soft curvature (4–12px radius).
  • Corners are slightly rounded rather than perfectly square, giving the interface a friendly and modern feel.
• Edge Treatment:
  • No harsh lines or sharp separations—dividers are either faint or replaced by color-block sections.

**2. Minimalist & Flat Design**

• Visual Simplicity:
  • UI elements avoid skeuomorphism, 3D effects, heavy shadows, or gloss.
  • Panels and windows are rendered in a uniform, flat style with subtle contrast layers.
• Iconography:
  • Icons are simple, often line-based or filled with one or two tones—no gradients or unnecessary detailing.

**3. Spacious & Calm Layout**

• Generous Spacing:
  • Line height in text is slightly larger than standard for readability (e.g., 1.4–1.6).
  • Buttons, toolbars, and tabs have padding that makes interaction feel comfortable and not cramped.
• Whitespace as a Design Element:
  • Instead of relying on lines or borders to separate elements, spacing and subtle color shifts define hierarchy.

**4. Typography**

• Monospaced Fonts for Code:
  • Typically JetBrains Mono, modern monospaced fonts with ligatures for improved syntax readability.
  • Ligatures transform character sequences like => or >= into cohesive symbols, aiding quick parsing of code.
• Readable UI Text:
  • Non-code UI elements (menus, settings, sidebars) often use a sans-serif font—clean, geometric, and lightweight.

**5. Micro-Details & UX Nuances**

• Hover & Selection Feedback:
  • Highlight states are indicated with slight background color changes (no hard borders or glowing effects).
• Subtle Contrast Hierarchy:
  • Active elements (selected tab, highlighted line) use slightly brighter or more saturated shades, while inactive ones fade into background tones.

**6. Accessibility & Visual Comfort**

• Contrast Balance:
  • Colors are carefully selected to avoid eye strain while preserving clarity—important for long coding sessions.
• Consistency Across Platforms:
  • Whether in a code editor, terminal, or web UI, the theme maintains the same principles of spacing, font, and rounded edges for a cohesive feel.

Would you like me to:

1. Create a style guide document (with spacing, typography, UI element sizes)?
2. Break down a full Figma/UI kit structure for this design?
3. Compare Catppuccin Macchiato vs Latte vs Mocha for design nuances?

Which would help you most? Or should I do all three?

I'll help you rewrite this component using Catppuccin Macchiato design principles! I'll convert it to Svelte 5 syntax, replace the glassmorphism effect with the clean, flat aesthetic of Catppuccin, and use the warm, muted color palette. The design will feature subtle rounded edges, generous spacing, and gentle hover states that align with the Catppuccin philosophy.

It doesnt seem to preview

I see the issue! The component I provided is exactly the same as what you already have in your current UI files. Let me create a proper Catppuccin Macchiato styled version that actually implements the design principles you described - with the flat design, subtle rounded edges, generous spacing, and the warm muted color palette that's characteristic of Catppuccin Macchiato.

Create a new one that can preview

I'll create a brand new Catppuccin Macchiato styled projects component that you can preview! This will feature the characteristic flat design, warm muted colors, subtle rounded edges, and generous spacing that defines the Catppuccin aesthetic.