Login Form Neo Brutalism Design Using HTML and CSS

on
Login Form Neo Brutalism Design Using HTML and CSS

Login Form Neo Brutalism Design Using HTML and CSS

Create a modern, responsive login form design in the neo-brutalist style using HTML and CSS, featuring bold colors, thick borders, and heavy shadows for a raw, unpolished aesthetic. This implementation focuses on striking visuals, accessible design, and maintainable code, ideal for user authentication in web interfaces.

Prerequisites

  • Basic HTML and CSS knowledge
  • A code editor (e.g., VS Code)

Part 1: Login Form Neo Brutalism Design

Step 1: HTML Structure (index.html)

Create a semantic HTML structure for the neo-brutalist login form with a container, header, form with input groups, and footer with a link.

<div class="neo-login-container" role="region" aria-label="Neo-brutalist login forms">
    <div class="neo-login-wrapper" id="login-form-primary">
        <div class="neo-login-header">
            <h2>Sign In</h2>
        </div>
        <form class="neo-login-form">
            <div class="neo-login-form-group">
                <label for="login-email-primary" class="neo-login-form-label">Email</label>
                <input type="email" id="login-email-primary" class="neo-login-form-input" placeholder="you@example.com" required aria-label="Email address" />
            </div>
            <div class="neo-login-form-group">
                <label for="login-password-primary" class="neo-login-form-label">Password</label>
                <input type="password" id="login-password-primary" class="neo-login-form-input" placeholder="••••••••" required aria-label="Password" />
            </div>
            <button type="submit" class="neo-login-form-button">Login</button>
        </form>
        <div class="neo-login-footer">
            Don’t have an account? <a href="#" aria-label="Register for a new account">Register</a>
        </div>
    </div>
    <div class="neo-login-wrapper secondary" id="login-form-secondary">
        <div class="neo-login-header">
            <h2>Log In</h2>
        </div>
        <form class="neo-login-form">
            <div class="neo-login-form-group">
                <label for="login-email-secondary" class="neo-login-form-label">Email</label>
                <input type="email" id="login-email-secondary" class="neo-login-form-input" placeholder="user@domain.com" required aria-label="Email address" />
            </div>
            <div class="neo-login-form-group">
                <label for="login-password-secondary" class="neo-login-form-label">Password</label>
                <input type="password" id="login-password-secondary" class="neo-login-form-input" placeholder="••••••••" required aria-label="Password" />
            </div>
            <button type="submit" class="neo-login-form-button">Login</button>
        </form>
        <div class="neo-login-footer">
            New here? <a href="#" aria-label="Sign up for a new account">Sign Up</a>
        </div>
    </div>
</div>

Step 2: Core CSS Implementation (styles.css)

Style the login form and its elements with neo-brutalist aesthetics: bold colors, thick borders, heavy shadows, and a monospace font. Include Google Fonts for consistent typography.

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=IBM+Plex+Mono:wght@400;700&display=swap" rel="stylesheet">

:root {
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-300: #d1d5db;
    --gray-100: #f3f4f6;
    --white: #ffffff;
    --primary-600: #2563eb;
    --primary-500: #3b82f6;
    --accent-500: #f59e0b;
    --success-500: #10b981;
    --error-500: #ef4444;
    --pink-500: #ec4899;
    --cyan-500: #06b6d4;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --transition: 0.2s ease;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-neo: 4px 4px 0 var(--gray-900);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

.neo-login-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
    max-width: 400px;
}

.neo-login-wrapper {
    width: 360px;
    padding: var(--spacing-lg);
    background: var(--white);
    border: 4px solid var(--gray-900);
    box-shadow: var(--shadow-neo);
    border-radius: var(--radius-lg);
}

.neo-login-wrapper.secondary {
    border-color: var(--accent-500);
}

.neo-login-header {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.neo-login-header h2 {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    margin: 0;
    color: var(--gray-900);
}

.neo-login-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.neo-login-form-group {
    display: flex;
    flex-direction: column;
}

.neo-login-form-label {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--spacing-xs);
}

.neo-login-form-input {
    padding: var(--spacing-sm);
    border: 3px solid var(--gray-900);
    background: var(--gray-100);
    font-size: 0.875rem;
    font-family: var(--font-mono);
    border-radius: var(--radius-sm);
}

.neo-login-wrapper.secondary .neo-login-form-input {
    border-color: var(--accent-500);
}

.neo-login-form-input:focus {
    outline: none;
    background: var(--gray-300);
    border-color: var(--primary-600);
    box-shadow: 2px 2px 0 var(--accent-500);
}

.neo-login-form-button {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--success-500);
    color: var(--white);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.875rem;
    border: 3px solid var(--gray-900);
    cursor: pointer;
    box-shadow: var(--shadow-neo);
    transition: all var(--transition);
    border-radius: var(--radius-sm);
}

.neo-login-wrapper.secondary .neo-login-form-button {
    background: var(--pink-500);
    border-color: var(--accent-500);
}

.neo-login-form-button:hover,
.neo-login-form-button:focus {
    background: var(--white);
    color: var(--success-500);
    border-color: var(--success-500);
    box-shadow: none;
    transform: translate(2px, 2px);
}

.neo-login-wrapper.secondary .neo-login-form-button:hover,
.neo-login-wrapper.secondary .neo-login-form-button:focus {
    color: var(--pink-500);
    border-color: var(--pink-500);
}

.neo-login-form-button:focus {
    outline: none;
    box-shadow: 2px 2px 0 var(--accent-500), 0 0 0 3px var(--primary-600);
}

.second-form-submit-btn:hover{
    background: var(--white)  !important;
    color: var(--pink-500)  !important;
    border-color: var(--pink-500) !important;
}

.neo-login-footer {
    margin-top: var(--spacing-md);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--gray-700);
}

.neo-login-footer a {
    color: var(--primary-600);
    text-decoration: underline;
}

.neo-login-footer a:hover,
.neo-login-footer a:focus {
    color: var(--primary-500);
}

.neo-login-footer a:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-500);
}

@media (max-width: 640px) {
    .neo-login-container {
        gap: var(--spacing-sm);
    }

    .neo-login-wrapper {
        width: 100%;
        max-width: 320px;
        padding: var(--spacing-md);
    }

    .neo-login-header h2 {
        font-size: 1.25rem;
    }

    .neo-login-form-input,
    .neo-login-form-button {
        font-size: 0.75rem;
    }

    .neo-login-form-label {
        font-size: 0.875rem;
    }

    .neo-login-footer {
        font-size: 0.6875rem;
    }
}

Explanation

  • Layout: The login form uses a flexbox container (neo-login-container) to stack login wrappers (neo-login-wrapper) vertically. Each wrapper includes a header (neo-login-header), form (neo-login-form) with input groups (neo-login-form-group), and footer (neo-login-footer), styled with a white background, thick borders, and heavy shadows.
  • Styling: The wrapper uses a white background with thick black (4px) or orange (--accent-500 for secondary) borders and a 4px shadow (--shadow-neo). Inputs and buttons have 3px borders, with inputs using a gray background (--gray-100) and buttons using green (--success-500) or pink (--pink-500). Text uses a monospace font (IBM Plex Mono). Hover/focus states invert button colors and remove shadows for tactility.
  • Interactivity: The submit button (neo-login-form-button) and footer link (neo-login-footer a) have hover and focus states that swap colors and adjust shadows. Inputs change background and border on focus. No JavaScript is needed for this static design.
  • Visual Feedback: Hovering or focusing the button inverts colors (e.g., green to white, white to green) with a transform (translate(2px, 2px)) and no shadow. Inputs gray out (--gray-300) and gain a blue border (--primary-600) on focus. Focus states add a dual shadow (orange and blue) for accessibility.
  • Responsiveness: A media query (@media (max-width: 640px)) adjusts wrapper width to 100% (max 320px), reduces padding, font sizes, and header size, maintaining the neo-brutalist aesthetic for mobile usability.
  • Accessibility: role="region" and aria-label on the container provide context for screen readers. Inputs have aria-label (e.g., Email address), and the footer link has aria-label (e.g., Register for a new account). The form uses required for validation. High contrast ratios (4.5:1 minimum, verified for #10b981, #ec4899, #111827) and bold typography ensure readability. Buttons and links are keyboard-focusable with clear focus styles.
UX Tip: Neo-brutalist login forms should feel bold and tactile with heavy shadows, stark contrasts, and clear input fields. Ensure accessibility with ARIA attributes, descriptive labels, and keyboard support. In production, integrate with a backend for authentication, add form validation, or include features like password visibility toggles and test across devices.

Accessibility Features

  • Use role="region" and aria-label for semantic structure
  • Include aria-label on inputs and links for screen readers
  • Ensure high contrast ratios for text, borders, and backgrounds (4.5:1 minimum)
  • Support keyboard navigation with clear focus styles
  • Use bold, readable typography (monospace for neo-brutalism)

Golden Rules

  • Use CSS variables for consistent theming
  • Implement bold borders and heavy shadows for neo-brutalist style
  • Ensure accessibility with ARIA and descriptive attributes
  • Optimize for mobile with responsive design

Conclusion

A professional neo-brutalist login form should embrace raw, bold aesthetics, provide clear user feedback, remain responsive, and follow accessibility guidelines. This solution uses HTML and CSS for striking login forms with primary and secondary variants, featuring heavy shadows, thick borders, a monospace font, and vibrant colors. Experiment with colors, shadow offsets, or add features like form validation or password visibility toggles. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!

Location: Pune, Maharashtra, India

Comments

Post a Comment