1 می 2026

tailwind css نئوبروتالیسم آموزش توسعهٔ وب css

چطور یک سایت نئوبروتالیسم با Tailwind CSS v4 بسازیم (گام‌به‌گام)

یاد بگیرید چطور یک سایت نئوبروتالیستی کامل را از صفر با Tailwind CSS v4 بسازید. این آموزش عملی شما را در نصب، پیکربندی و ساخت هر مؤلفه راهنمایی می‌کند، همراه با نمونه‌کدهایی که می‌توانید کپی و پیست کنید.

Dov Azencot

@DovAzencot

هم‌رسانی در X

خب، توسعه‌دهندگان. بیایید چیزی جسورانه بسازیم.

نه تئوری. نه پرکننده. فقط شما، من و یک ترمینال. تا پایان این آموزش، یک سایت نئوبروتالیستی کاملاً کارآمد خواهید داشت که با Tailwind CSS v4 ساخته شده.

صحبت از این‌هاست:

کادرهای مشکی ضخیم
سایه‌های افتادهٔ سخت
لهجه‌های زرد الکتریک
تایپوگرافی درشت
صفرْ گوشهٔ گِرد

این یک آموزش از نوع «بیا یک مؤلفه» نیست. ما یک لندینگ‌پیج کامل را از صفر می‌سازیم — بخش hero، امکانات، قیمت‌گذاری، فوتر، همه‌چیز. هر خط کد توضیح داده شده. هر تصمیم طراحی توجیه شده.

قهوه‌تان را بردارید. ترمینالتان را باز کنید. بیایید بروتال شویم.

چه می‌سازیم

پیش از شروع، این چیزی است که می‌سازیم:

یک لندینگ‌پیج برای یک محصول SaaS خیالی به نام «BoldTask» — یک ابزار مدیریت پروژه که شبیه هر ابزار مدیریت پروژهٔ دیگری نیست.

صفحه شامل این‌ها خواهد بود:

یک بخش hero با CTA
کارت‌های امکانات
یک جدول قیمت
یک بخش نظرات
یک فوتر

همه با آن زیبایی‌شناسی نئوبروتالیستی خاص: جسور، پرکنتراست و غیرقابل‌چشم‌پوشی.

استک فناوری:

Tailwind CSS v4 (تازه‌ترین و بهترین)
HTML (یا React/Next.js اگر ترجیح می‌دهید)
Google Fonts (Archivo Black + Space Grotesk)

زمان تخمینی: 45 تا 60 دقیقه اگر گام‌به‌گام همراه شوید

گام 1: راه‌اندازی پروژه (5 دقیقه)

بیایید از صفر شروع کنیم. من در این آموزش از یک راه‌اندازی ساده HTML استفاده می‌کنم، اما می‌توانید آن را به‌راحتی با React، Next.js یا هر فریم‌ورکی وفق دهید.

پروژه‌تان را بسازید

mkdir neobrutalism-website
cd neobrutalism-website

npm را راه‌اندازی و Tailwind v4 را نصب کنید

npm init -y
npm install tailwindcss@next @tailwindcss/vite@next

توجه: ما Tailwind v4 را نصب می‌کنیم (فعلاً در نسخهٔ بتا، اما برای تولید به‌اندازهٔ کافی پایدار). تگ @next به شما v4 را می‌دهد.

ساختار پروژه را بسازید

mkdir src
touch src/index.html src/styles.css

ساختار پوشه‌های شما باید این‌طور باشد:

neobrutalism-website/
├── src/
│   ├── index.html
│   └── styles.css
├── package.json
└── node_modules/

گام 2: پیکربندی Tailwind v4 (3 دقیقه)

Tailwind v4 یک سیستم پیکربندی جدید و تمیزتر می‌آورد. به‌جای tailwind.config.js، حالا همه‌چیز در CSS پیکربندی می‌شود.

فایل استایلتان را بسازید

src/styles.css را باز کنید و اضافه کنید:

@import "tailwindcss";
 
/* Tailwind v4 Theme Configuration */
@theme {
  /* Fonts */
  --font-family-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-family-display: 'Archivo Black', ui-sans-serif, system-ui, sans-serif;
 
  /* Colors - Neobrutalist Palette */
  --color-brutal-yellow: #ffdb33;
  --color-brutal-pink: #ff006e;
  --color-brutal-cyan: #00f0ff;
  --color-brutal-black: #000000;
  --color-brutal-white: #ffffff;
  --color-brutal-gray: #e5e5e5;
 
  /* Border Radius - Zero for neobrutalism */
  --radius-none: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
 
  /* Border Widths - Thick */
  --border-width-default: 3px;
  --border-width-thick: 4px;
  --border-width-heavy: 6px;
 
  /* Shadows - Hard offset shadows (no blur) */
  --shadow-brutal-sm: 2px 2px 0 0 var(--color-brutal-black);
  --shadow-brutal: 4px 4px 0 0 var(--color-brutal-black);
  --shadow-brutal-md: 6px 6px 0 0 var(--color-brutal-black);
  --shadow-brutal-lg: 8px 8px 0 0 var(--color-brutal-black);
  --shadow-brutal-xl: 10px 10px 0 0 var(--color-brutal-black);
 
  /* Spacing adjustments */
  --spacing-brutal: 1.5rem;
}
 
/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  font-family: var(--font-family-sans);
  background-color: var(--color-brutal-white);
  color: var(--color-brutal-black);
  line-height: 1.6;
}
 
/* Custom Utility Classes */
.border-brutal {
  border: 4px solid var(--color-brutal-black);
}
 
.border-brutal-thick {
  border: 6px solid var(--color-brutal-black);
}
 
.shadow-brutal {
  box-shadow: var(--shadow-brutal);
}
 
.shadow-brutal-lg {
  box-shadow: var(--shadow-brutal-lg);
}
 
.shadow-brutal-xl {
  box-shadow: var(--shadow-brutal-xl);
}
 
/* Hover effect - shadow movement */
.btn-brutal {
  transition: all 0.15s ease;
}
 
.btn-brutal:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--color-brutal-black);
}
 
.btn-brutal:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0 0 var(--color-brutal-black);
}

چه کاری همین حالا انجام دادیم:

یک پالت رنگی سفارشی تعریف کردیم (مشکی، سفید، زرد، صورتی، فیروزه‌ای)
همهٔ مقادیر border-radius را صفر کردیم (نئوبروتالیسم = لبه‌های تیز)
ابزارهای سایهٔ سخت ساختیم (با آفست، بدون بلور)
افکت‌های hover سفارشی برای دکمه‌ها اضافه کردیم که «فرورفتن» سایه را تقلید می‌کنند

گام 3: ساختار HTML (5 دقیقه)

ساختار پایهٔ HTML را بسازید. src/index.html را باز کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BoldTask - Project Management That Doesn't Suck</title>
 
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
 
  <!-- Tailwind CSS -->
  <link rel="stylesheet" href="/src/styles.css">
</head>
<body>
  <!-- Navigation -->
  <nav class="border-b-4 border-brutal-black bg-brutal-white">
    <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
      <div class="text-2xl font-display">BoldTask</div>
      <div class="hidden md:flex gap-8">
        <a href="#features" class="font-bold hover:text-brutal-pink transition-colors">Features</a>
        <a href="#pricing" class="font-bold hover:text-brutal-pink transition-colors">Pricing</a>
        <a href="#about" class="font-bold hover:text-brutal-pink transition-colors">About</a>
      </div>
      <button class="bg-brutal-yellow border-brutal shadow-brutal px-6 py-2 font-bold uppercase btn-brutal">
        Sign Up
      </button>
    </div>
  </nav>
 
  <!-- We'll add more sections here -->
 
  <main>
    <!-- Hero section will go here -->
    <!-- Features section will go here -->
    <!-- Pricing section will go here -->
    <!-- Testimonial section will go here -->
  </main>
 
  <!-- Footer will go here -->
 
</body>
</html>

سرور توسعه را راه‌اندازی کنید

به راهی برای پیش‌نمایش کارمان نیاز داریم. بیایید از Vite استفاده کنیم:


pnpm add vite
npm install vite
yarn add vite
bun add vite

این اسکریپت را به package.json خود اضافه کنید:

{
  "scripts": {
    "dev": "vite src"
  }
}

حالا اجرا کنید:


pnpm dev
npm run dev
yarn dev
bun dev

http://localhost:5173 را در مرورگرتان باز کنید. باید یک نوار ناوبری پایه با برندینگ BoldTask ببینید.

گام 4: ساخت بخش hero (10 دقیقه)

حالا ستارهٔ نمایش. بخش hero باید جسورانه باشد.

این را درست بعد از تگ <main> اضافه کنید:

<!-- Hero Section -->
<section class="bg-brutal-yellow min-h-screen flex items-center justify-center px-6 py-20">
  <div class="max-w-6xl w-full">
    <div class="grid md:grid-cols-2 gap-12 items-center">
 
      <!-- Left Column - Text -->
      <div>
        <h1 class="font-display text-6xl md:text-8xl uppercase leading-none mb-6">
          Task Management That Doesn't Bore You to Death
        </h1>
        <p class="text-xl md:text-2xl font-bold mb-8 bg-brutal-white border-brutal shadow-brutal-lg p-6">
          Stop using the same gray dashboard as everyone else.
          BoldTask gives you project management with personality.
        </p>
 
        <!-- CTA Buttons -->
        <div class="flex flex-col sm:flex-row gap-4">
          <button class="bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                         px-8 py-4 font-bold text-lg uppercase btn-brutal">
            Start Free Trial →
          </button>
          <button class="bg-brutal-white border-brutal shadow-brutal-lg
                         px-8 py-4 font-bold text-lg uppercase btn-brutal">
            Watch Demo
          </button>
        </div>
 
        <!-- Social Proof -->
        <div class="mt-12 flex items-center gap-8">
          <div class="text-center">
            <div class="text-4xl font-display">10K+</div>
            <div class="text-sm font-bold">Active Users</div>
          </div>
          <div class="h-12 w-1 bg-brutal-black"></div>
          <div class="text-center">
            <div class="text-4xl font-display">4.9★</div>
            <div class="text-sm font-bold">User Rating</div>
          </div>
          <div class="h-12 w-1 bg-brutal-black"></div>
          <div class="text-center">
            <div class="text-4xl font-display">24/7</div>
            <div class="text-sm font-bold">Support</div>
          </div>
        </div>
      </div>
 
      <!-- Right Column - Visual Element -->
      <div class="relative">
        <!-- Main Card -->
        <div class="bg-brutal-white border-brutal-thick shadow-brutal-xl p-8 relative z-10">
          <div class="bg-brutal-pink h-4 w-20 mb-4"></div>
          <div class="h-3 bg-brutal-gray mb-2"></div>
          <div class="h-3 bg-brutal-gray w-3/4 mb-6"></div>
 
          <!-- Task Items -->
          <div class="space-y-3">
            <div class="flex items-center gap-3 p-3 bg-brutal-yellow border-brutal">
              <div class="w-5 h-5 border-brutal bg-brutal-black"></div>
              <div class="h-2 bg-brutal-black w-full"></div>
            </div>
            <div class="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
              <div class="w-5 h-5 border-brutal"></div>
              <div class="h-2 bg-brutal-gray w-4/5"></div>
            </div>
            <div class="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
              <div class="w-5 h-5 border-brutal"></div>
              <div class="h-2 bg-brutal-gray w-3/4"></div>
            </div>
          </div>
        </div>
 
        <!-- Floating accent card -->
        <div class="absolute -bottom-8 -right-8 bg-brutal-cyan border-brutal-thick
                    shadow-brutal-lg p-6 w-40 text-center">
          <div class="text-3xl font-display mb-2">+47</div>
          <div class="text-xs font-bold">Tasks Done Today</div>
        </div>
      </div>
 
    </div>
  </div>
</section>

چه ساختیم:

یک پس‌زمینهٔ زردِ تمام‌صفحه (تأثیر آنی)
یک تیتر غول‌پیکر با Archivo Black
یک کادر محتوا با کادر ضخیم و سایهٔ سخت
CTAها با افکت‌های hover (سایه هنگام hover جابه‌جا می‌شود)
سنجه‌های اثبات اجتماعی
یک ماکاپ بصری از محصول (نمایش انتزاعی)
یک کارت لهجهٔ شناور برای عمق

تصمیم‌های طراحی:

پس‌زمینهٔ زرد = انرژی بالا، غیرقابل‌چشم‌پوشی
کادر محتوای سفید = کنتراست و سلسله‌مراتب می‌سازد
CTA مشکی روی زرد = بیشترین دیده‌شدن
کارت فیروزه‌ای شناور = عدم‌تقارن اضافه می‌کند (یک اصل نئوبروتالیستی)

گام 5: بخش امکانات (10 دقیقه)

بیایید کارت‌های امکانات را بسازیم. این را بعد از بخش hero اضافه کنید:

<!-- Features Section -->
<section class="bg-brutal-white py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        Why BoldTask?
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-3xl mx-auto">
        Because your productivity tool shouldn't put you to sleep
      </p>
    </div>
 
    <!-- Feature Grid -->
    <div class="grid md:grid-cols-3 gap-8">
 
      <!-- Feature 1 -->
      <div class="bg-brutal-pink text-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">⚡</div>
        <h3 class="font-display text-2xl uppercase mb-4">Lightning Fast</h3>
        <p class="font-bold">
          No lag. No loading. No waiting. Your tasks appear instantly
          because we don't bloat our code with unnecessary animations.
        </p>
      </div>
 
      <!-- Feature 2 -->
      <div class="bg-brutal-cyan border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🎨</div>
        <h3 class="font-display text-2xl uppercase mb-4">Actually Unique</h3>
        <p class="font-bold">
          Tired of boring dashboards? We built something you'll actually
          want to open. Bold colors, zero BS.
        </p>
      </div>
 
      <!-- Feature 3 -->
      <div class="bg-brutal-yellow border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🔒</div>
        <h3 class="font-display text-2xl uppercase mb-4">Privacy First</h3>
        <p class="font-bold">
          Your data stays yours. No tracking. No selling. No corporate
          surveillance. Just your tasks, secured.
        </p>
      </div>
 
      <!-- Feature 4 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">📱</div>
        <h3 class="font-display text-2xl uppercase mb-4">Mobile Ready</h3>
        <p class="font-bold">
          Works on your phone, tablet, or desktop. Same bold design,
          same fast performance everywhere.
        </p>
      </div>
 
      <!-- Feature 5 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🤝</div>
        <h3 class="font-display text-2xl uppercase mb-4">Team Friendly</h3>
        <p class="font-bold">
          Invite your team. Assign tasks. Track progress. All without
          the corporate bloat of "enterprise" tools.
        </p>
      </div>
 
      <!-- Feature 6 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">💰</div>
        <h3 class="font-display text-2xl uppercase mb-4">Fair Pricing</h3>
        <p class="font-bold">
          No hidden fees. No "contact sales." Just honest pricing that
          makes sense. Pay for what you use.
        </p>
      </div>
 
    </div>
  </div>
</section>

چه ساختیم:

6 کارت امکانات در یک گرید واکنش‌گرا
بلوک‌بندی رنگ (صورتی، فیروزه‌ای، زرد، سفید) برای علاقهٔ بصری
آیکون‌های ایموجی (ساده، بازیگوش، هم‌راستا با برند)
افکت hover (کارت‌ها هنگام hover بالا می‌آیند)
کادرهای ضخیم و سایه‌های سختِ همیشه یکدست

الگوی طراحی: دیدید که سه کارت اول از رنگ‌های لهجه (صورتی، فیروزه‌ای، زرد) استفاده می‌کنند در حالی که سه کارت پایینی سفیدند؟ این یک سلسله‌مراتب بصری می‌سازد: ردیف بالا توجه بیشتری می‌گیرد.

گام 6: بخش قیمت‌گذاری (12 دقیقه)

جدول‌های قیمت حیاتی‌اند. بیایید آنها را طوری بسازیم که ازدست‌رفتنی نباشند:

<!-- Pricing Section -->
<section id="pricing" class="bg-brutal-black text-brutal-white py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        Simple Pricing
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-2xl mx-auto">
        No tricks. No hidden costs. Just pick a plan and start shipping.
      </p>
    </div>
 
    <!-- Pricing Grid -->
    <div class="grid md:grid-cols-3 gap-8">
 
      <!-- Free Plan -->
      <div class="bg-brutal-white text-brutal-black border-brutal-thick shadow-brutal-lg p-8">
        <div class="mb-6">
          <div class="text-sm font-bold uppercase mb-2 text-gray-600">For Individuals</div>
          <h3 class="font-display text-4xl uppercase mb-4">Free</h3>
          <div class="text-5xl font-display mb-2">$0</div>
          <div class="text-sm font-bold text-gray-600">Forever free</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Up to 10 projects</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Unlimited tasks</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Mobile apps</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-gray-400 text-xl">✗</span>
            <span class="font-bold text-gray-400">Team collaboration</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-gray-400 text-xl">✗</span>
            <span class="font-bold text-gray-400">Priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-white border-brutal shadow-brutal
                       px-6 py-3 font-bold uppercase btn-brutal">
          Start Free
        </button>
      </div>
 
      <!-- Pro Plan (Highlighted) -->
      <div class="bg-brutal-yellow text-brutal-black border-brutal-thick shadow-brutal-xl p-8
                  relative transform md:-translate-y-4">
        <!-- Popular Badge -->
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-brutal-pink text-brutal-white
                    border-brutal px-6 py-2 font-bold uppercase text-sm">
          Most Popular
        </div>
 
        <div class="mb-6 mt-4">
          <div class="text-sm font-bold uppercase mb-2">For Professionals</div>
          <h3 class="font-display text-4xl uppercase mb-4">Pro</h3>
          <div class="text-5xl font-display mb-2">$12</div>
          <div class="text-sm font-bold">Per month</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited projects</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited tasks</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Mobile apps</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Team collaboration (5 members)</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                       px-6 py-3 font-bold uppercase btn-brutal">
          Get Pro →
        </button>
      </div>
 
      <!-- Team Plan -->
      <div class="bg-brutal-cyan text-brutal-black border-brutal-thick shadow-brutal-lg p-8">
        <div class="mb-6">
          <div class="text-sm font-bold uppercase mb-2">For Teams</div>
          <h3 class="font-display text-4xl uppercase mb-4">Team</h3>
          <div class="text-5xl font-display mb-2">$29</div>
          <div class="text-sm font-bold">Per month</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Everything in Pro</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited team members</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Advanced analytics</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Custom integrations</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">24/7 priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-black text-brutal-cyan border-brutal shadow-brutal
                       px-6 py-3 font-bold uppercase btn-brutal">
          Get Team
        </button>
      </div>
 
    </div>
 
    <!-- Money Back Guarantee -->
    <div class="mt-16 text-center">
      <div class="inline-block bg-brutal-yellow text-brutal-black border-brutal-thick
                  shadow-brutal-lg px-8 py-4 font-bold text-lg">
        💰 30-Day Money Back Guarantee - No Questions Asked
      </div>
    </div>
 
  </div>
</section>

چه ساختیم:

سه سطح قیمت با تمایز روشن
کدگذاری رنگی (سفید = رایگان، زرد = محبوب، فیروزه‌ای = پریمیوم)
کارت میانی را بالاتر و بزرگ‌تر (توجه را به پلن پیشنهادی می‌کشاند)
یک نشان «Most Popular» روی پلن Pro
تیک‌های امکانات (✓ و ✗) برای شفافیت
یک تضمین بازگشت پول برای اعتماد

راهبرد طراحی:

پس‌زمینهٔ مشکی کارت‌های رنگی را برجسته می‌کند
کارت میانی که کمی بالا آمده سلسله‌مراتب بصری می‌سازد
جای‌گیری یکدست CTA مقایسه را آسان می‌کند
CTAهای رنگارنگ با پس‌زمینهٔ کارتشان هم‌خوان‌اند

گام 7: بخش نظرات (8 دقیقه)

اثبات اجتماعی می‌فروشد. بیایید نظرات را اضافه کنیم:

<!-- Testimonial Section -->
<section class="bg-brutal-gray py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        People Love It
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-2xl mx-auto">
        Don't take our word for it. Here's what actual users say.
      </p>
    </div>
 
    <!-- Testimonials Grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
 
      <!-- Testimonial 1 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "Finally, a task manager that doesn't look like it was designed
          by accountants. BoldTask actually makes me WANT to check my tasks."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-pink border-brutal"></div>
          <div>
            <div class="font-bold">Sarah Chen</div>
            <div class="text-sm text-gray-600">Product Designer</div>
          </div>
        </div>
      </div>
 
      <!-- Testimonial 2 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "I switched from Asana and never looked back. BoldTask is faster,
          cleaner, and way more fun to use. Plus it's actually affordable."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-cyan border-brutal"></div>
          <div>
            <div class="font-bold">Marcus Rodriguez</div>
            <div class="text-sm text-gray-600">Startup Founder</div>
          </div>
        </div>
      </div>
 
      <!-- Testimonial 3 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "Our whole team uses it now. The bold design actually helps us
          stay focused. Weird but true."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-yellow border-brutal"></div>
          <div>
            <div class="font-bold">Priya Kapoor</div>
            <div class="text-sm text-gray-600">Engineering Manager</div>
          </div>
        </div>
      </div>
 
    </div>
  </div>
</section>

چه ساختیم:

سه کارت نظر با سبکی یکدست
امتیازدهی ستاره‌ای (زرد = توجه)
آواتار کاربران (مربع‌های رنگی انتزاعی به‌جای عکس)
نام‌ها و عناوین برای اعتبار

چرا آواتارهای انتزاعی؟ عکس‌های واقعی می‌توانند حس شرکتی بدهند. مربع‌های رنگی زیبایی‌شناسی نئوبروتالیستی بازیگوش و هندسی را حفظ می‌کنند.

گام 8: فوتر (5 دقیقه)

هر سایتی به یک فوتر نیاز دارد. بیایید فوتر خودمان را جسورانه بسازیم:

<!-- Footer -->
<footer class="bg-brutal-black text-brutal-white border-t-4 border-brutal-white py-12 px-6">
  <div class="max-w-7xl mx-auto">
 
    <div class="grid md:grid-cols-4 gap-12 mb-12">
 
      <!-- Brand -->
      <div>
        <div class="font-display text-3xl mb-4">BoldTask</div>
        <p class="font-bold text-gray-300">
          Project management that doesn't suck.
        </p>
      </div>
 
      <!-- Product Links -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Product</h4>
        <ul class="space-y-2">
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Features</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Pricing</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Roadmap</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Changelog</a></li>
        </ul>
      </div>
 
      <!-- Company Links -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Company</h4>
        <ul class="space-y-2">
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">About</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Blog</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Careers</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Contact</a></li>
        </ul>
      </div>
 
      <!-- Newsletter -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Stay Updated</h4>
        <p class="font-bold mb-4 text-gray-300">Get updates about new features.</p>
        <div class="flex gap-2">
          <input
            type="email"
            placeholder="Your email"
            class="flex-1 bg-brutal-white text-brutal-black border-brutal px-4 py-2
                   font-bold placeholder:text-gray-400"
          />
          <button class="bg-brutal-yellow text-brutal-black border-brutal shadow-brutal
                         px-4 py-2 font-bold uppercase btn-brutal">
            →
          </button>
        </div>
      </div>
 
    </div>
 
    <!-- Bottom Bar -->
    <div class="border-t-2 border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
      <div class="font-bold text-gray-400">
        © 2026 BoldTask. All rights reserved.
      </div>
      <div class="flex gap-6">
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Privacy</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Terms</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Twitter</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">GitHub</a>
      </div>
    </div>
 
  </div>
</footer>

چه ساختیم:

یک چیدمان فوتر چهارستونه
برند، ناوبری و ثبت‌نام خبرنامه
افکت‌های hover (لینک‌ها زرد می‌شوند)
یک فیلد ایمیل با استایل بروتال
یک نوار کپی‌رایت در پایین

گام 9: افزودن جلا و تعامل (5 دقیقه)

بیایید چند لمس نهایی اضافه کنیم تا سایت جلاخورده حس شود.

اسکرول نرم

این را به src/styles.css خود اضافه کنید:

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}
 
/* Custom scrollbar (optional but on-brand) */
::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  background: var(--color-brutal-gray);
}
 
::-webkit-scrollbar-thumb {
  background: var(--color-brutal-black);
  border: 2px solid var(--color-brutal-gray);
}
 
::-webkit-scrollbar-thumb:hover {
  background: var(--color-brutal-yellow);
}

دکمهٔ منوی موبایل

این JavaScript را پیش از تگ بستهٔ </body> اضافه کنید:

<script>
  // Mobile menu toggle
  const mobileMenuButton = document.createElement('button');
  mobileMenuButton.className = 'md:hidden border-brutal bg-brutal-yellow px-4 py-2 font-bold';
  mobileMenuButton.textContent = 'MENU';
 
  const nav = document.querySelector('nav > div');
  const navLinks = nav.querySelector('.hidden');
 
  // This is a simple example - you'd want to make this more robust
  mobileMenuButton.addEventListener('click', () => {
    navLinks.classList.toggle('hidden');
    navLinks.classList.toggle('flex');
  });
 
  // Add button to nav (you'd do this more elegantly in production)
</script>

بهینه‌سازی کارایی

این متاتگ‌ها را به <head> خود اضافه کنید:

<!-- Preload critical fonts -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap">
 
<!-- Meta tags for SEO and social -->
<meta name="description" content="BoldTask - Project management that doesn't suck. Bold design, fast performance, fair pricing.">
<meta property="og:title" content="BoldTask - Project Management That Doesn't Suck">
<meta property="og:description" content="Stop using boring task managers. BoldTask gives you project management with personality.">
<meta property="og:image" content="/og-image.png">
<meta name="twitter:card" content="summary_large_image">

گام 10: تست و بهبود (5 دقیقه)

حالا سایتتان را تست کنید:

تست واکنش‌گرایی

DevTools (F12) را باز کنید و این بریک‌پوینت‌ها را تست کنید:

موبایل (375px)
تبلت (768px)
دسکتاپ (1280px)

مطمئن شوید که:

متن در همهٔ اندازه‌ها خواناست
دکمه‌ها روی موبایل قابل‌لمس‌اند (حداقل 44px ارتفاع)
چیدمان‌های گرید درست جمع می‌شوند
سایه‌ها روی صفحه‌های کوچک بریده نمی‌شوند

بررسی دسترس‌پذیری

این چک‌لیست را مرور کنید:

همهٔ عناصر تعاملی با کیبورد در دسترس‌اند (با Tab صفحه را بپیمایید)
کنتراست رنگ استانداردهای WCAG AA را برآورده می‌کند (مشکی روی سفید ✓، زرد روی سفید ✓)
تصاویر متن جایگزین دارند (اینجا از div استفاده کردیم، اما اگر تصویر اضافه کردید، alt اضافه کنید)
فیلدهای فرم برچسب دارند
حالت‌های focus دیده می‌شوند

بررسی کارایی

Lighthouse را در Chrome DevTools باز کنید و یک ممیزی اجرا کنید. باید ببینید:

کارایی: 90+ (CSS کم، بدون فریم‌ورک‌های سنگین)
دسترس‌پذیری: 90+ (کنتراست بالا، HTML معنایی)
بهترین شیوه‌ها: 90+
SEO: 90+

اگر امتیازها پایین‌اند، رفع‌های رایج:

width و height به تصاویر اضافه کنید
CSS را در تولید کوچک کنید
هدرهای کش را فعال کنید
تصاویر را فشرده کنید

پاداش: مهاجرت به React/Next.js

می‌خواهید این را در یک اپ React استفاده کنید؟ اینجا نحوهٔ تبدیل بخش hero:

// components/Hero.tsx
export default function Hero() {
  return (
    <section className="bg-brutal-yellow min-h-screen flex items-center justify-center px-6 py-20">
      <div className="max-w-6xl w-full">
        <div className="grid md:grid-cols-2 gap-12 items-center">
 
          {/* Left Column */}
          <div>
            <h1 className="font-display text-6xl md:text-8xl uppercase leading-none mb-6">
              Task Management That Doesn't Bore You to Death
            </h1>
            <p className="text-xl md:text-2xl font-bold mb-8 bg-brutal-white border-brutal shadow-brutal-lg p-6">
              Stop using the same gray dashboard as everyone else.
              BoldTask gives you project management with personality.
            </p>
 
            <div className="flex flex-col sm:flex-row gap-4">
              <button className="bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                               px-8 py-4 font-bold text-lg uppercase btn-brutal">
                Start Free Trial →
              </button>
              <button className="bg-brutal-white border-brutal shadow-brutal-lg
                               px-8 py-4 font-bold text-lg uppercase btn-brutal">
                Watch Demo
              </button>
            </div>
 
            {/* Social Proof */}
            <div className="mt-12 flex items-center gap-8">
              <div className="text-center">
                <div className="text-4xl font-display">10K+</div>
                <div className="text-sm font-bold">Active Users</div>
              </div>
              <div className="h-12 w-1 bg-brutal-black"></div>
              <div className="text-center">
                <div className="text-4xl font-display">4.9★</div>
                <div className="text-sm font-bold">User Rating</div>
              </div>
            </div>
          </div>
 
          {/* Right Column - Visual */}
          <div className="relative">
            <div className="bg-brutal-white border-brutal-thick shadow-brutal-xl p-8 relative z-10">
              {/* Task mockup */}
              <div className="bg-brutal-pink h-4 w-20 mb-4"></div>
              <div className="h-3 bg-brutal-gray mb-2"></div>
              <div className="h-3 bg-brutal-gray w-3/4 mb-6"></div>
 
              <div className="space-y-3">
                <div className="flex items-center gap-3 p-3 bg-brutal-yellow border-brutal">
                  <div className="w-5 h-5 border-brutal bg-brutal-black"></div>
                  <div className="h-2 bg-brutal-black w-full"></div>
                </div>
                <div className="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
                  <div className="w-5 h-5 border-brutal"></div>
                  <div className="h-2 bg-brutal-gray w-4/5"></div>
                </div>
              </div>
            </div>
 
            <div className="absolute -bottom-8 -right-8 bg-brutal-cyan border-brutal-thick
                          shadow-brutal-lg p-6 w-40 text-center">
              <div className="text-3xl font-display mb-2">+47</div>
              <div className="text-xs font-bold">Tasks Done Today</div>
            </div>
          </div>
 
        </div>
      </div>
    </section>
  );
}

سپس در tailwind.config.ts خود:

import type { Config } from 'tailwindcss'
 
const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-space-grotesk)', 'sans-serif'],
        display: ['var(--font-archivo-black)', 'sans-serif'],
      },
      colors: {
        'brutal-yellow': '#ffdb33',
        'brutal-pink': '#ff006e',
        'brutal-cyan': '#00f0ff',
        'brutal-black': '#000000',
        'brutal-white': '#ffffff',
        'brutal-gray': '#e5e5e5',
      },
      boxShadow: {
        'brutal-sm': '2px 2px 0 0 #000',
        'brutal': '4px 4px 0 0 #000',
        'brutal-lg': '6px 6px 0 0 #000',
        'brutal-xl': '8px 8px 0 0 #000',
      },
      borderWidth: {
        'brutal': '4px',
        'brutal-thick': '6px',
      },
    },
  },
  plugins: [],
}
 
export default config

اشتباهات رایج و نحوهٔ پرهیز از آنها

پس از ساختن ده‌ها سایت نئوبروتالیستی، اینها دام‌هایی هستند که بیشتر می‌بینم:

1. ضخامت کادرهای ناهمگون

اشتباه: استفاده از کادرهای 2px روی بعضی عناصر، 5px روی بعضی دیگر، 3px جای دیگر.

راه‌حل: 2 تا 3 ضخامت کادر انتخاب کنید (مثلاً 3px استاندارد، 4px برای تأکید، 6px برای عناصر اصلی) و از ابتدا تا انتها به آنها پایبند بمانید.

2. فراموش‌کردن آفست سایه روی موبایل

اشتباه: آفست سایهٔ 10px روی موبایل که بریده می‌شود یا اسکرول افقی می‌سازد.

راه‌حل: از ابزارهای سایهٔ واکنش‌گرا استفاده کنید:

.card {
  box-shadow: 4px 4px 0 0 #000;
}
 
@media (min-width: 768px) {
  .card {
    box-shadow: 8px 8px 0 0 #000;
  }
}

3. رنگ‌های لهجهٔ بیش‌ازحد

اشتباه: استفاده از 5 رنگ یا بیشتر با این تصور که «بیشتر = بروتال‌تر».

راه‌حل: به مشکی + سفید + نهایتاً 2 تا 3 رنگ لهجه بسنده کنید. پالت ما از زرد، صورتی و فیروزه‌ای استفاده می‌کند، و همین هم لبِ مرز است.

4. بی‌توجهی به دسترس‌پذیری

اشتباه: متن زرد روی پس‌زمینهٔ سفید (ناخوانا)، بدون حالت‌های focus، کنتراست ضعیف.

راه‌حل: همیشه کنتراست را تست کنید. از متن مشکی روی پس‌زمینه‌های زرد/سفید و متن سفید روی پس‌زمینه‌های مشکی/تیره استفاده کنید.

5. سایه‌های نرمی که پنهانی نفوذ می‌کنند

اشتباه: استفادهٔ ناخواسته از سایه‌های پیش‌فرض Tailwind (shadow-lg) که بلور دارند.

راه‌حل: ابزارهای سایهٔ سفارشی بسازید و در صورت نیاز سایه‌های پیش‌فرض را غیرفعال کنید.

گام‌های بعدی و منابع

تبریک. شما همین حالا یک سایت نئوبروتالیستی کامل را از صفر ساختید.

چه کاری بعد

1. منتشرش کنید

# Build for production
npm run build
 
# Deploy to Vercel, Netlify, or wherever

2. کارکرد اضافه کنید

فرم خبرنامه را به یک سرویس متصل کنید (ConvertKit، Mailchimp)
CTAهای قیمت را با Stripe پیاده کنید
تحلیل اضافه کنید (Plausible، Fathom)

3. سیستم طراحی را گسترش دهید

مؤلفه‌های بیشتری بسازید (مودال‌ها، منوهای کشویی، تولتیپ‌ها)
صفحه‌های اضافه بسازید (دربارهٔ ما، وبلاگ، تماس)
حالت تیره اضافه کنید (نئوبروتالیسم در حالت تیره هم عالی جواب می‌دهد)

4. بیشتر بهینه کنید

CSS و HTML را کوچک کنید
بهینه‌سازی تصویر اضافه کنید
راهبردهای کش پیاده کنید
برای کارایی حتی بهتر، یک مولد سایت ایستا را در نظر بگیرید

منابع مفید

الهام طراحی:

Brutalist Websites - یک مجموعهٔ گزیده
Gumroad - نئوبروتالیسمِ درست انجام‌شده
Feastables - یک تجارت الکترونیک نئوبروتالیستی بازیگوش

ابزارها:

Neobrutalism - مؤلفه‌های نئوبروتالیستی آماده
Tailwind CSS v4 Docs - مستندات رسمی
Google Fonts - فونت‌های رایگان (Archivo Black، Space Grotesk)

مولدهای پالت رنگی:

Coolors - تولید ترکیب‌های رنگی
Adobe Color - چرخهٔ رنگ و ابزارهای پالت

جمع‌بندی

شما همین حالا یک سایت نئوبروتالیستی را از صفر تا انتشار در کمتر از یک ساعت ساختید. این واقعاً تحسین‌برانگیز است.

نکات کلیدی:

نئوبروتالیسم = کادرهای ضخیم + سایه‌های سخت + رنگ‌های جسور + صفرْ border-radius
دستور @theme در Tailwind v4 سفارشی‌سازی را تمیزتر می‌کند
یکدستی حیاتی است (ضخامت کادر، سایه‌ها، رنگ‌ها)
دسترس‌پذیری همچنان مهم است (کنتراست بالا کمک می‌کند)
با یک سیستم طراحی محکم شروع کنید، سپس مؤلفه‌ها را بسازید

این سایت فقط یک دمو نیست: یک قالب است که می‌توانید برای پروژه‌های واقعی وفقش دهید. رنگ‌ها را عوض کنید، فونت‌ها را جایگزین کنید، سایه‌ها را تنظیم کنید، آن را از آنِ خود کنید.

بهترین چیز دربارهٔ نئوبروتالیسم؟ بخشنده است. نقص بخشی از زیبایی‌شناسی است. آن کادر کمی کج یا آن عنصر کمی خارج از مرکز؟ این باگ نیست، شخصیت است.

حالا بروید و چیزی جسورانه بسازید که شبیه نمونه‌کار/SaaS/لندینگ‌پیج بقیه نباشد.

و اگر مؤلفه‌های آماده می‌خواهید تا حتی سریع‌تر پیش بروید، به Neobrutalism سری بزنید. همین زیبایی‌شناسی است، بسته‌بندی‌شده به‌صورت مؤلفه‌های کپی-پیست.

ساختن خوش بگذرد. 🚀

سؤالی دارید؟ یک نظر بگذارید یا در Twitter سراغم بیایید. عاشق دیدن چیزهایی هستم که مردم با این سبک می‌سازند.

کد کامل را می‌خواهید؟ فایل HTML کامل به‌صورت یک GitHub Gist در دسترس است (لینک در نظرات).

این را مفید یافتید؟ آن را با توسعه‌دهنده‌ای که باید از دام طراحی کسل‌کننده فرار کند به اشتراک بگذارید.

→ بازگشت به مطالب

چطور یک سایت نئوبروتالیسم با Tailwind CSS v4 بسازیم (گام‌به‌گام)

چه می‌سازیم

گام 1: راه‌اندازی پروژه (5 دقیقه)

پروژه‌تان را بسازید

npm را راه‌اندازی و Tailwind v4 را نصب کنید

ساختار پروژه را بسازید

گام 2: پیکربندی Tailwind v4 (3 دقیقه)

فایل استایلتان را بسازید

گام 3: ساختار HTML (5 دقیقه)

سرور توسعه را راه‌اندازی کنید

گام 4: ساخت بخش hero (10 دقیقه)

گام 5: بخش امکانات (10 دقیقه)

گام 6: بخش قیمت‌گذاری (12 دقیقه)

گام 7: بخش نظرات (8 دقیقه)

گام 8: فوتر (5 دقیقه)

گام 9: افزودن جلا و تعامل (5 دقیقه)

اسکرول نرم

دکمهٔ منوی موبایل

بهینه‌سازی کارایی

گام 10: تست و بهبود (5 دقیقه)

تست واکنش‌گرایی

بررسی دسترس‌پذیری

بررسی کارایی

پاداش: مهاجرت به React/Next.js

اشتباهات رایج و نحوهٔ پرهیز از آنها

1. ضخامت کادرهای ناهمگون

2. فراموش‌کردن آفست سایه روی موبایل

3. رنگ‌های لهجهٔ بیش‌ازحد

4. بی‌توجهی به دسترس‌پذیری

5. سایه‌های نرمی که پنهانی نفوذ می‌کنند

گام‌های بعدی و منابع

چه کاری بعد

منابع مفید

جمع‌بندی

20 پالت رنگی نئوبروتالیسم همراه با کدهای hex (آماده برای کپی و پیست)

چطور هر پروژهٔ React را در 10 دقیقه به نئوبروتالیسم تبدیل کنیم

نئوبروتالیسم در برابر مینیمالیسم: کدام را کِی به کار ببریم (و کِی نبریم)

چطور یک سایت نئوبروتالیسم با Tailwind CSS v4 بسازیم (گام‌به‌گام)

چه می‌سازیم

گام 1: راه‌اندازی پروژه (5 دقیقه)

پروژه‌تان را بسازید

npm را راه‌اندازی و Tailwind v4 را نصب کنید

ساختار پروژه را بسازید

گام 2: پیکربندی Tailwind v4 (3 دقیقه)

فایل استایلتان را بسازید

گام 3: ساختار HTML (5 دقیقه)

سرور توسعه را راه‌اندازی کنید

گام 4: ساخت بخش hero (10 دقیقه)

گام 5: بخش امکانات (10 دقیقه)

گام 6: بخش قیمت‌گذاری (12 دقیقه)

گام 7: بخش نظرات (8 دقیقه)

گام 8: فوتر (5 دقیقه)

گام 9: افزودن جلا و تعامل (5 دقیقه)

اسکرول نرم

دکمهٔ منوی موبایل

بهینه‌سازی کارایی

گام 10: تست و بهبود (5 دقیقه)

تست واکنش‌گرایی

بررسی دسترس‌پذیری

بررسی کارایی

پاداش: مهاجرت به React/Next.js

اشتباهات رایج و نحوهٔ پرهیز از آنها

1. ضخامت کادرهای ناهمگون

2. فراموش‌کردن آفست سایه روی موبایل

3. رنگ‌های لهجهٔ بیش‌ازحد

4. بی‌توجهی به دسترس‌پذیری

5. سایه‌های نرمی که پنهانی نفوذ می‌کنند

گام‌های بعدی و منابع

چه کاری بعد

منابع مفید

جمع‌بندی

مطالب مرتبط

20 پالت رنگی نئوبروتالیسم همراه با کدهای hex (آماده برای کپی و پیست)

چطور هر پروژهٔ React را در 10 دقیقه به نئوبروتالیسم تبدیل کنیم

نئوبروتالیسم در برابر مینیمالیسم: کدام را کِی به کار ببریم (و کِی نبریم)