دليل أنماط وتصاميم واجهات المستخدم

استكشف أكثر من 50 نمطاً مع مقتطفات CSS الجاهزة، باليتات الألوان، وموجهات الذكاء الاصطناعي التوليدي.

الحالة:
التعقيد:
النوع:
يتم عرض 50 نمطاً متوافقاً

Minimalism & Swiss Style

1950s Swiss

General
Button
Preview
#000000
#FFFFFF
#F5F1E8
#808080
#B38B6D
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Neumorphism

2020s Modern

General
Button
Preview
#C8E0F4
#F5E0E8
#E8E8E8
Complexity: MediumPerformance cost: LowAccessibility risk: HighLight mode support: SupportedDark mode support: Conditional
عرض الأكواد والتفاصيل كاملة

Glassmorphism

2020s Modern

General
Button
Preview
#0080FF
#8B00FF
#FF1493
#20B2AA
Complexity: MediumPerformance cost: LowAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Brutalism

1950s Brutalist

General
Button
Preview
#FF0000
#0000FF
#FFFF00
#000000
#FFFFFF
#00FF00
#FF00FF
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

3D & Hyperrealism

2020s Modern

General
Button
Preview
#001F3F
#228B22
#800020
#FFD700
#C0C0C0
Complexity: HighPerformance cost: HighAccessibility risk: HighLight mode support: ConditionalDark mode support: Conditional
عرض الأكواد والتفاصيل كاملة

Vibrant & Block-based

2020s Modern

General
Button
Preview
#39FF14
#BF00FF
#FF1493
#00FFFF
#FFAA00
#FF7F00
#FF006E
#CCFF00
Complexity: MediumPerformance cost: LowAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Dark Mode (OLED)

2020s Modern

General
Button
Preview
#000000
#121212
#0A0E27
#39FF14
#0080FF
#FFD700
#BF00FF
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: Not RecommendedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Accessible & Ethical

Universal

General
Button
Preview
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Claymorphism

2020s Modern

General
Button
Preview
#FDBCB4
#ADD8E6
#98FF98
#E6E6FA
Complexity: MediumPerformance cost: LowAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Conditional
عرض الأكواد والتفاصيل كاملة

Aurora UI

2020s Modern

General
Button
Preview
#0080FF
#FF1493
#00FFFF
Complexity: MediumPerformance cost: LowAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Retro-Futurism

1980s Retro

General
Button
Preview
#0080FF
#FF006E
#00FFFF
#1A1A2E
#5D34D0
#C0C0C0
#FFD700
#FF10F0
Complexity: MediumPerformance cost: ModerateAccessibility risk: HighLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Flat Design

2010s Modern

General
Button
Preview
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Skeuomorphism

2007-2012 iOS

General
Button
Preview
Complexity: HighPerformance cost: HighAccessibility risk: LowLight mode support: ConditionalDark mode support: Conditional
عرض الأكواد والتفاصيل كاملة

Liquid Glass

Apple platforms, 2025

Platform/Material
Button
Preview
Complexity: HighPerformance cost: ModerateAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Motion-Driven

2020s Modern

General
Button
Preview
#22C55E
#EF4444
Complexity: HighPerformance cost: LowAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Micro-interactions

2020s Modern

General
Button
Preview
#22C55E
#EF4444
#F59E0B
Complexity: MediumPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Inclusive Design

Universal

General
Button
Preview
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Zero Interface

2020s AI-Era

General
Button
Preview
#FAFAFA
#F0F0F0
#F5F1E8
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Soft UI Evolution

2020s Modern

General
Button
Preview
#87CEEB
#FFB6C1
#90EE90
Complexity: MediumPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Data-Dense Dashboard

2020s Modern

BI/Analytics
Button
Preview
#F5F5F5
#333333
#22C55E
#F59E0B
#EF4444
Complexity: MediumPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Neubrutalism

2020s Modern

General
Button
Preview
#FFEB3B
#FF5252
#2196F3
#000000
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Bento Box Grid

2020s Apple

General
Button
Preview
#FFFFFF
#F5F5F5
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Y2K Aesthetic

Y2K 2000s

General
Button
Preview
#FF69B4
#00FFFF
#C0C0C0
#9400D3
Complexity: MediumPerformance cost: LowAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Conditional
عرض الأكواد والتفاصيل كاملة

Cyberpunk UI

2020s Cyberpunk

General
Button
Preview
#00FF00
#FF00FF
#00FFFF
#0D0D0D
Complexity: MediumPerformance cost: ModerateAccessibility risk: LowLight mode support: Not RecommendedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Organic Biophilic

2020s Sustainable

General
Button
Preview
#228B22
#8B4513
#87CEEB
#F5F5DC
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

AI-Native UI

2020s AI-Era

General
Button
Preview
#6366F1
#10B981
#F5F5F5
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Memphis Design

1980s Postmodern

General
Button
Preview
#FF71CE
#FFCE5C
#86CCCA
#6A7BB4
Complexity: MediumPerformance cost: LowAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Dimensional Layering

2020s Modern

General
Button
Preview
#FFFFFF
#F5F5F5
#E0E0E0
Complexity: MediumPerformance cost: LowAccessibility risk: HighLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Exaggerated Minimalism

2020s Modern

General
Button
Preview
#000000
#FFFFFF
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Kinetic Typography

2020s Modern

General
Button
Preview
Complexity: HighPerformance cost: ModerateAccessibility risk: HighLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Parallax Storytelling

2020s Modern

General
Button
Preview
Complexity: HighPerformance cost: HighAccessibility risk: HighLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

HUD / Sci-Fi FUI

2010s Sci-Fi

General
Button
Preview
#00FFFF
#0080FF
#FF0000
#333333
Complexity: HighPerformance cost: ModerateAccessibility risk: HighLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Pixel Art

1980s Arcade

General
Button
Preview
Complexity: MediumPerformance cost: LowAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Spatial UI (VisionOS)

2024 Spatial Era

General
Button
Preview
#FFFFFF
Complexity: HighPerformance cost: ModerateAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

E-Ink / Paper

2020s Digital Well-being

General
Button
Preview
#FDFBF7
#F5F5F5
#1A1A1A
#4A4A4A
#FFFF00
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Not Recommended
عرض الأكواد والتفاصيل كاملة

Gen Z Chaos / Maximalism

2023+ Internet Core

General
Button
Preview
#FF00FF
#00FF00
#FFFF00
#0000FF
Complexity: HighPerformance cost: HighAccessibility risk: HighLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Biomimetic / Organic 2.0

2024+ Generative

General
Button
Preview
#FF9999
#00FF41
#001E3C
#FF7F50
Complexity: HighPerformance cost: ModerateAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Anti-Polish / Raw Aesthetic

2025+ Anti-Digital

General
Button
Preview
#FAFAF8
#4A4A4A
#1A1A1A
#C4A77D
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Tactile Digital / Deformable UI

2025+ Tactile Era

General
Button
Preview
#C0C0C0
#FF9ECD
#87CEEB
Complexity: MediumPerformance cost: LowAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Nature Distilled

2025+ Handmade Warmth

General
Button
Preview
#C67B5C
#D4C4A8
#B5651D
#F5F0E1
#8B4513
#6B7B3C
#9C8B7A
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Conditional
عرض الأكواد والتفاصيل كاملة

Interactive Cursor Design

2025+ Interactive

General
Button
Preview
Complexity: MediumPerformance cost: LowAccessibility risk: HighLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Voice-First Multimodal

2025+ Voice Era

General
Button
Preview
#FAFAFA
#6B8FAF
#9B8FBB
Complexity: MediumPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

3D Product Preview

2025+ E-commerce 3D

General
Button
Preview
#E8E8E8
#FFFFFF
Complexity: HighPerformance cost: HighAccessibility risk: LowLight mode support: ConditionalDark mode support: Conditional
عرض الأكواد والتفاصيل كاملة

Editorial Grid / Magazine

2020s Editorial Digital

General
Button
Preview
#000000
#FFFFFF
Complexity: LowPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Vintage Analog / Retro Film

1970s-90s Analog Revival

General
Button
Preview
#F5E6C8
#D4A574
#4A7B7C
#E8B4B8
Complexity: MediumPerformance cost: LowAccessibility risk: LowLight mode support: SupportedDark mode support: Conditional
عرض الأكواد والتفاصيل كاملة

Bauhaus (包豪斯)

1919 Bauhaus Movement

Mobile
Button
Preview
#D02020
#1040C0
#F0C020
#F0F0F0
#121212
#E0E0E0
Complexity: MediumPerformance cost: LowAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Conditional
عرض الأكواد والتفاصيل كاملة

Material 3 Expressive (Mobile)

Google Material Design 3

Mobile
Button
Preview
#6750A4
#E8DEF8
#7D5260
#FFFBFE
#1C1B1F
#F3EDF7
#79747E
Complexity: MediumPerformance cost: ModerateAccessibility risk: LowLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Fluent 2

Microsoft Fluent 2, current

Platform/System
Button
Preview
Complexity: MediumPerformance cost: ModerateAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Shopify Polaris

Shopify Polaris, current

Platform/System
Button
Preview
Complexity: MediumPerformance cost: ModerateAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة

Adobe Spectrum

Adobe Spectrum

Platform/System
Button
Preview
Complexity: MediumPerformance cost: ModerateAccessibility risk: ConditionalLight mode support: SupportedDark mode support: Supported
عرض الأكواد والتفاصيل كاملة