Entellus Industries

Overview

Entellus Industries operates as a B2B industrial platform serving the rare-earth metal and alloy supply chain. The design system embodies Architectural Minimalism—a movement that prioritizes structural clarity, industrial authenticity, and data-driven precision over decorative flourish. The brand evokes trust through restraint: clean white surfaces (rgb(255, 255, 255)), deep forest-green accents (rgb(27, 54, 35)), and measured typography in Lato and Avenir. The UI communicates competence and reliability, reflecting the technical rigor of metallurgical processing. Users encounter a calm, professional environment where information hierarchy is paramount and every visual element serves a functional purpose.

The voice is direct, technical, and confident—never casual or promotional. Entellus speaks in precise specifications, process documentation, and supply-chain logistics. Example sentence: 'Our integrated NdFeB alloy production achieves 99.2% purity through multi-stage thermal processing at 1,200°C.' The brand personality is industrial-pragmatic: it respects the user's time, avoids jargon inflation, and presents data as the primary narrative medium.

Colors

The color system is anchored in a deep forest green primary (#1b3623, rgb(27, 54, 35)) deployed on all primary CTAs ('TALK TO US'), navigation highlights, and interactive focus states. This green is not decorative—it signals industrial authority and sustainability commitment, appearing on the hero button with 900-weight typography at 15px. Secondary green (#4c6656, rgb(76, 102, 86)) supports secondary actions and container backgrounds, creating a monochromatic hierarchy that avoids visual noise. Tertiary blue (#3898ec, rgb(56, 152, 236)) is reserved for data visualization, status indicators, and secondary information layers—it appears sparingly to maintain focus on primary green interactions. The surface stack uses near-white and light grays: surface (#ffffff), surface-container-low (#efef

Typography

The type system uses Lato for all headlines (display, headline-lg, headline-md, title-lg) and Avenir/Arial for body and label text, creating a two-family hierarchy that signals hierarchy through both form and weight. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections; headline-lg (40px, 700 weight) is used for page titles like 'Building the midstream of a diversified rare earth supply chain'; headline-md (28px, 600 weight) breaks content sections; title-lg (20px, 600 weight) labels subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs; body-md (16px, 400 weight, 24px line-height) is the default paragraph text. Label-md (15px, 900 weight, 0.02em letter-spacing) is applied exclusively to primary CTAs to create visual weight and ur

Layout

The layout uses a 12-column grid with a max-width of 1280px (container-max-width: 1280px), centered via margin: auto. Desktop container widths are 991px and 940px depending on section context. The gutter (horizontal padding) is 24px on desktop, reducing to 16px on tablet and 12px on mobile. Section separation uses lg spacing (40px) for major content breaks and md spacing (24px) for subsection rhythm. The hero section spans full-width with a background image (industrial facility photograph), overlaid with a semi-transparent white container holding the headline and CTA. Content flows in a single-column layout on mobile, expanding to 2–3 columns on desktop for card grids. Whitespace is generous: paragraphs are separated by 24px, card stacks use 40px vertical rhythm. The navigation header uses

Elevation & Depth

Depth is conveyed through subtle box-shadow layering and border definition rather than color darkening. Level 1 (Base): flat white surface (rgb(255, 255, 255)) with no shadow, used for primary content areas and the page background. Level 2 (Card/Container): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and lifted containers; paired with a 1px solid border at rgba(0, 0, 0, 0.1) to define edge. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used on card-hover and modal overlays to signal interactive lift. The shadow blur radius increases with elevati

Shapes

The shape philosophy is Soft-Technical: rounded corners are minimal and purposeful, reflecting industrial precision while maintaining approachability. The rounded scale uses DEFAULT (0.5rem / 8px) for buttons, inputs, and small containers—a subtle curve that softens hard edges without appearing playful. Cards and larger containers use md (0.75rem / 12px) for slightly more breathing room. Modals and elevated surfaces use lg (1rem / 16px). The full (9999px) radius is reserved for badges and pill-shaped elements. Buttons specifically use rounded.DEFAULT (8px) with padding 13.6px 24px, creating a

Components

Action Elements Primary buttons use {colors.primary} (rgb(27, 54, 35)) with {colors.on-primary} text (white), label-md typography (15px, 900 weight), and padding 13.6px 24px. Height is 48px to ensure touch-target compliance. On hover, background shifts to {colors.primary-container} (rgb(43, 75, 44)) with a 0.2s ease transition. The 'TALK TO US' CTA on the hero uses this style with uppercase text-transform and 0.02em letter-spacing for maximum visual weight. Secondary buttons use {colors.secondary} (rgb(76, 102, 86)) with white text, body-md typography, and padding 8px 16px at 40px height. Hover state shifts to {colors.secondary-container} (rgb(108, 142, 122)). Ghost buttons (outline-only) use transparent background with {colors.primary} text and a 1px border at {colors.primary}; on hov

Do's and Don'ts

**Do**

• Do use {colors.primary} (#1b3623) exclusively for primary CTAs and interactive focus states to maintain a consistent call-to-action hierarchy.
• Do apply label-md typography (15px, 900 weight, 0.02em letter-spacing) to all primary buttons to create visual urgency and weight.
• Do maintain the 24px gutter and 40px section spacing (lg) to ensure generous whitespace and prevent cognitive overload on data-heavy pages.
• Do use Lato for all headlines and Avenir/Arial for body text to create a clear typographic hierarchy that signals information priority.
• Do apply 0.2s ease transitions on all interactive elements (buttons, cards, inputs) to provide smooth, predictable feedback without jarring motion.
• Do use the full rounded scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, full: 9999px) consistently—never mix arbitrary border-radius values.

**Don't**

• Don't use tertiary blue (#3898ec) on primary CTAs; reserve it for secondary data visualization and status indicators only.
• Don't apply shadows stronger than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) or use blur radius > 24px, as this undermines the industrial aesthetic.
• Don't use rounded corners > 16px on cards or containers; the Soft-Technical philosophy requires restraint to maintain credibility.
• Don't mix Lato and Avenir in the same headline or body paragraph; maintain strict family separation between display and body text.
• Don't reduce letter-spacing below -0.04em on headlines or increase it above 0.05em on labels, as this breaks the typographic rhythm.
• Don't apply opacity < 0.5 to disabled states or use color-only differentiation for error states; always pair with a 1px border or icon indicator.