DESIGN.md · Analysis

BonkersCorner

bonkerscorner.com · 1 Nov 2026 · 47 colors · Archivo Narrow

BonkersCorner

Unisex luxury streetwear brand from Mumbai blending bold graphics and everyday comfort. Warm, editorial, and high-contrast with a restrained black-and-white base and a single product-red accent for prices.

Colors

surface#ffffff

surface-dim#f7f7f7

surface-bright#ffffff

surface-container-lowest#ffffff

surface-container-low#f7f7f7

surface-container#f5f5f5

surface-container-high#e2e2e2

surface-container-highest#d1d1d1

on-surface#484f56

on-surface-variant#343434

inverse-surface#121212

inverse-on-surface#ffffff

outline#dedede

outline-variant#e2e2e2

surface-tint#121212

primary#000000

on-primary#ffffff

primary-container#121212

on-primary-container#ffffff

inverse-primary#ffffff

secondary#cf2929

on-secondary#ffffff

secondary-container#ffdc0b

on-secondary-container#121212

tertiary#279a4b

on-tertiary#111111

tertiary-container#fb9e5b

on-tertiary-container#121212

error#cf2929

on-error#ffffff

error-container#fde8e8

on-error-container#7a1414

primary-fixed#121212

primary-fixed-dim#333333

on-primary-fixed#ffffff

on-primary-fixed-variant#ffffff

secondary-fixed#cf2929

secondary-fixed-dim#b82323

on-secondary-fixed#ffffff

on-secondary-fixed-variant#ffffff

tertiary-fixed#279a4b

tertiary-fixed-dim#1f7d3c

on-tertiary-fixed#111111

on-tertiary-fixed-variant#ffffff

background#ffffff

on-background#484f56

surface-variant#f7f7f7

Typography

display: fontFamily: Archivo Narrow · fontSize: 52px · fontWeight: 600 · lineHeight: 60px
headline-lg: fontFamily: Archivo Narrow · fontSize: 52px · fontWeight: 600 · lineHeight: 60px
headline-md: fontFamily: Archivo Narrow · fontSize: 34px · fontWeight: 600 · lineHeight: 42px
title-lg: fontFamily: Archivo Narrow · fontSize: 24px · fontWeight: 600 · lineHeight: 32px
body-lg: fontFamily: Archivo Narrow · fontSize: 17px · fontWeight: 400 · lineHeight: 27.2px
body-md: fontFamily: Archivo Narrow · fontSize: 17px · fontWeight: 400 · lineHeight: 27.2px
label-md: fontFamily: Archivo Narrow · fontSize: 16px · fontWeight: 500 · lineHeight: normal · letterSpacing: 0.32px
label-sm: fontFamily: Archivo Narrow · fontSize: 12px · fontWeight: 400 · lineHeight: 13.8px

Design guidance

Overview

BonkersCorner is a unisex luxury streetwear label built on the idea that comfort and playfulness can share one garment. The aesthetic movement is Editorial Streetwear: photography-led hero moments, oversized type, and a restrained monochrome interface that lets product graphics carry the energy. The UI evokes confident, unfussy cool, the feeling of a well-cut hoodie rather than a flashy storefront.

Voice is warm, cheeky and direct, with short declarative lines and playful capitalisation ("CULTURE CORNER", "New In"). Copy leans on community language and limited drops. Example sentence: "Comfort meets crazy. The new drop lands Friday."

Colors

The palette is near-monochrome. Primary (#000000) is used for every solid call-to-action, including the SHOP NOW and checkout buttons (background #000000, label #ffffff). Body text uses #484f56 on #ffffff; headings and high-emphasis text use #121212. Secondary (#cf2929) is reserved for sale prices and error states only, never for decoration. Tertiary (#279A4B) signals in-stock inventory, and #FB9E5B marks low stock.

Surfaces stay flat: the page background is #ffffff, the alternate band is #f7f7f7, and borders are #E2E2E2 (header and dividers) or #dedede (form fields). The announcement bar inverts to #121212 with #ffffff text. Star ratings use #ffce00 and review accents use #000000.

Typography

A single grotesque family, Archivo Narrow, carries the whole system. Headings and body share the family and differ by weight: 600 for h1 (52px / 60px line height) and h2 (34px / 42px), 400 for body at 17px / 27.2px, and 500 for buttons at 16px with 0.32px tracking. The condensed width keeps long product names on one line. Quartz and Poppins are declared as brand faces for display accents. Apply uppercase only to navigation and announcement text, never to body copy.

Layout

The grid is fluid up to a 1440px container with a 12-column model and a 20px gutter. Section spacing uses the lg (20px) step between related rows and xl (25px) on mobile, with desktop sections separated by 40px. White space is generous around the full-bleed hero, which sits under a sticky 80px header. Use md (15px) for internal card padding and sm (10px) between stacked labels.

Elevation & Depth

Depth is minimal. Product cards and dropdowns use a two-layer shadow: 0 2px 6px rgba(16, 24, 40, 0.12) for resting surfaces and 0 10px 24px -6px rgba(16, 24, 40, 0.28) for floating menus. Only one shadow layer is used per surface; do not stack shadows on cards already separated by border #E2E2E2.

Shapes

Shapes are softly rounded, a practical-friendly stance rather than sharp editorial. Buttons take a 10px radius (rounded.lg), product cards 8px (rounded.md), and inputs 5px (rounded.sm). Circular icon buttons and badges use full pill radius of 9999px. The 50% radius on avatars and carousel dots keeps the system consistent with the friendly voice.

Components

Action Elements Primary buttons are solid #000000 with #ffffff labels, 48px tall, 10px radius, and 15px horizontal padding. On hover, switch background to #121212 over 200ms ease. Secondary buttons are outlined in #121212 with transparent fill and reverse on hover to #e2e2e2.

Containers & Surfaces Product cards sit on #ffffff with 1px #E2E2E2 borders and 8px radius. On hover, shift to #f5f5f5 and lift with the md shadow over 250ms. Keep card padding at 20px.

Inputs & Interaction Search and form fields use a 1px #dedede border, 5px radius, and 12px 17px padding. On focus, darken the border to #121212 and show no glow. Badges use #cf2929 for sale and #ffdc0b for new-in tags at 12px type with full radius.

Do's and Don'ts

**Do**

Do use #000000 for every primary call-to-action so the interface reads as one brand voice.
Do reserve #cf2929 strictly for sale prices and error messages.
Do keep headings in Archivo Narrow 600 and body at 17px for legibility.
Do let product photography carry colour; keep chrome neutral.

**Don't**

Don't introduce gradients or glass effects; the brand is flat and graphic.
Don't use #cf2929 as a decorative accent or button colour.
Don't set body copy in all caps; reserve uppercase for navigation labels.
Don't stack shadows or exceed the 10px radius on buttons.

---
version: alpha
name: BonkersCorner
description: >-
  Unisex luxury streetwear brand from Mumbai blending bold graphics and everyday comfort. Warm, editorial, and
  high-contrast with a restrained black-and-white base and a single product-red accent for prices.
logo:
  src: https://www.bonkerscorner.com/cdn/shop/files/B_logo_smol_1.jpg?crop=center&height=32&v=1752137105&width=32
  srcDark: >-
    http://www.bonkerscorner.com/cdn/shop/files/bonkers-corner_logo_lefta_bdc89d23-aade-4d94-b0df-d7b5933315df.png?v=1723149077
colors:
  surface: '#ffffff'
  surface-dim: '#f7f7f7'
  surface-bright: '#ffffff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f7f7f7'
  surface-container: '#f5f5f5'
  surface-container-high: '#e2e2e2'
  surface-container-highest: '#d1d1d1'
  on-surface: '#484f56'
  on-surface-variant: '#343434'
  inverse-surface: '#121212'
  inverse-on-surface: '#ffffff'
  outline: '#dedede'
  outline-variant: '#e2e2e2'
  surface-tint: '#121212'
  primary: '#000000'
  on-primary: '#ffffff'
  primary-container: '#121212'
  on-primary-container: '#ffffff'
  inverse-primary: '#ffffff'
  secondary: '#cf2929'
  on-secondary: '#ffffff'
  secondary-container: '#ffdc0b'
  on-secondary-container: '#121212'
  tertiary: '#279a4b'
  on-tertiary: '#111111'
  tertiary-container: '#fb9e5b'
  on-tertiary-container: '#121212'
  error: '#cf2929'
  on-error: '#ffffff'
  error-container: '#fde8e8'
  on-error-container: '#7a1414'
  primary-fixed: '#121212'
  primary-fixed-dim: '#333333'
  on-primary-fixed: '#ffffff'
  on-primary-fixed-variant: '#ffffff'
  secondary-fixed: '#cf2929'
  secondary-fixed-dim: '#b82323'
  on-secondary-fixed: '#ffffff'
  on-secondary-fixed-variant: '#ffffff'
  tertiary-fixed: '#279a4b'
  tertiary-fixed-dim: '#1f7d3c'
  on-tertiary-fixed: '#111111'
  on-tertiary-fixed-variant: '#ffffff'
  background: '#ffffff'
  on-background: '#484f56'
  surface-variant: '#f7f7f7'
typography:
  display:
    fontFamily: Archivo Narrow
    fontSize: 52px
    fontWeight: 600
    lineHeight: 60px
  headline-lg:
    fontFamily: Archivo Narrow
    fontSize: 52px
    fontWeight: '600'
    lineHeight: 60px
  headline-md:
    fontFamily: Archivo Narrow
    fontSize: 34px
    fontWeight: 600
    lineHeight: 42px
  title-lg:
    fontFamily: Archivo Narrow
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  body-lg:
    fontFamily: Archivo Narrow
    fontSize: 17px
    fontWeight: '400'
    lineHeight: 27.2px
  body-md:
    fontFamily: Archivo Narrow
    fontSize: 17px
    fontWeight: 400
    lineHeight: 27.2px
  label-md:
    fontFamily: Archivo Narrow
    fontSize: 16px
    fontWeight: 500
    lineHeight: normal
    letterSpacing: 0.32px
  label-sm:
    fontFamily: Archivo Narrow
    fontSize: 12px
    fontWeight: '400'
    lineHeight: 13.8px
rounded:
  sm: 5px
  DEFAULT: 5px
  md: 8px
  lg: 10px
  xl: 12px
  full: 9999px
spacing:
  unit: 5px
  xs: 5px
  sm: 10px
  md: 15px
  lg: 20px
  xl: 25px
  gutter: 20px
  container-max: 1440px
elevation:
  sm: 0 2px 6px rgba(16, 24, 40, 0.12)
  md: 0 4px 10px rgba(16, 24, 40, 0.16)
  lg: 0 10px 24px -6px rgba(16, 24, 40, 0.28)
layout:
  containerMaxWidth: 1440px
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    height: 48px
  button-primary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
  button-secondary:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    height: 48px
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
  card:
    backgroundColor: '{colors.surface-container-lowest}'
    rounded: '{rounded.md}'
    padding: '{spacing.lg}'
  card-hover:
    backgroundColor: '{colors.surface-container}'
  input-field:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    padding: '{spacing.md}'
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
  badge:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-secondary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: '{spacing.xs}'
  badge-sale:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.on-secondary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: '{spacing.xs}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Primary buttons are solid #000000 with #ffffff labels, 48px tall, 10px radius, and 15px horizontal padding. On hover, switch background to #121212 over 200ms ease. Secondary buttons are outlined in #121212 with transparent fill and reverse on hover to #e2e2e2.

### Containers & Surfaces
Product cards sit on #ffffff with 1px #E2E2E2 borders and 8px radius. On hover, shift to #f5f5f5 and lift with the md shadow over 250ms. Keep card padding at 20px.

### Inputs & Interaction
Search and form fields use a 1px #dedede border, 5px radius, and 12px 17px padding. On focus, darken the border to #121212 and show no glow. Badges use #cf2929 for sale and #ffdc0b for new-in tags at 12px type with full radius.

## Do's and Don'ts

**Do**
- Do use #000000 for every primary call-to-action so the interface reads as one brand voice.
- Do reserve #cf2929 strictly for sale prices and error messages.
- Do keep headings in Archivo Narrow 600 and body at 17px for legibility.
- Do let product photography carry colour; keep chrome neutral.

**Don't**
- Don't introduce gradients or glass effects; the brand is flat and graphic.
- Don't use #cf2929 as a decorative accent or button colour.
- Don't set body copy in all caps; reserve uppercase for navigation labels.
- Don't stack shadows or exceed the 10px radius on buttons.

Edit, then copy or download.