Super Roll Forming

Overview

Super Roll Forming is an industrial precision-engineering brand that prioritizes clarity, security, and technical trustworthiness. The design system embodies 'Minimal Geometric Clarity'—a philosophy that strips away ornamentation to expose pure function. The UI is deliberately austere: a clean white canvas (rgb(255, 255, 255)), precise geometric spinner (64px × 64px with 4px border), and a single accent color (Indigo #6366f1) reserved exclusively for the loading indicator and interactive focus states. This restraint communicates confidence and professionalism; the brand does not need decoration to prove its worth. The emotional response is one of calm assurance: users are guided through a security verification with transparent, honest messaging and no visual noise.

The brand voice is direct, technical, and reassuring without being verbose. Vocabulary favors precision over marketing flourish: 'Checking your browser' rather than 'Verifying your identity'; 'Please wait for up to 5 seconds' rather than 'Sit tight!' Tone is neutral and factual, reflecting the industrial nature of roll-forming manufacturing. The brand personality is competent, no-nonsense, and respectful of the user's time. Example sentence in brand voice: 'Your connection is secure. Proceeding to verification.'

Colors

The color system is deliberately constrained to reinforce trust and technical precision. Primary (#6366f1, Indigo) is the sole accent color, appearing only on the loading spinner's active border and interactive states—it signals progress and focus without distraction. The primary container (#e5e4ff, a very light lavender) provides a subtle background for selected or highlighted states, maintaining visual hierarchy without introducing competing colors. Surface colors range from pure white (#ffffff) as the base through carefully calibrated grays (#f5f5f5, #f0f0f0, #e9ecef) for container and interactive states. On-surface text is a near-black (#1a1a1a) for maximum legibility; on-surface-variant (#666666) is used for secondary text and disabled states. The outline color (#d0d0d0) defines borde

Typography

The typography system uses a single typeface family, DM Sans (weights 400 and 600), to reinforce visual unity and technical clarity. DM Sans is a geometric sans-serif with clean, rational proportions—no serifs, no flourishes—making it ideal for industrial and technical contexts. The hierarchy is built on weight contrast and size progression: Display (56px, weight 600) for hero statements; Headline-lg (32px, weight 600) for major sections; Headline-md (24px, weight 600) for subsections; Body-lg (18px, weight 400) for primary content; Body-md (16px, weight 400) for standard text; Label-md (14px, weight 600) for UI labels and buttons; Label-sm (12px, weight 500) for secondary labels and hints. Letter-spacing is minimal (0em to 0.03em) to maintain density and precision. Line-height is set to u

Layout

The layout follows a centered, single-column model optimized for focus and clarity. The container has a max-width of 600px, centered within the viewport using flexbox (display: flex; justify-content: center; align-items: center; min-height: 100vh). This ensures the security verification message is the sole focal point, eliminating cognitive load from competing UI elements. Padding is set to 20px on the body to provide breathing room on mobile devices. The spacing scale is semantic: unit (8px) as the base increment, with sm (12px), md (24px), lg (40px), and xl (64px) for progressively larger separations. The spinner is positioned 32px above the heading (margin: 0 auto 32px), the heading is 16px above the body text (margin-bottom: 16px), creating a clear visual rhythm. On tablets and mobile

Elevation & Depth

Elevation is conveyed through subtle shadows and layering rather than dramatic depth. The design system uses three shadow levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift on interactive elements; md (0 3px 8px rgba(0, 0, 0, 0.15)) for dropdown panels and modals; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating dialogs. The primary visual hierarchy is achieved through the spinner's animation (spin 1s linear infinite) and color contrast rather than shadow depth. Dropdown panels use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px solid border at #d0d0d0 to create a subtle separati

Shapes

The shape philosophy is 'Geometric Precision'—favoring clean, rational curves that feel engineered rather than organic. Border-radius is used sparingly and intentionally: full (9999px) for the spinner circle (border-radius: 50%) to create a perfect geometric form; DEFAULT (0.5rem / 8px) for dropdown panels and select containers, providing subtle rounding without softness; sm (0.25rem / 4px) for minor UI elements like form inputs. The spinner's circular form is the primary shape motif, reinforcing the brand's focus on precision and rotation (relevant to roll-forming machinery). Buttons and inte

Components

Loading & Feedback The spinner-circle component is the visual anchor of the security verification flow. It measures 64px × 64px with a 4px border, using a two-tone border technique: border-color: #e5e4ff (primary-container, the static ring) and border-top-color: #6366f1 (primary, the animated arc). The animation is spin 1s linear infinite, rotating 360 degrees continuously. On mobile (max-width: 480px), the spinner reduces to 48px with a 3px border to maintain visual proportion. The spinner-circle-mobile variant applies these mobile dimensions as a separate component entry for clarity.

Typography & Messaging The heading-primary component uses Headline-md (24px, weight 600, line-height 1.4) in on-surface color (#1a1a1a) with margin-bottom: 16px for spacing. The heading-domain varia

Do's and Don'ts

**Do**

• Do use the Indigo primary (#6366f1) exclusively for interactive focus states, loading indicators, and CTAs—never for backgrounds or body text.
• Do maintain the centered, single-column layout with max-width: 600px to keep the user's attention focused on the security verification message.
• Do apply DM Sans at weights 400 (body) and 600 (headings/labels) only; avoid intermediate weights to maintain visual clarity.
• Do use the soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) on dropdown panels and modals to create subtle depth without visual noise.
• Do scale the spinner responsively: 64px on desktop, 56px on tablets, 48px on phones, maintaining the 4px border width on desktop and reducing to 3px on mobile.

**Don't**

• Don't introduce additional accent colors or gradients; the palette is intentionally monochromatic with a single Indigo accent.
• Don't use border-radius greater than 1rem (16px) on utilitarian UI elements; excessive rounding contradicts the technical aesthetic.
• Don't apply heavy shadows (lg or greater) to standard UI; reserve lg shadows only for floating dialogs or modals.
• Don't mix typefaces or use system fonts; DM Sans is the sole typeface family across all components.
• Don't add decorative elements, icons, or illustrations to the security verification page; the spinner and text are sufficient.