AuditLens

Overview

AuditLens is an AI-powered compliance workspace designed for security teams managing ISO 27001:2022 certification. The brand embodies 'Warm Technical Minimalism'—a design philosophy that combines the precision and clarity of enterprise software with the approachability and energy of consumer products. The visual language uses a vibrant orange-and-navy palette to convey both trust (navy) and forward momentum (orange), creating an interface that feels simultaneously authoritative and optimistic. Users should feel that complex compliance work is not only manageable but genuinely achievable.

The tone is direct, confident, and human-centered. AuditLens speaks to security professionals as peers, avoiding jargon when possible and explaining technical concepts with clarity. The brand personality is solution-focused: every interaction should move the user closer to audit readiness. Example sentence in brand voice: 'Your 93 controls are mapped, your evidence is collected, and your audit trail is tamper-proof—you're ready.'

Colors

The color system is built on two primary brand axes: Orange (#f15622) and Navy (#234668). Orange is the accent and call-to-action color, used sparingly on buttons, links, and highlights to draw attention to key interactions. Navy is the primary text and secondary button color, establishing trust and authority. The palette is completed by a carefully calibrated surface stack (white to light gray) that provides visual hierarchy without introducing unnecessary colors.

Orange (#f15622) is reserved for primary CTAs ('Join Waitlist', 'Book a Demo'), hover states, and accent elements like badges and icons. Navy (#234668) anchors the interface as the main text color (rgb(26, 26, 26) on white), secondary buttons, and navigation links. The surface stack ranges from pure white (#ffffff) for the main

Typography

The type system uses Poppins exclusively, a geometric sans-serif that balances warmth with technical precision. Display (72px, 700 weight, -0.02em tracking) is reserved for hero headlines like 'ISO 27001:2022 Run on Autopilot'; Headline-lg (40px, 700 weight) for section titles; Headline-md (28px, 600 weight) for subsections. Body text is set in two weights: Body-lg (18px, 400 weight, 28px line-height) for introductory paragraphs and Body-md (16px, 400 weight, 24px line-height) for standard body copy. Labels use Label-md (14px, 600 weight, 20px line-height) for button text and form labels, with Label-sm (12px, 500 weight) for badges and secondary metadata. All headlines use tight tracking (-0.01em to -0.02em) to reinforce their weight and authority. For small labels over busy backgrounds or

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered with mx-auto. The gutter is 24px on desktop, reducing to 16px on tablets and 12px on mobile. Sections are separated using lg spacing (40px) for major breaks and md spacing (24px) for minor groupings. The hero section uses a full-bleed background with absolute-positioned gradient blobs (backdrop-filter: blur(80px to 120px)) to create depth without heavy shadows. The navigation bar is fixed at the top with a frosted-glass effect (backdrop-filter: blur(12px), background: rgba(255, 255, 255, 0.6), border: 1px solid rgba(255, 255, 255, 0.5)). Container padding is consistent: 24px on desktop, 16px on tablet, 12px on mobile. White-space is generous around CTAs and key messaging; avoid cramping text or buttons. The spacing scale

Elevation & Depth

Depth is achieved through a combination of subtle shadows and layered backgrounds rather than heavy drop-shadows. Level 1 (Base): white background (#ffffff) with no shadow. Level 2 (Cards & Containers): surface-container-lowest (#f0f2f5) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08). Level 3 (Modals & Elevated Surfaces): white background with box-shadow: 0 40px 100px -20px rgba(35, 70, 104, 0.18)—a larger, softer shadow that suggests greater distance. The navigation bar uses a frosted-glass effect with backdrop-filter: blur(12px) and a 1px border at rgba(255, 255, 255, 0.5) to create a layer

Shapes

The shape system follows 'Soft-Technical Precision': rounded corners are used to soften the interface without sacrificing clarity. Buttons and primary CTAs use lg radius (1rem / 16px) for a friendly, approachable feel. Cards and containers use xl radius (1.5rem / 24px) for a more generous, open appearance. Form inputs use DEFAULT radius (0.5rem / 8px) for a compact, functional look. Badges and pills use full radius (9999px) for maximum softness. The rationale: larger radius on interactive elements (buttons, cards) encourages engagement; smaller radius on inputs maintains visual hierarchy and s

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use orange (#f15622) with white text, 16px Label-md weight, 48px height, 16px 32px padding, and lg radius (16px). On hover, the background darkens to #d8481b and the shadow expands from 0 10px 30px -18px to 0 14px 40px -18px rgba(241, 86, 34, 0.85), with a 150ms cubic-bezier(0.4, 0, 0.2, 1) transition. Secondary buttons use navy (#234668) with white text and the same dimensions; on hover, darken to #1c3954. Ghost buttons have a transparent background with a 2px border in secondary-container (#eef3f8) and navy text; on hover, fill with primary-container (#fff3ee) and maintain the border. All buttons include a 4px gap between icon and text when both are present.

Containers & Surfaces Cards use surface-conta

Do's and Don'ts

**Do**

• Do use orange (#f15622) exclusively for primary CTAs and key interactive elements—it's the brand's signature accent and should never be diluted or overused.
• Do maintain consistent 24px gutter spacing on desktop and reduce proportionally on mobile (16px tablet, 12px mobile) to preserve visual rhythm.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small labels (Label-sm) when placed over gradients or busy backgrounds to ensure legibility.
• Do use the full Poppins weight range (300–800) but limit headlines to 600–700 weight and body text to 400–500 weight for clarity.
• Do layer components using the three-level shadow system: no shadow for base, md shadow for cards, lg shadow for modals—never mix shadow scales.

**Don't**

• Don't use orange for body text, backgrounds, or non-interactive elements—reserve it for CTAs, links, and highlights only.
• Don't apply border-radius: 0px to buttons, cards, or inputs; minimum is DEFAULT (8px) for inputs, lg (16px) for buttons.
• Don't mix Poppins with other typefaces in the same component; the system is monofamily by design.
• Don't stack multiple box-shadows on a single element; use one shadow per layer and transition smoothly on state changes (150–200ms).
• Don't use navy (#234668) and orange (#f15622) together in text; they create visual noise—use navy for primary text and orange for accents only.