Tag Patterns Test

Primary Tag - Electric Lime

FeaturedNewPopularRecommended

✓ Electric Lime border and text (#CCFF00)

✓ Transparent background with subtle hover

✓ Rectangular with small rounded corners (not pill)

✓ Subtle glow on hover

Category Tags - All 5 Categories

AI - Purple (#9945FF)

Machine LearningNeural NetworksGPT-4TensorFlowPyTorch

✓ 10% purple opacity background, purple border, purple text, hover glow

Code - Cyan (#00CCFF)

TypeScriptReactNext.jsNode.jsAPI

✓ 10% cyan opacity background, cyan border, cyan text, hover glow

Hardware - Orange (#FF6600)

ArduinoRaspberry PiIoTSensors3D Printing

✓ 10% orange opacity background, orange border, orange text, hover glow

Art - Red (#FF4444)

Generative ArtCreative CodingP5.jsCanvasWebGL

✓ 10% red opacity background, red border, red text, hover glow

Design - Pink (#FFB3D9)

UI/UXFigmaDesign SystemPrototypingWireframing

✓ 10% pink opacity background, pink border, pink text, hover glow

Tags vs Badges Comparison

Badges (Categories)

FeaturedAI
  • ✓ Fully rounded (pill shape)
  • ✓ Uppercase text
  • ✓ 15% opacity background
  • ✓ For classification/status
  • ✓ More prominent

Tags (Keywords)

PopularMachine Learning
  • ✓ Small rounded corners (not pill)
  • ✓ Normal case text
  • ✓ 10% opacity background
  • ✓ For keywords/topics
  • ✓ More subtle, with hover glow

All Tag Types Together

PrimaryAICodeHardwareArtDesign

Usage Example: Blog Post

Category:AI
Tags:
Machine LearningGPT-4AutomationPython

Notice: Badge is uppercase and more prominent, tags are normal case and more subtle