neon_sakura 0.1.4

data/app/views/shared/icons/_rocket.html.erb

@@ -0,0 +1,10 @@
+<%# Icon: Rocket (launch/fast action) %>
+<%# Source: https://heroicons.com/ %>
+<svg xmlns="http://www.w3.org/2000/svg"
+     fill="none"
+     viewBox="0 0 24 24"
+     stroke-width="1.5"
+     stroke="currentColor"
+     class="<%= css_class %>">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
+</svg>

data/app/views/shared/icons/_rss.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
+</svg>

data/app/views/shared/icons/_save.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
+</svg>

data/app/views/shared/icons/_search.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+</svg>

data/app/views/shared/icons/_search_minus.html.erb

@@ -0,0 +1,10 @@
+<%# Icon: Search Minus (zoom out/reduce magnification) %>
+<%# Source: https://heroicons.com/ %>
+<svg xmlns="http://www.w3.org/2000/svg"
+     fill="none"
+     viewBox="0 0 24 24"
+     stroke-width="1.5"
+     stroke="currentColor"
+     class="<%= css_class %>">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM13.5 10.5h-6" />
+</svg>

data/app/views/shared/icons/_search_plus.html.erb

@@ -0,0 +1,10 @@
+<%# Icon: Search Plus (zoom in/magnify) %>
+<%# Source: https://heroicons.com/ %>
+<svg xmlns="http://www.w3.org/2000/svg"
+     fill="none"
+     viewBox="0 0 24 24"
+     stroke-width="1.5"
+     stroke="currentColor"
+     class="<%= css_class %>">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM10.5 7.5v6m3-3h-6" />
+</svg>

data/app/views/shared/icons/_server_error.html.erb

@@ -0,0 +1,6 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <rect x="3" y="4" width="18" height="5" rx="1" stroke-width="2"></rect>
+  <rect x="3" y="12" width="18" height="5" rx="1" stroke-width="2"></rect>
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 15h.01"></path>
+  <path stroke="#EF4444" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 7l-4 4m0-4l4 4"></path>
+</svg>

data/app/views/shared/icons/_share.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
+</svg>

data/app/views/shared/icons/_shield_check.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+</svg>

data/app/views/shared/icons/_sign_in.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
+</svg>

data/app/views/shared/icons/_spinner.html.erb

@@ -0,0 +1,4 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %> animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+</svg>

data/app/views/shared/icons/_star.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
+</svg>

data/app/views/shared/icons/_store.html.erb

@@ -0,0 +1,10 @@
+<%# Icon: Store (shop/storefront) %>
+<%# Source: https://heroicons.com/ %>
+<svg xmlns="http://www.w3.org/2000/svg"
+     fill="none"
+     viewBox="0 0 24 24"
+     stroke-width="1.5"
+     stroke="currentColor"
+     class="<%= css_class %>">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 3.129 3h17.74a1.5 1.5 0 0 1 1.061.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z" />
+</svg>

data/app/views/shared/icons/_sun.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
+</svg>

data/app/views/shared/icons/_sync.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+</svg>

data/app/views/shared/icons/_table.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+</svg>

data/app/views/shared/icons/_tag.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+</svg>

data/app/views/shared/icons/_tags.html.erb

@@ -0,0 +1,11 @@
+<%# Icon: Tags (multiple tags/labels) %>
+<%# Source: https://heroicons.com/ - tag %>
+<svg xmlns="http://www.w3.org/2000/svg"
+     fill="none"
+     viewBox="0 0 24 24"
+     stroke-width="1.5"
+     stroke="currentColor"
+     class="<%= css_class %>">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
+</svg>

data/app/views/shared/icons/_tools.html.erb

@@ -0,0 +1,4 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+</svg>

data/app/views/shared/icons/_trash.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+</svg>

data/app/views/shared/icons/_undo.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
+</svg>

data/app/views/shared/icons/_unlock.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path>
+</svg>

data/app/views/shared/icons/_upload.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+</svg>

data/app/views/shared/icons/_user.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+</svg>

data/app/views/shared/icons/_user_circle.html.erb

@@ -0,0 +1,10 @@
+<%# Icon: User Circle (User Profile Circle) %>
+<%# Source: https://heroicons.com/ (user-circle) %>
+<svg xmlns="http://www.w3.org/2000/svg"
+     fill="none"
+     viewBox="0 0 24 24"
+     stroke-width="1.5"
+     stroke="currentColor"
+     class="<%= css_class %>">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+</svg>

data/app/views/shared/icons/_user_plus.html.erb

@@ -0,0 +1,10 @@
+<%# Icon: User Plus (Add User) %>
+<%# Source: https://heroicons.com/ (user-plus) %>
+<svg xmlns="http://www.w3.org/2000/svg"
+     fill="none"
+     viewBox="0 0 24 24"
+     stroke-width="1.5"
+     stroke="currentColor"
+     class="<%= css_class %>">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
+</svg>

data/app/views/shared/icons/_video.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+</svg>

data/app/views/shared/icons/_wrench.html.erb

@@ -0,0 +1,11 @@
+<%# Icon: Wrench (tools/settings/configuration) %>
+<%# Source: https://heroicons.com/ %>
+<svg xmlns="http://www.w3.org/2000/svg"
+     fill="none"
+     viewBox="0 0 24 24"
+     stroke-width="1.5"
+     stroke="currentColor"
+     class="<%= css_class %>">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z" />
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.867 19.125h.008v.008h-.008v-.008Z" />
+</svg>

data/app/views/style_guide/index.html.erb

@@ -0,0 +1,77 @@
+<div class="max-w-7xl mx-auto">
+  <!-- Header -->
+  <%= render "style_guide/sections/header" %>
+
+  <div class="section-divider"></div>
+
+  <!-- Theme Switcher Section -->
+  <%= render "style_guide/sections/theme_switcher" %>
+
+  <!-- Icons Section -->
+  <%= render "style_guide/sections/icons" %>
+
+  <div class="section-divider"></div>
+
+  <!-- Images Section -->
+  <%= render "style_guide/sections/images" %>
+
+  <div class="section-divider"></div>
+
+  <!-- Typography Section -->
+  <%= render "style_guide/sections/typography" %>
+
+  <div class="section-divider"></div>
+
+  <!-- Colors Section -->
+  <%= render "style_guide/sections/colors" %>
+
+  <div class="section-divider"></div>
+
+  <!-- Gradients Section -->
+  <%= render "style_guide/sections/gradients" %>
+
+  <div class="section-divider"></div>
+
+  <!-- Buttons Section -->
+  <%= render "style_guide/sections/buttons" %>
+
+  <div class="section-divider"></div>
+
+  <!-- Forms Section -->
+  <%= render "style_guide/sections/forms" %>
+
+  <div class="section-divider"></div>
+
+  <!-- File Upload Section -->
+  <%= render "style_guide/sections/file_upload" %>
+
+  <div class="section-divider"></div>
+
+  <!-- Profile Components Section -->
+  <%= render "style_guide/sections/profile_components" %>
+
+  <div class="section-divider"></div>
+
+  <!-- Cards Section -->
+  <%= render "style_guide/sections/cards" %>
+
+  <div class="section-divider"></div>
+
+  <!-- Badges Section -->
+  <%= render "style_guide/sections/badges" %>
+
+  <div class="section-divider"></div>
+
+  <!-- Alerts Section -->
+  <%= render "style_guide/sections/alerts" %>
+
+  <div class="section-divider"></div>
+
+  <!-- Loading Indicators Section -->
+  <%= render "style_guide/sections/loading" %>
+
+  <div class="section-divider"></div>
+
+  <!-- Pagination Section -->
+  <%= render "style_guide/sections/pagination" %>
+</div>

data/app/views/style_guide/sections/_alerts.html.erb

@@ -0,0 +1,114 @@
+<section id="alerts">
+  <h2 class="text-3xl font-bold mb-4">Alerts</h2>
+  <p class="text-text-secondary mb-6">
+    Alert messages for different notification types.
+  </p>
+
+  <!-- Success Alert -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Success Alert</h3>
+      <div class="p-4 rounded-lg bg-notification bg-opacity-10 border border-notification">
+        <div class="flex items-center gap-3">
+          <%= render_theme_icon("check_circle", css_class: "w-5 h-5 text-notification flex-shrink-0") %>
+          <div class="flex-1">
+            <h4 class="font-semibold text-notification mb-1">Success!</h4>
+            <p class="text-sm text-text-secondary">Your operation completed successfully.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;div class="p-4 rounded-lg bg-notification bg-opacity-10 border border-notification"&gt;
+  &lt;div class="flex items-center gap-3"&gt;
+    &lt;%= render_theme_icon("check_circle", css_class: "w-5 h-5 text-notification") %&gt;
+    &lt;div&gt;
+      &lt;h4 class="font-semibold text-notification mb-1"&gt;Success!&lt;/h4&gt;
+      &lt;p class="text-sm"&gt;Message&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Error Alert -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Error Alert</h3>
+      <div class="p-4 rounded-lg bg-alert bg-opacity-10 border border-alert">
+        <div class="flex items-center gap-3">
+          <%= render_theme_icon("alert_circle", css_class: "w-5 h-5 text-alert flex-shrink-0") %>
+          <div class="flex-1">
+            <h4 class="font-semibold text-alert mb-1">Error!</h4>
+            <p class="text-sm text-text-secondary">An error occurred. Please try again.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;div class="p-4 rounded-lg bg-alert bg-opacity-10 border border-alert"&gt;
+  &lt;div class="flex items-center gap-3"&gt;
+    &lt;%= render_theme_icon("alert_circle", css_class: "w-5 h-5 text-alert") %&gt;
+    &lt;div&gt;
+      &lt;h4 class="font-semibold text-alert mb-1"&gt;Error!&lt;/h4&gt;
+      &lt;p class="text-sm"&gt;Message&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Warning Alert -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Warning Alert</h3>
+      <div class="p-4 rounded-lg bg-warning bg-opacity-10 border border-warning">
+        <div class="flex items-center gap-3">
+          <%= render_theme_icon("alert_triangle", css_class: "w-5 h-5 text-warning flex-shrink-0") %>
+          <div class="flex-1">
+            <h4 class="font-semibold text-warning mb-1">Warning!</h4>
+            <p class="text-sm text-text-secondary">This action cannot be undone.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;div class="p-4 rounded-lg bg-warning bg-opacity-10 border border-warning"&gt;
+  &lt;div class="flex items-center gap-3"&gt;
+    &lt;%= render_theme_icon("alert_triangle", css_class: "w-5 h-5 text-warning") %&gt;
+    &lt;div&gt;
+      &lt;h4 class="font-semibold text-warning mb-1"&gt;Warning!&lt;/h4&gt;
+      &lt;p class="text-sm"&gt;Message&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Info Alert -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Info Alert</h3>
+      <div class="p-4 rounded-lg bg-accent bg-opacity-10 border border-accent">
+        <div class="flex items-center gap-3">
+          <%= render_theme_icon("question", css_class: "w-5 h-5 text-accent flex-shrink-0") %>
+          <div class="flex-1">
+            <h4 class="font-semibold text-accent mb-1">Information</h4>
+            <p class="text-sm text-text-secondary">Here's some helpful information for you.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;div class="p-4 rounded-lg bg-accent bg-opacity-10 border border-accent"&gt;
+  &lt;div class="flex items-center gap-3"&gt;
+    &lt;%= render_theme_icon("question", css_class: "w-5 h-5 text-accent") %&gt;
+    &lt;div&gt;
+      &lt;h4 class="font-semibold text-accent mb-1"&gt;Information&lt;/h4&gt;
+      &lt;p class="text-sm"&gt;Message&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+  </div>
+</section>

data/app/views/style_guide/sections/_badges.html.erb

@@ -0,0 +1,78 @@
+<section id="badges">
+  <h2 class="text-3xl font-bold mb-4">Badges</h2>
+  <p class="text-text-secondary mb-6">
+    Small labels and badges for status indicators and tags.
+  </p>
+
+  <!-- Status Badges -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Status Badges</h3>
+      <div class="flex flex-wrap gap-3">
+        <span class="px-3 py-1 rounded-full text-sm bg-notification text-white">Success</span>
+        <span class="px-3 py-1 rounded-full text-sm bg-alert text-white">Error</span>
+        <span class="px-3 py-1 rounded-full text-sm bg-warning text-white">Warning</span>
+        <span class="px-3 py-1 rounded-full text-sm bg-accent text-white">Info</span>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;span class="px-3 py-1 rounded-full text-sm bg-notification text-white"&gt;Success&lt;/span&gt;
+&lt;span class="px-3 py-1 rounded-full text-sm bg-alert text-white"&gt;Error&lt;/span&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Outline Badges -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Outline Badges</h3>
+      <div class="flex flex-wrap gap-3">
+        <span class="px-3 py-1 rounded-full text-sm border border-notification text-notification">Success</span>
+        <span class="px-3 py-1 rounded-full text-sm border border-alert text-alert">Error</span>
+        <span class="px-3 py-1 rounded-full text-sm border border-warning text-warning">Warning</span>
+        <span class="px-3 py-1 rounded-full text-sm border border-accent text-accent">Info</span>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;span class="px-3 py-1 rounded-full text-sm border border-notification text-notification"&gt;Success&lt;/span&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Counter Badges -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Counter Badges</h3>
+      <div class="flex flex-wrap gap-4 items-center">
+        <div class="relative">
+          <%= render_theme_icon("bell", css_class: "w-6 h-6") %>
+          <span class="absolute -top-2 -right-2 px-2 py-1 text-xs rounded-full bg-alert text-white">3</span>
+        </div>
+        <div class="relative">
+          <%= render_theme_icon("envelope", css_class: "w-6 h-6") %>
+          <span class="absolute -top-2 -right-2 px-2 py-1 text-xs rounded-full bg-accent text-white">12</span>
+        </div>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;div class="relative"&gt;
+  &lt;%= render_theme_icon("bell", css_class: "w-6 h-6") %&gt;
+  &lt;span class="absolute -top-2 -right-2 px-2 py-1 text-xs rounded-full bg-alert text-white"&gt;3&lt;/span&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Tag Badges -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Tag Badges</h3>
+      <div class="flex flex-wrap gap-2">
+        <span class="px-2 py-1 text-xs rounded bg-surface border border-border">Rails</span>
+        <span class="px-2 py-1 text-xs rounded bg-surface border border-border">Ruby</span>
+        <span class="px-2 py-1 text-xs rounded bg-surface border border-border">Tailwind</span>
+        <span class="px-2 py-1 text-xs rounded bg-surface border border-border">TypeScript</span>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;span class="px-2 py-1 text-xs rounded bg-surface border border-border"&gt;Tag&lt;/span&gt;</code></pre>
+    </div>
+  </div>
+</section>

data/app/views/style_guide/sections/_buttons.html.erb

@@ -0,0 +1,130 @@
+<section id="buttons">
+  <h2 class="text-3xl font-bold mb-4">Buttons</h2>
+  <p class="text-text-secondary mb-6">
+    Button styles and variants using gradient backgrounds and hover states.
+  </p>
+
+  <!-- Submit Buttons -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Submit Buttons (Gradient)</h3>
+      <div class="flex flex-wrap gap-4">
+        <input type="submit" value="Submit Form" class="px-6 py-2 rounded cursor-pointer">
+        <button type="submit" class="px-6 py-2 rounded cursor-pointer">Submit Button</button>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;input type="submit" value="Submit Form" class="px-6 py-2 rounded cursor-pointer"&gt;
+&lt;button type="submit" class="px-6 py-2 rounded cursor-pointer"&gt;Submit&lt;/button&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Primary Buttons -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Primary Buttons</h3>
+      <div class="flex flex-wrap gap-4">
+        <button class="px-4 py-2 bg-accent text-white rounded hover:opacity-90 transition">
+          Primary Action
+        </button>
+        <button class="px-4 py-2 bg-notification text-white rounded hover:opacity-90 transition">
+          Success Action
+        </button>
+        <button class="px-4 py-2 bg-alert text-white rounded hover:opacity-90 transition">
+          Danger Action
+        </button>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;button class="px-4 py-2 bg-accent text-white rounded hover:opacity-90 transition"&gt;
+  Primary Action
+&lt;/button&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Icon Buttons -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Buttons with Icons</h3>
+      <div class="flex flex-wrap gap-4">
+        <button class="px-4 py-2 bg-accent text-white rounded hover:opacity-90 transition flex items-center gap-2">
+          <%= render_theme_icon("plus", css_class: "w-4 h-4") %>
+          <span>Add Item</span>
+        </button>
+        <button class="px-4 py-2 bg-surface border border-border rounded hover:border-accent transition flex items-center gap-2 text-text-primary">
+          <%= render_theme_icon("download", css_class: "w-4 h-4") %>
+          <span>Download</span>
+        </button>
+        <button class="p-2 bg-surface border border-border rounded hover:border-accent transition text-text-primary">
+          <%= render_theme_icon("cog", css_class: "w-5 h-5") %>
+        </button>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;!-- Primary button with icon --&gt;
+&lt;button class="px-4 py-2 bg-accent text-white rounded flex items-center gap-2"&gt;
+  &lt;%= render_theme_icon("plus", css_class: "w-4 h-4") %&gt;
+  &lt;span&gt;Add Item&lt;/span&gt;
+&lt;/button&gt;
+
+&lt;!-- Outline button with icon --&gt;
+&lt;button class="px-4 py-2 bg-surface border border-border rounded text-text-primary"&gt;
+  &lt;%= render_theme_icon("download", css_class: "w-4 h-4") %&gt;
+  &lt;span&gt;Download&lt;/span&gt;
+&lt;/button&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Button-Styled Links -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Button-Styled Links</h3>
+      <p class="text-sm text-text-secondary mb-4">Links that look like buttons for navigation CTAs</p>
+      <div class="flex flex-wrap gap-4">
+        <a href="#buttons" class="inline-block px-6 py-2 rounded cursor-pointer no-underline" style="background-image: linear-gradient(to right, var(--gradient-from), var(--gradient-to)); color: var(--button-text-color); font-weight: 600;">
+          Gradient Link Button
+        </a>
+        <a href="#buttons" class="inline-block px-4 py-2 bg-accent text-white rounded hover:opacity-90 transition no-underline">
+          Primary Link Button
+        </a>
+        <a href="#buttons" class="inline-block px-4 py-2 bg-surface border border-border rounded hover:border-accent transition no-underline">
+          Outline Link Button
+        </a>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;!-- Gradient link button --&gt;
+&lt;a href="#" class="inline-block px-6 py-2 rounded cursor-pointer no-underline"
+   style="background-image: linear-gradient(to right, var(--gradient-from), var(--gradient-to));
+          color: var(--button-text-color); font-weight: 600;"&gt;
+  Gradient Link
+&lt;/a&gt;
+
+&lt;!-- Primary link button --&gt;
+&lt;a href="#" class="inline-block px-4 py-2 bg-accent text-white rounded hover:opacity-90 transition no-underline"&gt;
+  Primary Link
+&lt;/a&gt;
+
+&lt;!-- Outline link button --&gt;
+&lt;a href="#" class="inline-block px-4 py-2 bg-surface border border-border rounded hover:border-accent transition no-underline"&gt;
+  Outline Link
+&lt;/a&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Link Style Buttons -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Link Style Buttons</h3>
+      <p class="text-sm text-text-secondary mb-4">Buttons and links styled as plain text links</p>
+      <div class="flex flex-wrap gap-4">
+        <button class="text-accent hover:underline">Link Button</button>
+        <a href="#buttons" class="text-accent hover:underline">Link Element</a>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;button class="text-accent hover:underline"&gt;Link Button&lt;/button&gt;
+&lt;a href="#" class="text-accent hover:underline"&gt;Link Element&lt;/a&gt;</code></pre>
+    </div>
+  </div>
+</section>