[v8] BRUTALIST

TUUFI TASARIM
DOKÜMANI

TASARIM ÖZETİ

STİL KARAKTERİSTİKLERİ

  • • Siyah-beyaz dominant palet
  • • DEV tipografi (text-[12vw]+)
  • • Kalın border'lar (border-4)
  • • Shadow yok, hard edge'ler
  • • Abrupt hover (no transition)
  • • Monospace body font
  • • Grid-breaking layout

FELSEFE

  • • Geleneksel web kurallarını çiğne
  • • "Güzel" değil, etkili
  • • Raw, işlenmemiş estetik
  • • Kasıtlı kırıklık
  • • Anti-corporate vibe

RENK PALETİ

BLACK

#000000

WHITE

#ffffff

GRAY

#888888

ACCENT

#ff3333

NOT: Accent renk sadece vurgu için kullanılır. Ana tasarım siyah-beyaz.

TİPOGRAFİ

DISPLAY: DARKER GROTESQUE

AA BB CC

Başlıklar, hero text, sayılar

Weights: 700, 800, 900

BODY: IBM PLEX MONO

Aa Bb Cc

Paragraflar, açıklamalar, navigation

Weights: 400, 500, 600, 700

GOOGLE FONTS:
https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap

BİLEŞENLER

HEADER

TİP: Fixed, border-bottom-4, no glass effect

Sert kenarlar, uppercase navigation, instant hover

HERO

TİP: Typography-focused, text-[12vw], glitch effect

Dev başlıklar, minimal görsel, stats grid

FEATURES

LAYOUT: Broken grid (7+5, 4+4+4 pattern)

Border-4, brutal-hover, mix bg colors

HOW IT WORKS

TİP: Grid 12-col with vertical dividers

Dev numaralar (text-9xl), sert çizgiler

CTA

TİP: Inverted colors section

Beyaz bg, siyah text, brutal shadow

FOOTER

TİP: 4-column grid, minimal

Uppercase headings, monospace links

LEONARDO AI PROMPTLARI

Brutalist estetik için high-contrast, grainy, raw görseller üretilmeli.

ZORUNLU

hero-main.webp

1920x1080

PROMPT:
High contrast black and white photograph of abstract digital interface fragments, brutalist architecture inspired composition, sharp geometric shapes floating in void, grain texture overlay, harsh lighting with deep shadows, modern tech aesthetic meets raw industrial, no smooth gradients, hard edges only, Canon EOS R5 with 24mm f/2.8, high ISO grain, editorial style, 8K resolution

Model: Leonardo Phoenix | Alchemy ON | Guidance: 8 | Post: B&W + Grain overlay

ZORUNLU

about.webp

800x800

PROMPT:
Monochrome abstract representation of artificial intelligence, fragmented digital neural patterns, black background with white glitch artifacts, brutalist minimalism, harsh contrast, no gradients, raw and unpolished aesthetic, square composition, heavy grain texture, documentary photography style, 8K resolution

HİZMET

service-1.webp

800x600

PROMPT (AI Content):
Black and white photograph of typewriter keys or keyboard fragments, close-up macro shot, harsh directional light creating deep shadows, text characters floating, brutalist composition, heavy film grain, industrial aesthetic, sharp focus, 8K resolution

HİZMET

service-2.webp

800x600

PROMPT (Tema Seçimi):
Monochrome grid of website wireframe sketches, hand-drawn interface elements on white paper, stark black ink lines, overhead flat lay composition, brutalist design aesthetic, raw sketch quality, no color, high contrast scan effect, 8K resolution

HİZMET

service-3.webp

800x600

PROMPT (Özelleştirme):
Abstract black and white photograph of hands arranging geometric blocks, brutalist sculpture composition, harsh studio lighting, deep shadows, minimalist props on black surface, documentary style, heavy grain texture, editorial photography, 8K resolution

HİZMET

service-4.webp

800x600

PROMPT (Yayınlama):
High contrast black and white photograph of rocket or arrow shape breaking through surface, motion blur, brutalist energy, harsh directional light, fragmented particles, industrial aesthetic, no smooth transitions, raw power visualization, 8K resolution

ZORUNLU

og-image.jpg

1200x630

PROMPT:
Brutalist social media banner, black background with white bold typography placeholder area, geometric shapes, hard edges, no gradients, industrial minimalism, 1200x630 ratio, suitable for text overlay, raw aesthetic, 8K quality

NOT: "TUUFI" text post-production'da eklenecek

CSS KURALLARI

BORDER

  • border-4 border-white (standard)
  • border-t-4 (dividers)
  • border-l-4 (accent lines)
  • Radius YOK - tüm köşeler keskin

SHADOW

  • shadow-[6px_6px_0_#000]
  • Blur YOK - hard edge shadow
  • Sadece CTA butonlarda kullan

HOVER

  • transition: none
  • Anında renk flip (instant)
  • bg-white + color-black swap

TİPOGRAFİ

  • Hero: text-[12vw]
  • Section titles: text-9xl
  • Hepsi uppercase

EFEKTLER

GLİTCH TEXT

Hero başlığında glitch efekti

  • • ::before / ::after pseudo elements
  • • clip-path animasyonu
  • • text-shadow: red & cyan offset

MARQUEE

Feature showcase için sonsuz kaydırma

  • • translateX(0) → translateX(-50%)
  • • Duration: 20s linear infinite
  • • İçerik 2x tekrar (seamless loop)

GRİD LİNES

Background grid pattern

  • • linear-gradient ile 100px grid
  • • opacity: 0.03 (subtle)
  • • fixed position, full screen

TEKNİK NOTLAR

SCROLL: scroll-behavior: auto (smooth scroll YASAK)

TRANSİTİON: Çoğu element'te transition: none

ANİMASYON: Sadece marquee ve glitch - diğerleri statik

RADIUS: rounded-* sınıfları KULLANILMIYOR

GRADIENT: Gradient YASAK - solid colors only