inlin · Design System v1.2

01 Color System

All tokens live in shared.css :root. Never hard-code values — always reference variables.

Brand Palette

--gold

#d4a843

Primary accent. Buttons, eyebrows, highlights, borders on focus.

--magenta

#e040a0

Secondary accent. Hero subtitles, partner program callouts.

--aluminum

#7bb3c8

Material accent. Hero eyebrow, technical spec labels.

--gold-l

#e8c460

Gold hover state. Button active, interactive gold tint.

Backgrounds

--void

#0a0a09

Primary background. Page base, near-black.

--deep

#0f0f0e

Section alternate. Marquee, advantage cards base.

--navy

#1a2d3e

Warm dark sections. System specs, About, Footer.

--navy-l

#243d52

Card hover, elevated panels on navy background.

Text Hierarchy

--text

rgba(255,255,255,0.88)

Primary text. Body paragraphs, card content.

--text-m

rgba(255,255,255,0.60)

Secondary text. Descriptions, nav links default.

--text-s

rgba(255,255,255,0.38)

Tertiary / labels. Spec table keys, timestamps.

--rim

rgba(255,255,255,0.08)

Borders, dividers, grid lines.

02 Typography System

Three typefaces with distinct roles. Each referenced via CSS variable for consistent application.

Font Families

DM Serif
Display

--display

Logo, page titles, section headings, hero tagline, data stats. Italic for gold accents.

Barlow
Condensed

--body-font

Nav links, buttons, tags, advantage titles, step labels, body paragraphs.

DM Mono
Labels / Code

--mono

Eyebrows, spec table keys, section numbers, copyright, token names.

Level

Sample

Context

Hero Logo

DM Serif 400
clamp(80px,14vw,160px)
line-height 0.9

inlin

Single use per page. Logo mark in nav (30px) and hero (fluid).

Section H2

DM Serif 400
clamp(36px,5vw,58px)
line-height 1.05

Zero Risk.
Maximum Margin.

All major section titles. Italic + gold for emphasis word.

Eyebrow

DM Mono 500
11px · 0.22em tracking
uppercase · gold

Strategic Advantage

Always precedes H2. Gold bar prefix via ::before. Letter-spacing 0.22em.

Button

Barlow Condensed 700
12px · 0.14em tracking
uppercase

Primary CTA Secondary

All CTAs and navigation. Never lowercase. Tracking 0.14em minimum.

Body Text

Barlow Condensed 400
14–16px · 1.85 leading

Born from industrial rigor and refined for luxury living, our modular architecture empowers infinite possibilities.

Paragraphs, advantage cards, step descriptions. Color --text-m.

Mono Label

DM Mono 500
9–11px · 0.18em tracking
uppercase · --text-s

// SPEC · PARAMETER
6063-T5 · LEED READY

Token names, spec table keys, section sub-labels, code blocks.

03 Spacing System

8px base grid. All values are multiples of 4 or 8. Referenced via --sp-N variables.

--sp-14px

Icon inner gap, tag padding

--sp-28px

Inline label gap, small icon margin

--sp-312px

Eyebrow margin-bottom, list item gap

--sp-416px

Form group gap, card inner small

--sp-520px

Card inner standard padding

--sp-624px

Card padding (standard), section sub-group

--sp-832px

Nav gap, card padding (wide)

--sp-1040px

Scenario tabs margin, stat-strip offset

--sp-1248px

Section px horizontal padding (desktop)

--sp-1664px

Between-header gap, footer column spacing

--sp-2080px

Footer top padding, large module gaps

--sp-28112px

Section vertical padding (all major sections)

04 Layout System

Max content width 1280px. Horizontal padding 48px desktop / 20px mobile. Single-page anchor scroll.

Page Structure

NAVfixed · 72px · z-index 200 · glass on scroll

HERO#hero · min-height 100vh · void background + grid texture · animated stats

MARQUEEcontinuous ticker · border top/bottom

WHY#why · deep background · 5-card grid + stats strip

SCENARIOS#scenarios · void background · 3-col scenario grid

SYSTEM#system · navy background · 2-col layout + SVG profiles

PARTNERS#partners · void background · comparison table + 4 steps

MANIFESTOgold strip · full-width italic tagline

ABOUT#about · navy background · 2-col: brand story + contact form

Responsive Breakpoints

Desktop

> 1100px

Full layout. 5-col advantage grid. 3-col scenario grid. 4-col footer. px: 48px.

Tablet

768px – 1100px

3-col advantage. 2-col system. 2-col footer. px: 32px. Steps 2×2 grid.

Mobile

≤ 768px

Single column. Hamburger nav. 1-col form. 2-col scenario. px: 20px.

05 Components

All reusable UI elements with their exact specifications and interaction states.

Buttons

Become a Partner Hover State Explore Scenarios Hover State Nav CTA

btn-primary: background --gold, color --void, hover → --gold-l, padding 15px 38px, no border-radius.
btn-ghost: transparent, border rgba(255,255,255,0.30), hover → border+text --gold, translateY(-2px).
nav-cta: border --gold, color --gold, hover → filled. Font Barlow Condensed 700, 11–13px, tracking 0.14em.

Tags & Eyebrow

LEED Ready 6063-T5 Zero Formaldehyde

Strategic Advantage

.tag: DM Mono 500, 10px, gold color + gold-bg fill, rim-gold border, tracking 0.14em.
.eyebrow: DM Mono 500, 11px, --gold, 28px gold bar ::before, tracking 0.22em, uppercase.

Navigation

inlin Why inlin Scenarios Become a Partner

Fixed top, z-index 200. Transparent until scrollY > 40px → glass blur(24px) + rim border. Mobile: hamburger → full-screen overlay menu with DM Serif links.

Advantage Card

01

🔩

10-Year Warranty

6063-T5 aerospace alloy. Structural integrity that outlasts trends.

HOVER STATE

background → gold-bg (rgba 0.04). Top border scaleX(0→1) on hover. Transition 0.3–0.4s ease.

DEFAULT STATE

No top border. Grid gap 1px, outer background --rim to create hairline grid effect.

Scenario Card

01

Living Room

Vessel of Light

Hover: scale(1.06) on .scenario-bg · filter brightness(0.42→0.55) · subtitle opacity 0→1 translateY(8px→0)

Aspect ratio 3/4 portrait. Grid gap 2px, outer background rim-gold creates seam. Filter tabs: All / Residential / Commercial.

06 Motion & Animation

All animations serve a purpose: reveal, feedback, or flow. No decoration-only motion.

Scroll Reveal — .fade-up

IntersectionObserver threshold 0.08. opacity 0→1 + translateY(40px→0). Duration 0.75s ease-out. Staggered delay: i × 90ms.
Applied to: section titles, advantage cards, steps, spec tables, form.

Counter Animation — [data-count]

IntersectionObserver threshold 0.5. Easing: 1-(1-t)³ (ease-out cubic). Duration 1800ms. Triggers once on first visibility.
<span data-count="50" data-suffix="%"> — prefix, suffix, and float decimal supported.

Marquee — .marquee-inner

CSS animation: translateX(0 → -50%) 28s linear infinite. Content doubled by JS for seamless loop. Pauses on prefers-reduced-motion.

Easing Tokens

--ease

cubic-bezier(0.4,0,0.2,1)
Material standard. Hover transitions.

--ease-out

cubic-bezier(0,0,0.2,1)
Scroll reveals, elements entering.

--ease-in

cubic-bezier(0.4,0,1,1)
Elements exiting (rare use).

07 Design Principles

Every visual decision should be defensible against these principles.

✓ DO — Editorial Lightness (v1.2)

Use warm off-white (#f5f3ef) as the primary page canvas. Gold accents gain legibility and warmth against the light ground. Hero sections and footer retain dark navy as the brand anchor — this contrast defines the hierarchy.

✗ DON'T — Dilute the Palette

Do not add accent colors beyond gold, magenta, and aluminum. Avoid pure white (#ffffff) for full-page backgrounds — the warm off-white tint is deliberate and part of the brand identity. Pure white reads clinical.

✓ DO — Typography Discipline

DM Serif Display for headlines only. Barlow Condensed for all UI. DM Mono for labels, specs, and code. Never mix display typeface into body paragraphs or navigation.

✗ DON'T — Round Corners

No border-radius on cards, buttons, or panels (0 or 2px maximum). The square-edge aesthetic is core to the industrial aluminum brand identity. Rounded UI signals consumer-grade softness.

✓ DO — Grid Texture

Use the CSS grid pattern (1px hairline lines, 80px spacing) on hero and cover backgrounds at very low opacity (0.032 on light, 0.025 on dark). This reinforces the precision modular system concept throughout.

✗ DON'T — Dark Sections Inside Light Pages

Only the hero, footer, and branded cover panels may use dark navy backgrounds. All content sections (Why, Scenarios, System, Partners, Contact) must use light backgrounds — consistency is legibility.

✓ DO — One Italic Per Heading

Each section H2 may have one word or phrase in italic DM Serif Display with gold color. This is the brand signature typographic move. Limit to one per heading — never two.

✗ DON'T — Oversell with Text

Descriptions should be under 40 words. Trust the visual system and the specificity of the data (10Y, 50%, 6063-T5) to do the heavy persuasion. Long paragraphs undermine the premium positioning.

08 CSS Variables Reference

Complete :root declaration — light theme (v1.2). Defined in shared.css, page-level overrides in each file's <style> block.

:root {
  /* — Backgrounds — */
  --void:       #f5f3ef;     /* page base, warm off-white */
  --deep:       #edeae4;     /* alternate section bg */
  --navy:       #1a2d3e;     /* footer, persistent dark accent */
  --panel:      #ffffff;     /* cards, form inputs */

  /* — Brand Colors — */
  --gold:       #b08018;     /* primary accent (light-theme adjusted) */
  --gold-l:     #c49820;     /* hover state */
  --gold-d:     #8a6010;     /* dark variant */
  --gold-bg:    rgba(176,128,24,0.07);
  --magenta:    #b81870;     /* secondary accent */
  --aluminum:   #4a8fa8;     /* material accent */

  /* — Text (WCAG AA compliant on #f5f3ef) — */
  --text:       rgba(20,16,10,0.86);   /* ~9:1 ratio */
  --text-m:     rgba(20,16,10,0.68);   /* ~6.2:1 ratio ✓ AA */
  --text-s:     rgba(20,16,10,0.60);   /* ~4.7:1 ratio ✓ AA */

  /* — Borders — */
  --rim:        rgba(0,0,0,0.09);
  --rim-gold:   rgba(176,128,24,0.32);
  --rim-m:      rgba(0,0,0,0.14);

  /* — Typography — */
  --display:    'DM Serif Display', Georgia, serif;
  --body-font:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono:       'DM Mono', 'Courier New', monospace;

  /* — Layout — */
  --max-w:      1280px;
  --px:         48px;
  --nav-h:      72px;

  /* — Motion — */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
}

inlin Brand Visual Design Specification