UI\/UX design telah berkembang pesat dari sekadar membuat website yang terlihat bagus menjadi menciptakan pengalaman pengguna yang meaningful dan delightful. Di tahun 2025, design tidak lagi tentang aesthetics semata, melainkan tentang solving real user problems dengan empathy dan data-driven approach. Artikel ini akan membahas comprehensive UI\/UX design principles untuk modern web development.<\/p>\n
Understanding UI vs UX Design<\/p>\n
1. UI (User Interface) vs UX (User Experience)
\n\u2022 UI Design: Focus pada visual elements – colors, typography, spacing, layout, and interactions
\n\u2022 UX Design: Focus pada overall experience – user journey, usability, accessibility, dan emotional response<\/p>\n
2. Modern Design Philosophy
\n\u2022 User-Centered Design: Put users di center dari design process
\n\u2022 Design Thinking: Empathy, ideation, prototyping, dan testing
\n\u2022 Data-Driven Design: Make design decisions based pada user data dan metrics
\n\u2022 Inclusive Design: Design untuk everyone regardless of abilities, background, atau context<\/p>\n
Core UI Design Principles<\/p>\n
1. Visual Hierarchy dan Visual Weight
\n“`css
\n\/* Visual Hierarchy Implementation *\/
\n.typography-hierarchy {
\n \/* H1 – Most important *\/
\n font-size: clamp(2rem, 5vw, 3.5rem);
\n font-weight: 800;
\n line-height: 1.1;
\n color: #1a1a1a;
\n margin-bottom: 1.5rem;
\n letter-spacing: -0.02em;
\n}<\/p>\n
\/* H2 – Secondary importance *\/
\n.typography-hierarchy h2 {
\n font-size: clamp(1.5rem, 4vw, 2.5rem);
\n font-weight: 700;
\n line-height: 1.2;
\n color: #2d2d2d;
\n margin-bottom: 1.2rem;
\n}<\/p>\n
\/* Body text – Supporting content *\/
\n.typography-hierarchy p {
\n font-size: clamp(1rem, 2vw, 1.125rem);
\n font-weight: 400;
\n line-height: 1.7;
\n color: #4a4a4a;
\n margin-bottom: 1rem;
\n}<\/p>\n
\/* Visual weight untuk actions *\/
\n.primary-button {
\n background: #2563eb;
\n color: white;
\n padding: 0.875rem 1.75rem;
\n font-weight: 600;
\n font-size: 1rem;
\n border-radius: 0.5rem;
\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
\n transform: translateY(0);
\n transition: all 0.2s ease;
\n}<\/p>\n
.primary-button:hover {
\n background: #1d4ed8;
\n transform: translateY(-2px);
\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
\n}<\/p>\n
.secondary-button {
\n background: transparent;
\n color: #2563eb;
\n border: 2px solid #2563eb;
\n padding: 0.875rem 1.75rem;
\n font-weight: 500;
\n border-radius: 0.5rem;
\n transition: all 0.2s ease;
\n}<\/p>\n
.secondary-button:hover {
\n background: #2563eb;
\n color: white;
\n}
\n“`<\/p>\n
2. Color Theory dan Color Psychology
\n“`css
\n\/* Modern Color System dengan CSS Variables *\/
\n:root {
\n \/* Primary Colors *\/
\n –primary-50: #eff6ff;
\n –primary-100: #dbeafe;
\n –primary-200: #bfdbfe;
\n –primary-500: #3b82f6;
\n –primary-600: #2563eb;
\n –primary-700: #1d4ed8;
\n –primary-900: #1e3a8a;<\/p>\n
\/* Neutral Colors *\/
\n –gray-50: #f9fafb;
\n –gray-100: #f3f4f6;
\n –gray-200: #e5e7eb;
\n –gray-500: #6b7280;
\n –gray-700: #374151;
\n –gray-900: #111827;<\/p>\n
\/* Semantic Colors *\/
\n –success: #10b981;
\n –warning: #f59e0b;
\n –error: #ef4444;
\n –info: #06b6d4;<\/p>\n
\/* Surface Colors *\/
\n –surface: #ffffff;
\n –surface-elevated: #ffffff;
\n –surface-overlay: rgba(0, 0, 0, 0.5);
\n}<\/p>\n
\/* Color accessibility implementation *\/
\n.color-system {
\n \/* High contrast untuk readability *\/
\n color: var(–gray-900);
\n background-color: var(–surface);
\n}<\/p>\n
.color-system h1, .color-system h2, .color-system h3 {
\n color: var(–gray-900);
\n}<\/p>\n
.color-system p {
\n color: var(–gray-700);
\n}<\/p>\n
\/* Semantic color usage *\/
\n.status-success {
\n color: var(–success);
\n background-color: var(–primary-50);
\n border: 1px solid rgba(16, 185, 129, 0.2);
\n}<\/p>\n
.status-warning {
\n color: var(–warning);
\n background-color: #fef3c7;
\n border: 1px solid rgba(245, 158, 11, 0.2);
\n}<\/p>\n
.status-error {
\n color: var(–error);
\n background-color: #fef2f2;
\n border: 1px solid rgba(239, 68, 68, 0.2);
\n}<\/p>\n
\/* Dark mode support *\/
\n@media (prefers-color-scheme: dark) {
\n :root {
\n –surface: #1f2937;
\n –surface-elevated: #374151;
\n –gray-900: #f9fafb;
\n –gray-700: #d1d5db;
\n –gray-500: #9ca3af;
\n }
\n}<\/p>\n
[data-theme=”dark”] {
\n –surface: #1f2937;
\n –surface-elevated: #374151;
\n –gray-900: #f9fafb;
\n –gray-700: #d1d5db;
\n –gray-500: #9ca3af;
\n}
\n“`<\/p>\n
3. Typography dan Readability
\n“`css
\n\/* Modern Typography System *\/
\n.typography-system {
\n font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
\n font-feature-settings: ‘cv02’, ‘cv03’, ‘cv04’, ‘cv11’;
\n -webkit-font-smoothing: antialiased;
\n -moz-osx-font-smoothing: grayscale;
\n}<\/p>\n
\/* Fluid typography untuk responsive design *\/
\n.fluid-typography {
\n font-size: clamp(1rem, 2.5vw, 1.125rem);
\n line-height: 1.6;
\n letter-spacing: -0.01em;
\n}<\/p>\n
\/* Heading system dengan variable font sizing *\/
\n.display-1 {
\n font-size: clamp(3rem, 8vw, 6rem);
\n font-weight: 900;
\n line-height: 0.9;
\n letter-spacing: -0.05em;
\n}<\/p>\n
.display-2 {
\n font-size: clamp(2.25rem, 6vw, 4rem);
\n font-weight: 800;
\n line-height: 1;
\n letter-spacing: -0.04em;
\n}<\/p>\n
.headline-1 {
\n font-size: clamp(1.875rem, 5vw, 3rem);
\n font-weight: 700;
\n line-height: 1.1;
\n letter-spacing: -0.03em;
\n}<\/p>\n
\/* Text hierarchy untuk content *\/
\n.content h1 {
\n font-size: clamp(1.875rem, 5vw, 2.25rem);
\n font-weight: 700;
\n line-height: 1.2;
\n margin: 2.5rem 0 1.5rem;
\n color: var(–gray-900);
\n}<\/p>\n
.content h2 {
\n font-size: clamp(1.5rem, 4vw, 1.875rem);
\n font-weight: 600;
\n line-height: 1.3;
\n margin: 2rem 0 1rem;
\n color: var(–gray-900);
\n}<\/p>\n
.content p {
\n font-size: clamp(1rem, 2.5vw, 1.125rem);
\n line-height: 1.7;
\n margin-bottom: 1.25rem;
\n max-width: 65ch; \/* Optimal reading length *\/
\n color: var(–gray-700);
\n}<\/p>\n
\/* Links dengan accessibility *\/
\n.content a {
\n color: var(–primary-600);
\n text-decoration: underline;
\n text-underline-offset: 2px;
\n text-decoration-thickness: 2px;
\n text-decoration-color: rgba(37, 99, 235, 0.3);
\n transition: all 0.2s ease;
\n}<\/p>\n
.content a:hover {
\n color: var(–primary-700);
\n text-decoration-color: var(–primary-700);
\n}<\/p>\n
.content a:focus {
\n outline: 2px solid var(–primary-500);
\n outline-offset: 2px;
\n border-radius: 2px;
\n}<\/p>\n
\/* Code readability *\/
\n.code-block {
\n font-family: ‘JetBrains Mono’, ‘Fira Code’, monospace;
\n background: var(–gray-100);
\n border-radius: 0.375rem;
\n padding: 1rem;
\n font-size: 0.875rem;
\n line-height: 1.5;
\n overflow-x: auto;
\n color: var(–gray-800);
\n}
\n“`<\/p>\n
Modern UX Design Principles<\/p>\n
1. User Flow dan Journey Mapping
\n“`javascript
\n\/\/ User Flow Analysis Tool
\nclass UserFlowAnalyzer {
\n constructor() {
\n this.flows = new Map();
\n this.metrics = {
\n completionRate: new Map(),
\n timeOnPage: new Map(),
\n dropOffPoints: new Map(),
\n userSatisfaction: new Map()
\n };
\n }<\/p>\n
\/\/ Define user flow
\n defineUserFlow(flowName, steps) {
\n this.flows.set(flowName, {
\n name: flowName,
\n steps: steps.map((step, index) => ({
\n id: `step-${index}`,
\n name: step.name,
\n description: step.description,
\n type: step.type, \/\/ ‘action’, ‘decision’, ‘page’
\n required: step.required || false,
\n alternatives: step.alternatives || []
\n })),
\n createdAt: new Date()
\n });
\n }<\/p>\n
\/\/ Track user navigation
\n trackNavigation(flowName, stepId, userId, duration = 0) {
\n if (!this.flows.has(flowName)) return;<\/p>\n
const flow = this.flows.get(flowName);
\n const stepIndex = flow.steps.findIndex(step => step.id === stepId);<\/p>\n
if (stepIndex === -1) return;<\/p>\n
\/\/ Track time on step
\n if (!this.metrics.timeOnPage.has(stepId)) {
\n this.metrics.timeOnPage.set(stepId, []);
\n }
\n this.metrics.timeOnPage.get(stepId).push({
\n userId,
\n duration,
\n timestamp: new Date()
\n });<\/p>\n
\/\/ Track completion
\n if (stepIndex === flow.steps.length – 1) {
\n this.trackCompletion(flowName, userId, true);
\n }
\n }<\/p>\n
\/\/ Track completion rate
\n trackCompletion(flowName, userId, completed) {
\n if (!this.metrics.completionRate.has(flowName)) {
\n this.metrics.completionRate.set(flowName, {
\n total: 0,
\n completed: 0,
\n rate: 0
\n });
\n }<\/p>\n
const metrics = this.metrics.completionRate.get(flowName);
\n metrics.total++;<\/p>\n
if (completed) {
\n metrics.completed++;
\n }<\/p>\n
metrics.rate = (metrics.completed \/ metrics.total) * 100;
\n }<\/p>\n
\/\/ Identify drop-off points
\n analyzeDropOffPoints(flowName) {
\n const flow = this.flows.get(flowName);
\n const dropOffAnalysis = [];<\/p>\n
flow.steps.forEach((step, index) => {
\n const nextStepId = index 20) { \/\/ Drop-off rate > 20%
\n dropOffAnalysis.push({
\n stepId: step.id,
\n stepName: step.name,
\n dropOffRate: dropOffRate,
\n severity: dropOffRate > 50 ? ‘high’ : ‘medium’
\n });
\n }
\n });<\/p>\n
return dropOffAnalysis;
\n }<\/p>\n
calculateDropOffRate(currentStepId, nextStepId) {
\n if (!nextStepId) return 0;<\/p>\n
const currentUsers = this.getUniqueUsersForStep(currentStepId);
\n const nextUsers = this.getUniqueUsersForStep(nextStepId);<\/p>\n
if (currentUsers.length === 0) return 0;<\/p>\n
return ((currentUsers.length – nextUsers.length) \/ currentUsers.length) * 100;
\n }<\/p>\n
getUniqueUsersForStep(stepId) {
\n const userSet = new Set();<\/p>\n
if (this.metrics.timeOnPage.has(stepId)) {
\n this.metrics.timeOnPage.get(stepId).forEach(entry => {
\n userSet.add(entry.userId);
\n });
\n }<\/p>\n
return Array.from(userSet);
\n }<\/p>\n
\/\/ Generate user flow report
\n generateFlowReport(flowName) {
\n const flow = this.flows.get(flowName);
\n const completionMetrics = this.metrics.completionRate.get(flowName);
\n const dropOffPoints = this.analyzeDropOffPoints(flowName);<\/p>\n
return {
\n flowName,
\n totalSteps: flow.steps.length,
\n completionRate: completionMetrics?.rate || 0,
\n totalUsers: completionMetrics?.total || 0,
\n completedUsers: completionMetrics?.completed || 0,
\n dropOffPoints,
\n recommendations: this.generateRecommendations(dropOffPoints)
\n };
\n }<\/p>\n
generateRecommendations(dropOffPoints) {
\n const recommendations = [];<\/p>\n
dropOffPoints.forEach(point => {
\n if (point.dropOffRate > 50) {
\n recommendations.push({
\n priority: ‘high’,
\n stepId: point.stepId,
\n stepName: point.stepName,
\n issue: `Very high drop-off rate (${point.dropOffRate.toFixed(1)}%)`,
\n suggestions: [
\n ‘Review step complexity’,
\n ‘Simplify user interface’,
\n ‘Add progress indicators’,
\n ‘Provide better guidance’
\n ]
\n });
\n } else {
\n recommendations.push({
\n priority: ‘medium’,
\n stepId: point.stepId,
\n stepName: point.stepName,
\n issue: `Moderate drop-off rate (${point.dropOffRate.toFixed(1)}%)`,
\n suggestions: [
\n ‘Check for usability issues’,
\n ‘Improve visual hierarchy’,
\n ‘Add help text or tooltips’
\n ]
\n });
\n }
\n });<\/p>\n
return recommendations;
\n }
\n}<\/p>\n
\/\/ Usage example
\nconst flowAnalyzer = new UserFlowAnalyzer();<\/p>\n
\/\/ Define registration flow
\nflowAnalyzer.defineUserFlow(‘user-registration’, [
\n { name: ‘Visit Landing Page’, type: ‘page’ },
\n { name: ‘Click Sign Up’, type: ‘action’, required: true },
\n { name: ‘Fill Registration Form’, type: ‘page’, required: true },
\n { name: ‘Email Verification’, type: ‘action’, required: true },
\n { name: ‘Complete Profile’, type: ‘page’, required: false },
\n { name: ‘Welcome Dashboard’, type: ‘page’ }
\n]);<\/p>\n
\/\/ Track user actions
\nflowAnalyzer.trackNavigation(‘user-registration’, ‘step-0’, ‘user123’, 5000);
\nflowAnalyzer.trackNavigation(‘user-registration’, ‘step-1’, ‘user123’, 2000);
\n“`<\/p>\n
2. Micro-interactions dan Animations
\n“`css
\n\/* Micro-interactions untuk enhanced UX *\/
\n.micro-interactions {
\n \/* Button hover states *\/
\n .interactive-button {
\n position: relative;
\n overflow: hidden;
\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
\n }<\/p>\n
.interactive-button::before {
\n content: ”;
\n position: absolute;
\n top: 50%;
\n left: 50%;
\n width: 0;
\n height: 0;
\n border-radius: 50%;
\n background: rgba(255, 255, 255, 0.3);
\n transform: translate(-50%, -50%);
\n transition: width 0.6s, height 0.6s;
\n }<\/p>\n
.interactive-button:active::before {
\n width: 300px;
\n height: 300px;
\n }<\/p>\n
\/* Loading states *\/
\n .loading-state {
\n position: relative;
\n pointer-events: none;
\n opacity: 0.7;
\n }<\/p>\n
.loading-state::after {
\n content: ”;
\n position: absolute;
\n top: 50%;
\n left: 50%;
\n width: 20px;
\n height: 20px;
\n margin: -10px 0 0 -10px;
\n border: 2px solid #f3f3f3;
\n border-top: 2px solid #2563eb;
\n border-radius: 50%;
\n animation: spin 1s linear infinite;
\n }<\/p>\n
@keyframes spin {
\n 0% { transform: rotate(0deg); }
\n 100% { transform: rotate(360deg); }
\n }<\/p>\n
\/* Success states *\/
\n .success-animation {
\n animation: success-bounce 0.6s ease-out;
\n }<\/p>\n
@keyframes success-bounce {
\n 0% { transform: scale(0.3); opacity: 0; }
\n 50% { transform: scale(1.05); }
\n 70% { transform: scale(0.9); }
\n 100% { transform: scale(1); opacity: 1; }
\n }<\/p>\n
\/* Form validation feedback *\/
\n .form-field {
\n position: relative;
\n transition: all 0.2s ease;
\n }<\/p>\n
.form-field:focus-within {
\n transform: translateY(-2px);
\n box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
\n }<\/p>\n
.validation-feedback {
\n position: absolute;
\n right: 12px;
\n top: 50%;
\n transform: translateY(-50%);
\n opacity: 0;
\n transition: all 0.3s ease;
\n }<\/p>\n
.validation-feedback.show {
\n opacity: 1;
\n }<\/p>\n
.validation-feedback.success {
\n color: var(–success);
\n }<\/p>\n
.validation-feedback.error {
\n color: var(–error);
\n }<\/p>\n
\/* Card hover effects *\/
\n .interactive-card {
\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
\n cursor: pointer;
\n }<\/p>\n
.interactive-card:hover {
\n transform: translateY(-4px);
\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
\n 0 10px 10px -5px rgba(0, 0, 0, 0.04);
\n }<\/p>\n
.interactive-card:active {
\n transform: translateY(-2px);
\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
\n }<\/p>\n
\/* Progress indicators *\/
\n .progress-bar {
\n position: relative;
\n height: 4px;
\n background: var(–gray-200);
\n border-radius: 2px;
\n overflow: hidden;
\n }<\/p>\n
.progress-bar-fill {
\n height: 100%;
\n background: linear-gradient(90deg, var(–primary-500), var(–primary-600));
\n border-radius: 2px;
\n transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
\n position: relative;
\n overflow: hidden;
\n }<\/p>\n
.progress-bar-fill::after {
\n content: ”;
\n position: absolute;
\n top: 0;
\n left: 0;
\n right: 0;
\n bottom: 0;
\n background: linear-gradient(
\n 90deg,
\n transparent,
\n rgba(255, 255, 255, 0.3),
\n transparent
\n );
\n animation: shimmer 2s infinite;
\n }<\/p>\n
@keyframes shimmer {
\n 0% { transform: translateX(-100%); }
\n 100% { transform: translateX(100%); }
\n }<\/p>\n
\/* Smooth scrolling untuk single page applications *\/
\n html {
\n scroll-behavior: smooth;
\n }<\/p>\n
\/* Intersection Observer animations *\/
\n .fade-in-section {
\n opacity: 0;
\n transform: translateY(30px);
\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;
\n }<\/p>\n
.fade-in-section.is-visible {
\n opacity: 1;
\n transform: translateY(0);
\n }<\/p>\n
\/* Stagger animations *\/
\n .stagger-animation > * {
\n opacity: 0;
\n transform: translateY(20px);
\n animation: fadeInUp 0.6s ease-out forwards;
\n }<\/p>\n
.stagger-animation > *:nth-child(1) { animation-delay: 0.1s; }
\n .stagger-animation > *:nth-child(2) { animation-delay: 0.2s; }
\n .stagger-animation > *:nth-child(3) { animation-delay: 0.3s; }
\n .stagger-animation > *:nth-child(4) { animation-delay: 0.4s; }<\/p>\n
@keyframes fadeInUp {
\n to {
\n opacity: 1;
\n transform: translateY(0);
\n }
\n }
\n}<\/p>\n
\/* Reduced motion preferences *\/
\n@media (prefers-reduced-motion: reduce) {
\n .micro-interactions *,
\n .micro-interactions *::before,
\n .micro-interactions *::after {
\n animation-duration: 0.01ms !important;
\n animation-iteration-count: 1 !important;
\n transition-duration: 0.01ms !important;
\n scroll-behavior: auto !important;
\n }
\n}
\n“`<\/p>\n
Accessibility (a11y) Best Practices<\/p>\n
1. WCAG 2.1 Compliance Implementation
\n“`css
\n\/* Accessibility-focused design system *\/
\n.accessible-design {
\n \/* Focus management *\/
\n .focus-visible {
\n outline: 2px solid var(–primary-500);
\n outline-offset: 2px;
\n border-radius: 4px;
\n }<\/p>\n
\/* Skip navigation link *\/
\n .skip-link {
\n position: absolute;
\n top: -40px;
\n left: 6px;
\n background: var(–primary-600);
\n color: white;
\n padding: 8px;
\n text-decoration: none;
\n border-radius: 4px;
\n z-index: 1000;
\n transition: top 0.3s ease;
\n }<\/p>\n
.skip-link:focus {
\n top: 6px;
\n }<\/p>\n
\/* Screen reader only content *\/
\n .sr-only {
\n position: absolute;
\n width: 1px;
\n height: 1px;
\n padding: 0;
\n margin: -1px;
\n overflow: hidden;
\n clip: rect(0, 0, 0, 0);
\n white-space: nowrap;
\n border: 0;
\n }<\/p>\n
\/* High contrast mode support *\/
\n @media (prefers-contrast: high) {
\n .button {
\n border: 2px solid currentColor;
\n background: Window;
\n color: WindowText;
\n }<\/p>\n
.link {
\n text-decoration: underline;
\n }
\n }<\/p>\n
\/* Large text support *\/
\n @media (max-width: 800px) {
\n body {
\n font-size: calc(1rem + 0.5vw);
\n }
\n }<\/p>\n
\/* Keyboard navigation *\/
\n .keyboard-nav {
\n position: relative;
\n }<\/p>\n
.keyboard-nav:focus-within {
\n outline: 2px solid var(–primary-500);
\n outline-offset: 2px;
\n }<\/p>\n
\/* ARIA landmarks *\/
\n [role=”banner”],
\n [role=”navigation”],
\n [role=”main”],
\n [role=”contentinfo”],
\n [role=”search”] {
\n outline: 1px solid transparent;
\n }<\/p>\n
[role=”banner”]:focus,
\n [role=”navigation”]:focus,
\n [role=”main”]:focus,
\n [role=”contentinfo”]:focus,
\n [role=”search”]:focus {
\n outline: 2px solid var(–primary-500);
\n outline-offset: 2px;
\n }
\n}<\/p>\n
\/* Form accessibility *\/
\n.accessible-forms {
\n .form-group {
\n margin-bottom: 1.5rem;
\n }<\/p>\n
.form-label {
\n display: block;
\n font-weight: 600;
\n margin-bottom: 0.5rem;
\n color: var(–gray-700);
\n }<\/p>\n
.required-field::after {
\n content: ” *”;
\n color: var(–error);
\n }<\/p>\n
.form-input,
\n .form-textarea,
\n .form-select {
\n width: 100%;
\n padding: 0.75rem;
\n border: 2px solid var(–gray-300);
\n border-radius: 0.375rem;
\n font-size: 1rem;
\n transition: border-color 0.2s ease, box-shadow 0.2s ease;
\n }<\/p>\n
.form-input:focus,
\n .form-textarea:focus,
\n .form-select:focus {
\n outline: none;
\n border-color: var(–primary-500);
\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
\n }<\/p>\n
.form-input[aria-invalid=”true”],
\n .form-textarea[aria-invalid=”true”],
\n .form-select[aria-invalid=”true”] {
\n border-color: var(–error);
\n }<\/p>\n
.error-message {
\n color: var(–error);
\n font-size: 0.875rem;
\n margin-top: 0.25rem;
\n display: flex;
\n align-items: center;
\n gap: 0.5rem;
\n }<\/p>\n
.error-message::before {
\n content: “\u26a0”;
\n font-size: 1rem;
\n }<\/p>\n
.success-message {
\n color: var(–success);
\n font-size: 0.875rem;
\n margin-top: 0.25rem;
\n display: flex;
\n align-items: center;
\n gap: 0.5rem;
\n }<\/p>\n
.success-message::before {
\n content: “\u2713”;
\n font-weight: bold;
\n }<\/p>\n
\/* Fieldset dan legend untuk related form controls *\/
\n .fieldset {
\n border: 2px solid var(–gray-300);
\n border-radius: 0.375rem;
\n padding: 1rem;
\n margin-bottom: 1.5rem;
\n }<\/p>\n
.legend {
\n font-weight: 600;
\n color: var(–gray-700);
\n padding: 0 0.5rem;
\n }
\n}
\n“`<\/p>\n
2. Semantic HTML Structure
\n“`html<\/p>\n