Practical Usage Example

      <div className="space-y-4">
        {/* Buttons with semantic colors */}
        <button className="bg-semantic-primary text-white px-4 py-2 rounded">
          Primary Button
        </button>
        
        {/* Status messages */}
        <div className="bg-green-100 border-l-4 border-green-500 p-4">
          <div className="text-green-800">Success Message</div>
        </div>
        
        {/* Text colors */}
        <div className="text-semantic-text-primary">Primary Text</div>
        <div className="text-semantic-text-secondary">Secondary Text</div>
      </div>