Claude's design docs and implementation plans for thalida.com.
13 items
Styling / Color Standardization
Feb 2026The site uses three accent colors (neon, teal, ice) without consistent semantic rules. Neon appears on both headings and hover states, teal is used for both links and active nav items, and ice is underutilized. Users can't reliably tell what's clickable vs what's decorative.
Styling / Color Standardization
Feb 2026Standardize color usage so neon = emphasis, teal = interactive, ice = active/selected, and subheadings use text color with font hierarchy.
Styling / Color Standardization
Feb 2026Teal (#00e5a0) is used for both links and subheaders, making it unclear what is clickable vs decorative.
Styling / Card Component
Feb 2026Create a generic Card component that exposes all card variants used across the site. Replace inline card markup in CollectionGrid and the home page with a single shared component.
Styling / Card Component
Feb 2026Extract all card variants from CollectionGrid and the home page into a shared Card component system.
Styling / Responsive Tailwind
Feb 2026Replace all raw CSS `@media` queries with Tailwind responsive utilities and implement mobile-first responsive layouts (single-column mobile, two-column tablet, three-column desktop).
Styling / Responsive Tailwind
Feb 2026Replace all raw CSS `@media` queries with Tailwind responsive utility classes. Add proper mobile and tablet layouts using a mobile-first approach. Ignore existing mobile drawer patterns and build fresh.
Styling / Neon Cursor
Feb 2026Add a custom neon glow cursor with a soft fading trail across the entire site.
Styling / Neon Cursor
Feb 2026Add a custom neon glow cursor with a soft fading trail to the site. The cursor replaces the default browser cursor everywhere, shifting color on interactive elements, and is disabled on touch devices.
Styling / Syntax Highlighting
Feb 2026Replace default Shiki `github-dark` code blocks with `astro-expressive-code` using the `houston` theme, copy buttons, and language labels — styled to match the site's neon/midnight aesthetic.
Styling / Syntax Highlighting
Feb 2026Code blocks use Astro's default Shiki `github-dark` theme, which has a gray `#24292e` background and GitHub's color palette. This clashes with the site's neon/teal cyberpunk aesthetic (midnight `#030a12`, neon `#39ff14`, teal `#00e5a0`).
Styling / Mobile Styles
Feb 2026Fix five mobile layout bugs: the ~48px gap between toolbar and nav drawer, content pushed rightward, iOS viewport height, missing body scroll lock, and unresponsive about-page grid.
Styling / Mobile Styles
Feb 2026The mobile layout has two user-visible symptoms: