SafeLine WAF

Overview

SafeLine WAF is a security-first Web Application Firewall platform designed to protect websites from malicious attacks with clarity and authority. The design system embodies 'Security Minimalism'—a philosophy that combines institutional trust (conveyed through bold primary blue #0067B8) with clean, accessible interfaces that communicate protection without inducing alarm. The aesthetic is professional and direct: white surfaces, precise typography in PingFang SC, and strategic use of warning states (coral #ff6666) to signal threats. The brand personality is calm, competent, and reassuring—security professionals who speak plainly about complex threats. Example voice: 'Your site is protected. Attack blocked at 14:32 UTC.'

Colors

The color system is built on institutional trust and security clarity. Primary (#0067B8) is the signature accent used on all CTAs, active states, and focus indicators—it conveys authority and trustworthiness. Secondary (#00B87C) represents success and safe states, used for positive confirmations and healthy status indicators. Tertiary/Error (#FF6666) is the warning state, applied to blocked requests, threats, and critical alerts. The surface stack (white #FFFFFF down to #E9ECEF for containers) provides neutral, professional backgrounds that allow content to breathe. On-surface text is pure black (#000000) for maximum legibility in security-critical contexts. The light-font-color (#FFFFFF80) is used for secondary text over colored backgrounds, maintaining 4.5:1 contrast ratios. All interact

Typography

The type system uses PingFang SC as the primary font family, with Helvetica Neue and Arial as fallbacks, ensuring clarity across all platforms. Display (60px, 700 weight, -0.04em tracking) is reserved for hero statements and critical alerts. Headline-lg (40px, 600 weight) anchors major sections. Body-md (16px, 400 weight, 24px line-height) is the workhorse for all body copy, providing comfortable reading at 16px with generous line spacing. Label-md (14px, 600 weight, 0.01em tracking) is used for button text, form labels, and UI controls—the weight ensures visibility at small sizes. All text over colored backgrounds receives a subtle text-shadow: 0 1px 2px rgba(0,0,0,0.1) to maintain legibility. Headlines use negative letter-spacing (-0.02em to -0.04em) to tighten their visual weight and cr

Layout

The layout system uses a 12-column grid with a max-width of 1280px, ensuring content remains readable on all screen sizes. The gutter spacing is 24px, applied consistently between columns and sections. Vertical rhythm is maintained through lg spacing (40px) for section separation, md spacing (24px) for component padding, and sm spacing (12px) for internal element spacing. The container-max-width of 1280px prevents lines from becoming too long, maintaining optimal readability (50–75 characters per line for body text). Modal and card components use md padding (24px) internally, with lg padding (40px) reserved for full-page sections. White space is generous but purposeful—never cramped—reflecting the brand's confidence and clarity. Responsive breakpoints scale spacing proportionally: on mobil

Elevation & Depth

Depth is achieved through a restrained shadow system that emphasizes clarity over drama. Level 1 (Base surfaces) uses no shadow, relying on 1px borders (#D0D0D0) for definition. Level 2 (Cards, dropdowns) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation from the background. Level 3 (Modals, elevated popovers) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), with increased blur radius (24px) and vertical offset (8px) to convey prominence. Hover states on interactive elements transition to Level 3 shadows over 200ms, signaling interactivity. No element uses blur effe

Shapes

The shape philosophy is 'Institutional Precision'—rounded corners are used sparingly and consistently to soften the interface without sacrificing authority. Buttons and inputs use rounded.DEFAULT (0.5rem / 8px) for a modern, approachable feel that avoids sharp corners. Cards and modals use rounded.lg (1rem / 16px) for slightly more prominence. The select dropdown uses rounded.DEFAULT (8px) to match input fields, creating visual cohesion. Badges use rounded.full (9999px) for pill-shaped elements, a universal signal for tags and status indicators. No element uses sharp 0px corners—even the most

Components

Action Elements Buttons are the primary call-to-action mechanism. Button-primary uses backgroundColor: #0067B8, textColor: #FFFFFF, padding: 12px 24px, height: 48px, with rounded.lg (16px). On hover, the background darkens to #004A8A and the shadow elevates to 0 8px 24px rgba(0, 0, 0, 0.12), with a 200ms transition. Button-secondary uses a transparent background with a 2px border in primary blue, allowing secondary actions to coexist without visual dominance. All buttons use label-md typography (14px, 600 weight) for clear, scannable text.

Containers & Surfaces Cards are the primary container for grouped content. Card uses backgroundColor: #FFFFFF, rounded.DEFAULT (8px), padding: 24px, border: 1px solid #D0D0D0, and box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06). On hover, the backgrou

Do's and Don'ts

**Do**

• Do use primary blue (#0067B8) exclusively for interactive elements (buttons, links, focus states) to create a consistent, trustworthy interaction model.
• Do maintain 24px gutter spacing between columns and 40px vertical spacing between sections to ensure content breathes and remains scannable.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all hover and focus state changes, creating smooth, predictable feedback.
• Do use PingFang SC as the primary typeface with Helvetica Neue fallback, ensuring consistent rendering across Chinese and Western audiences.
• Do reserve tertiary/error color (#FF6666) exclusively for warnings, blocked requests, and critical alerts—never use it for neutral or positive states.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and dropdowns for subtle elevation without visual noise.

**Don't**

• Don't use rounded corners larger than 16px (rounded.lg) on any component—excessive rounding undermines the institutional authority of the security brand.
• Don't apply blur effects, glassmorphism, or transparency overlays to content areas; security-critical information must remain crystal clear.
• Don't mix primary blue with secondary green or tertiary red in the same interactive element—use one accent color per component to avoid confusion.
• Don't reduce font sizes below 12px (label-sm) for body copy; legibility is non-negotiable in a security context where users must read threat details.
• Don't use shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) or apply colored shadows; maintain neutral, professional depth.
• Don't apply animations longer than 300ms to interactive elements; security feedback must feel immediate and responsive, not delayed or playful.