Linn Aqua Technology

Overview

Linn Aqua Technology is a 50+ year legacy industrial equipment manufacturer specializing in fish farming systems, serving aquaculture operations across Europe and globally. The design system embodies 'Technical Clarity'—a philosophy that marries industrial precision with aquatic heritage, using a distinctive teal-and-navy palette to evoke water, trust, and engineering excellence. The UI conveys authority without coldness: every interaction feels purposeful, every surface communicates function. The brand personality is direct, knowledgeable, and solution-oriented—speaking to facility managers and engineers who value efficiency and reliability. Voice example: 'Our aeration systems deliver 40% better oxygen transfer than competitors—proven across 200+ installations.'

Colors

The color system is anchored by Primary Teal (#00b0ea), the signature accent used on all CTAs, links, and interactive focus states—it represents water clarity and technological precision. Secondary Navy (#00506b) grounds headlines and structural elements, evoking depth and stability. Tertiary Cyan (#008ab8) is reserved for secondary actions and status indicators, creating visual hierarchy without competing with primary. The surface stack progresses from pure white (#ffffff) for content areas through grays (#f9f9f9, #eee, #ced5d9, #bcc1c7) for containers and dividers, ensuring legibility on industrial dashboards and product pages. Error red (#b73400) is used sparingly for warnings and validation failures. All interactive elements use the primary teal on hover/focus with a 200ms transition (

Typography

The type system uses Inter exclusively, a geometric sans-serif that balances technical clarity with approachability. Display (73.8px, weight 850) anchors hero sections with maximum impact; Headline-lg (40px, weight 700) structures major sections; Body-md (16.4px, weight 400) ensures readability at standard viewing distance with 24px line-height. Labels use weight 600 at 14px for button text and form fields, with 0.01em letter-spacing to maintain crispness at small sizes. Headlines apply -0.02em to -0.04em letter-spacing to tighten visual weight and convey confidence. On small labels over busy backgrounds (e.g., badges on product cards), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure contrast. Font-weight 850 is reserved for display-level hero text only; all other headings use 70

Layout

The layout uses a 12-column grid with a fixed max-width of 1400px, centered on viewport. Sections are separated by lg spacing (40px) vertically and gutter spacing (24px) horizontally, creating rhythm that accommodates both dense product tables and breathing room for hero imagery. Container widths adapt: hero sections span full-width with 24px side padding on mobile, product grids use 3–4 columns on desktop with 30px gutter between items. The page rhythm alternates between full-bleed hero (teal gradient background with water imagery), white content sections (product listings, feature cards), and navy-accented call-to-action blocks. Whitespace is intentional: body copy uses 2rem bottom margin (matching Bootstrap defaults), and card padding is consistently {spacing.md} (24px) to create visual

Elevation & Depth

Depth is achieved through a three-tier shadow system: Level 1 (sm, 0 1px 2px rgba(0,0,0,0.06)) for subtle dividers and disabled states; Level 2 (md, 0 3px 8px rgba(0,0,0,0.15)) for standard cards and modals; Level 3 (lg, 0 0.5rem 1rem rgba(0,0,0,0.15)) for elevated overlays and sticky headers. Cards use md shadows by default and transition to lg on hover with a 200ms ease-in-out animation. The hero section uses a full-bleed background image with a semi-transparent teal overlay (rgba(0, 80, 107, 0.4)) to ensure text legibility while maintaining water imagery. No glassmorphism or blur effects ar

Shapes

The shape philosophy is 'Technical Minimalism'—rounded corners are used sparingly and purposefully to soften industrial edges without sacrificing clarity. Buttons use 8px border-radius (md) for a modern, approachable feel; form inputs use 4px (DEFAULT) for a tighter, more technical appearance. Cards use 1rem (lg) for a softer container aesthetic on product pages, while data tables and dense lists use 3px (sm) to maintain a compact, utilitarian look. The full (50%) radius is reserved for circular badges and icon containers. This graduated approach signals function: tighter radii = technical/den

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use {colors.primary} (#00b0ea) background with white text, 12px horizontal padding, 44px height, and 8px border-radius. On hover, background shifts to #008dbb with a 200ms transition. Secondary buttons are transparent with a 1px primary-colored border and primary text; on hover, they fill with {colors.primary-container} (light cyan, #cce8f1). Tertiary buttons use {colors.tertiary} (#008ab8) for secondary actions like 'Configure' or 'Request Quote'. All buttons apply font-weight: 600 and use {typography.label-md} for consistency.

Containers & Surfaces Cards are the primary container for product listings, features, and testimonials. Standard cards use white background (#ffffff), 1rem border-radius, 24px pad

Do's and Don'ts

**Do**

• Do use Primary Teal (#00b0ea) exclusively for CTAs, links, and focus states—it is the visual anchor of the brand and must remain consistent across all touchpoints.
• Do apply 24px (md spacing) padding to all cards and containers; this creates visual rhythm and ensures content breathing room on dense product pages.
• Do use weight 700 for all headlines and weight 600 for labels/buttons; weight 850 is reserved for display-level hero text only to avoid visual fatigue.
• Do transition all interactive states (hover, focus, active) over 200ms with ease-in-out timing; instant changes feel jarring in industrial interfaces.
• Do maintain the 1400px container max-width and 12-column grid structure; this ensures responsive consistency from mobile (single column) to desktop (multi-column layouts).

**Don't**

• Don't use Secondary Navy (#00506b) as a background color for large areas; it is a headline and structural color only. Use white or light grays for content backgrounds.
• Don't apply shadows larger than lg (0 0.5rem 1rem rgba(0,0,0,0.15)); deeper shadows create visual clutter on industrial dashboards and product comparison tables.
• Don't mix border-radius values within a single component family (e.g., buttons at 8px and 4px in the same form); consistency signals polish and reduces cognitive load.
• Don't use letter-spacing tighter than -0.04em on headlines; it reduces legibility and conflicts with Inter's geometric proportions.
• Don't apply color transitions to text elements; only use transitions on backgrounds, borders, and shadows to maintain readability during interaction.