Code-first elements (SVG / CSS)
Favicon
A moth silhouette or crescent moon with a single firefly dot. 32×32 SVG exported to .ico.
SVG
↑ quick win
Section separators
SVG dividers: a thin botanical sprig (lavender or lilac branch, minimal, ~3-5 flowers). One reusable component, tinted via CSS fill.
SVGCSS
Your current sections have 4rem margin-bottom — a separator SVG sits in that gap naturally.
List bullet points
Replace default bullets with a small inline SVG: moth wing dot, a lilac floret, or a tiny firefly glow circle. Applied via list-style-image or a ::before pseudo with background-image.
SVGCSS
↑ quick win
Nav sidebar icons
The current dot (·) hover indicator could become a tiny SVG leaf or firefly. Optional — the dot already works, this is polish.
SVG
Low effort, low stakes. Do last.
↓ polish
Image frame / border
CSS border with a corner SVG overlay — botanical corner pieces (a small sprig of leaves). Four corner SVGs positioned absolute over the image container.
SVGCSS
→ medium effort
Blockquote / aside decoration
Left border + a small SVG moth or branch at the top-left corner of the quote block.
SVGCSS
↓ polish
Krita illustrations
Homepage hero / character sketch
The "[insert sketch of me waving hi]" placeholder. A small self-portrait in your simplified organic style — waist up, casual, set against a suggested garden background. This is the centerpiece illustration of the whole site.
Kritaref needed
Skin-in-environment palette is already in your Krita swatch. The mauve-lit and warm-reflect tones are exactly right for moonlit skin.
↑ highest impact
Question card art (Little Prince ref)
The current pixelated SVG path is doing fine as a placeholder, but a clean Krita redraw — simplified, textured, in your palette — would elevate the whole intro card significantly.
Krita
Export as SVG from Krita using simplified paths — not pixel-by-pixel coordinates like the current one.
→ medium impact
Decorative page header illustration
A wide, short banner — moonlit garden scene, botanical silhouettes, moth in flight. Used at the top of inner pages (music.html, books.html, art.html). Can be reused with color tint variations per page.
Krita
→ do after hero
Section spot illustrations
Small vignettes per section: a stack of books with a bookmark moth for Books, headphones wrapped in lilac for Music, a paintbrush with flowers for Art. These are optional but add a lot of personality.
Krita
Only worth doing once page structures are finalized. Don't illustrate pages that will significantly change layout.
↓ do last
Botanical reference mapping to your palette
Texas Sage
Your strongest palette match. Warm saturated purple → deep-purple. Silver-green leaves → dusty-olive + pale-silver. Draw simplified: rounded leaf clusters, loose florets.
Lilac + Thunbergia
Lilac clusters for amethyst-smoke range. Thunbergia's yellow center = vanilla-custard accent. Together they cover the full warm-to-cool purple spread.
Emperor Moth wings
Dusty olive forewing + amethyst-smoke eyespot ring + vanilla-custard center spot. Simplified: four wing shapes, one eyespot circle per wing, no intricate pattern detail needed at small sizes.
Recommended order of work today
Code work (SVG)
1. Favicon — moth silhouette or crescent, 30min max
2. List bullet SVG — lilac floret, inline data URI
3. Section separator sprig SVG
4. Image frame corner pieces
Krita work
1. Homepage hero sketch (highest leverage)
2. Little Prince card redraw
3. Page header banner (when inner pages exist)
4. Spot illustrations (last)
The SVG elements are worth doing first — they're fast, immediately visible, and unblock the Krita work by clarifying the visual language before you commit to a full illustration.