Login Form
A brand-compliant login form demonstrating proper typography, color contrast, and input styling.
Critical Rules Demonstrated
-
TYPO-001View Rule Details → -
COLOR-001View Rule Details → -
A11Y-001View Rule Details →
Live Example
Welcome Back
Sign in to your account
Don't have an account? Sign up
Code
<form class="login-form">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" />
</div>
<button type="submit" class="submit-btn">
Sign In
</button>
</form> Brand Rules Applied
- TYPO-001: Display heading uses serif font (Chronicle Display/Georgia) at 36px+
- COLOR-001: No white text on Citrus - button uses Navy text on Marine background
- A11Y-001: All text exceeds 4.5:1 contrast ratio against backgrounds