Neo-Brutalist UI Kit

Neo-Brutalist UI Kit

The Indian Startup Funding Tracker utilizes a Neo-Brutalist design language. This style is characterized by high-contrast elements, thick black borders, bold typography, and flat shadows, creating a raw and functional aesthetic.

Design Principles

• High Contrast: Pure white backgrounds (#ffffff) paired with deep blacks (#000000) and vibrant accents (Green-700: #1a5d1a).
• Thick Strokes: 4px solid borders are used to define containers and interactive elements.
• Flat Shadows: Hard-edged shadows that do not use blur, providing a "lifted" paper effect.
• Bold Typography: Uses Space Grotesk for headlines to maintain a modern, geometric feel.

Utility Classes

The kit provides several custom utility classes defined in globals.css that can be applied to any HTML element or React component.

Borders

| Class | Description | CSS Property | | :--- | :--- | :--- | | .neo-border | The primary container border. | 4px solid #000000 | | .neo-border-accent | A themed border using the brand green. | 4px solid #1a5d1a |

Usage Example:

<div className="neo-border p-6 bg-white">
  <h2 className="font-bold">Standard Container</h2>
</div>

<div className="neo-border-accent px-4 py-2">
  <span className="text-sm font-semibold">Accent Badge</span>
</div>

Shadows & Elevation

The kit avoids soft shadows in favor of offset blocks.

| Class | Description | | :--- | :--- | | .neo-shadow | Applies a 6px offset hard shadow. |

Usage Example:

<div className="neo-border neo-shadow p-4">
  Elevated Content
</div>

Interactivity

The .neo-hover class creates a physical "press" effect when users interact with elements.

| Class | Description | | :--- | :--- | | .neo-hover | On hover, moves the element -2px and increases shadow depth. |

Usage Example:

<button className="neo-border neo-hover bg-white px-6 py-2 font-bold cursor-pointer">
  INTERACT WITH ME
</button>

Specialized Components

Data Display Utilities

In lib/utils.ts, specific formatters are provided to ensure data presentation matches the bold UI style:

• formatFundingAmount(amount: number): Formats raw numbers (in Lakhs) into human-readable Indian currency strings (e.g., ₹500Cr, ₹1.2B, ₹50L).
• isFundingDisclosed(amount: number): Returns a boolean used to conditionally style "Undisclosed" deals versus active funding rounds.

Themed Containers

Common UI patterns used throughout the application:

/* A standard Neo-Brutalist Card (as seen in DealCard.tsx) */
<div className="neo-border neo-hover p-6 bg-white flex flex-col h-full">
  <div className="bg-green-700 text-white px-3 py-1 font-bold text-xs w-fit">
    STAGE NAME
  </div>
  <div className="text-2xl font-bold text-green-700 mt-4">
    ₹100Cr
  </div>
</div>

Color Palette

The UI relies on a restricted, high-impact palette:

| Name | Variable / Hex | Usage | | :--- | :--- | :--- | | Primary Black | #000000 | Borders, primary text, icons. | | Primary White | #ffffff | Backgrounds, card faces. | | Accent Green | #1a5d1a | Funding amounts, badges, hover states. | | Warning Yellow | bg-yellow-50 | Information notices and callouts. | | Muted Gray | text-gray-600 | Metadata and secondary descriptions. |

Animations

The kit includes custom CSS animations for loaders and state changes:

• brutalist-spin: A rigid, high-speed rotation.
• brutalist-pulse: A sharp opacity flicker (0.5 to 1.0) without smooth easing.