Ensure all buttons have a 1px red border. Make button backgrounds green. Switch to Tacoma as the primary UI font.

User Experience Design

User Flow:

1. User opens the NServiceBus Order Demo web application in their browser
2. System displays the order placement form with pre-populated default values (Customer ID: CUST-001, Product: Widget, Quantity: 5, Total: $99.95)
3. User fills in or modifies the order details in the form fields (Customer ID, Product, Quantity, Total Amount)
4. User clicks the "Place Order" button with new green background and 1px red border
5. System validates the form inputs (all fields required, quantity minimum 1, amount minimum 0)
6. System sends the PlaceOrder command to the NServiceBus OrderProcessing endpoint
7. System displays success confirmation page showing the order details
8. User clicks "Place another order" link to return to the form

UI Components:

• Modified: Button elements (existing submit button in form) - Apply green background color with 1px red border
• Modified: Global font family (existing body style) - Change from Arial to Tacoma font
• Modified: HTML head section - Add @font-face declaration for Tacoma font or link to font source

Error States:

• Required field validation: Browser displays native HTML5 validation message if any field is empty
• Invalid quantity: Browser displays "Please enter a value greater than or equal to 1" if quantity < 1
• Invalid amount: Browser displays "Please enter a valid number" if amount format is incorrect
• NServiceBus endpoint unavailable: Order is queued by NServiceBus transport; user sees success page but processing is delayed (handled by infrastructure)

Accessibility:

• Keyboard navigation: All form inputs are keyboard accessible via Tab key; submit button activatable via Enter or Space
• Screen reader considerations: All input fields have associated label elements using for/id attributes; form uses semantic HTML elements (form, label, input, button)
• Color contrast: Green button background (#00FF00 or similar) with white text must meet WCAG AA standards (minimum 4.5:1 ratio); verify contrast and adjust green shade if needed; 1px red border provides additional visual definition

Technical Design

Affected Components:

Implementation Steps:

1. Modify src/examples/NServiceBusWebApp/Program.cs - Update GetIndexHtml() method to change button CSS to include background: #00FF00; border: 1px solid red; (ensure green shade meets WCAG AA contrast ratio with white text)
2. Modify src/examples/NServiceBusWebApp/Program.cs - Update GetIndexHtml() method to change body CSS font-family from Arial, sans-serif to 'Tacoma', Arial, sans-serif
3. Modify src/examples/NServiceBusWebApp/Program.cs - Add @font-face declaration in <style> block to reference Tacoma font file: @font-face { font-family: 'Tacoma'; src: url('/fonts/tacoma.woff2') format('woff2'); font-weight: normal; font-style: normal; }
4. Modify src/examples/NServiceBusWebApp/Program.cs - Update GetSuccessHtml() method to change body font-family and link styles to use Tacoma font
5. Create src/examples/NServiceBusWebApp/wwwroot/fonts/tacoma.woff2 - Add Tacoma font file or use a CDN link instead of local file
6. Modify src/examples/NServiceBusWebApp/Program.cs - Add static file serving configuration before app.MapGet("/") using app.UseStaticFiles(); to serve font files from wwwroot

Dependencies: None

Database Migrations: None

Tests:

Test design document posted to WorkItem #10. This is a UI-only styling change (button colors/borders and font family) which doesn't require automated acceptance tests.