Nfinite

Overview

Nfinite is a sustainable-technology brand that transforms industrial packaging through ultra-high barrier, fully recyclable paper solutions. The design system embodies "Warm Minimalism"—a fusion of natural, approachable color palettes (cream #fffaf6, soft blues #8ab4fc, #71cbe1) with precise, technical typography and clean geometric layouts. The aesthetic evokes trust, innovation, and environmental responsibility: every interface element is intentional, every interaction feels purposeful. The brand serves B2B packaging engineers, sustainability officers, and forward-thinking manufacturers who demand both performance data and reassurance that their choice matters. Voice: confident, precise, never corporate-speak. Example: "Our barrier structure matches 5-layer plastic film. Recycle it curbside."

Colors

The color system balances warmth with technical clarity. Primary (#8ab4fc, a soft sky blue) is used for all interactive CTAs, links, and focus states—it signals actionability without aggression. Secondary (#71cbe1, a deeper teal) provides hover and active states, creating a cohesive cool-tone family that evokes water and sustainability. Tertiary (#3080ff, a vibrant cobalt) is reserved for alerts, badges, and secondary actions. The surface stack uses a warm cream base (#fffaf6) to evoke natural paper, with container layers stepping through grays (#e9e2d2, #ddd9ce) to create subtle depth without harsh contrast. On-surface text is near-black (#0f131a) for maximum legibility on light backgrounds. Error states use a muted red (#eb5757) with a soft container (#fde8e8). All interactive elements u

Typography

The type system uses a single typeface family (mainFont with fallback) across all scales, reinforcing brand cohesion and technical precision. Display (60px, 700 weight, -0.02em tracking) is reserved for hero headlines and major section titles, commanding attention without excess. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content hierarchy, with tighter letter-spacing (-0.01em) on larger sizes to maintain visual balance. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) provide readable paragraph text with generous line-height for accessibility. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are used for UI labels, form fields, and metadata. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) on small lab

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on viewport. Gutter spacing is 24px between columns, with 24px margin on left/right edges on desktop (reducing to 16px on tablet, 12px on mobile). Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for related items within a section. The hero section spans full-width with a semi-transparent overlay (rgba(0, 0, 0, 0.3)) over a background image, ensuring text legibility. Cards and containers use md padding (24px) internally, with sm spacing (12px) between card elements. White-space is generous—avoid cramping; let breathing room emphasize content importance. Container-max-width of 1280px ensures readability on ultra-wide displays without line-length e

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle layering. Level 1 (Base): surface background (#fffaf6) with no shadow. Level 2 (Cards, inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), border: 1px solid {colors.surface-variant}. Level 3 (Modals, elevated cards on hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), border: 1px solid {colors.outline-variant}. Shadows use warm black (rgba(0, 0, 0, 0.15)) rather than pure black to harmonize with the warm cream palette. No blur-based glassmorphism; instead, rely on solid backgrounds with high contrast borders. Hover states transit

Shapes

The shape philosophy is "Soft Technical"—rounded corners are present but restrained, reflecting both approachability and precision. Buttons use md radius (0.75rem / 12px), creating a friendly, clickable appearance without excessive roundness. Cards and containers use lg radius (1rem / 16px) for a softer, more inviting feel. Input fields use DEFAULT radius (0.5rem / 8px), balancing form-field convention with brand warmth. Badges and pills use full radius (9999px) for maximum approachability. Modals and overlays use xl radius (1.5rem / 24px) to signal elevation and importance. Avoid sharp corner

Components

Action Elements Buttons are the primary call-to-action vehicle. button-primary uses {colors.primary} (#8ab4fc) background with {colors.on-primary} text, 44px height, 12px 24px padding, and md radius (12px). On hover, shift to {colors.secondary} (#71cbe1) with a 200ms transition. button-secondary uses a transparent background with a 1px border in {colors.primary}, same padding and height, for secondary actions like "Learn More" or "View Specs". Links use {colors.primary} text with no underline by default; on hover, add a 1px bottom border in {colors.secondary} and transition over 150ms. All interactive elements must have a visible focus state: box-shadow: 0 0 0 3px rgba(138, 180, 252, 0.1) for primary elements.

Containers & Surfaces Cards are the primary content container. Use {col

Do's and Don'ts

**Do**

• Do use {colors.primary} (#8ab4fc) exclusively for primary CTAs and interactive focus states—it is the signature accent and must remain visually distinct.
• Do maintain generous white-space: minimum {spacing.md} (24px) between major sections, {spacing.sm} (12px) between related items.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and elevated surfaces; never use flat design without shadow or border definition.
• Do use the warm cream surface (#fffaf6) as the primary background; it evokes natural paper and differentiates from cold tech aesthetics.
• Do transition all interactive state changes over 150–200ms using ease-in-out timing; avoid instant state shifts.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; stick to {colors.on-surface} (#0f131a) and {colors.surface} (#fffaf6).
• Don't apply multiple shadows or blur effects to a single element; rely on a single, clean shadow from the elevation scale.
• Don't mix rounded-corner styles within a single component family (e.g., don't use both DEFAULT and lg radius on buttons in the same section).
• Don't use {colors.primary} for body text or non-interactive elements; reserve it exclusively for CTAs, links, and focus indicators.
• Don't exceed 75 characters per line in body text; use the container-max-width constraint and generous line-height (28px for body-lg, 24px for body-md) to maintain readability.