Naming Convention

General Naming Rules

Gunakan Title Case untuk semua nama — variables, text styles, components, layers. Format ini akan auto-convert ke clean class names di Webflow/Framer.

Benar: Grey 100, Hero Title Display, Primary Button

Salah: grey 100, hero_title_display, primary-button

Jangan pakai default Figma names (Frame 12, Group 4) atau singkatan acak yang bikin bingung. Penamaan harus rapi, deskriptif, dan mudah dipahami.

Component Naming

Untuk penamaan states dan variasi komponen, gunakan panel "Current Variant" bawaan Figma.

Property Names

Nama properti harus Title Case dan jelas. Contoh: State, Position, Type.

Property Values

Nilai di dropdown harus mencerminkan kondisi atau variasi komponen dengan Title Case:

• Default — Normal state
• Hover — Hover state
• Active — Active/pressed state
• Close, Open — Kondisi spesifik sesuai kebutuhan

Cross-Page Consistency

Global Components
Komponen yang muncul di setiap halaman pakai nama globalnya: Navbar, Footer.

Section Naming
Ikuti pattern [Section Name] Section. Contoh: Hero Section, Features Section, Pricing Section.

Reserved Words to Avoid

Jangan pakai CSS utility words sebagai nama layer/komponen: Flex, Grid, Centered, Left Aligned. Penamaan harus berdasarkan fungsi konten, bukan styling visual.

Jangan pakai number-only modifiers: Card 1, Card 2, Card 3. Gunakan nama komponen yang sama atau pengenal deskriptif jika isinya beda.

Audit Before Handoff

Sebelum file diserahkan ke developer, lakukan audit di layers panel. Pastikan tidak ada elemen, variabel, atau variant yang melanggar rules di atas.