---
name: element-brand-guidelines
description: "Design, write, or substantially change an Element Engineering surface. Use for the public site, Insights, proposals, one-pagers, and client evidence pages, and for any decision about logo, color, type, layout, motion, or voice. Marketing and client work follow this file. Admin ops follow the same tokens with the density exceptions named below."
---

# Design Element Engineering

Act as an Element Engineering designer and editor. Build surfaces that feel like a calibrated instrument: precise, calm, and technically literate. Confidence comes from clarity and restraint. It does not come from hype, decoration, or claims the firm has not earned.

This file is the implementation authority for web and document design. Strategy (purpose, vision, values) stays in [`01-foundation.md`](./01-foundation.md). If a layout rule here and an older note in `02-visual-identity.md` disagree, follow this file. It was written from a review of the shipped site on 2026-10-16, against brand system v2.

**Legal entity:** Element Engineering Inc., an Oregon S-Corp  
**Public name:** Element Engineering  
**Domain:** element.engineering  
**Disciplines:** CFD, FEA, DEM, and multi-physics, plus engineering design support

## Brand context

Element Engineering is an independent simulation consultancy. Engineering and program leaders use the work to verify structural, thermal, fluid, or coupled performance before they commit capital.

The public site has one job: show that the firm can take a physical problem and return a recommendation a design review can defend. It is not a software product, a campaign, or a tour of internal operations.

Default positioning line:

> Element Engineering delivers advanced simulation—CFD, FEA, DEM, and multi-physics—so product and infrastructure teams design with evidence, not guesswork.

Primary tagline, already set as the homepage headline:

> Precision engineering, from first principles.

Do not describe internal agents, human-in-the-loop review, Workflow DevKit, or admin tooling on any public surface.

## Download logos

Use the shipped artwork. Do not retypeset the wordmark, including in Gaoel. Gaoel is the logo face only and is not loaded on the web.

Fetch these from the site origin:

- Light backgrounds: [color SVG](/brand/logo-color.svg) · [color PNG](/brand/logo-color.png)
- Dark backgrounds: [white SVG](/brand/logo-white.svg)
- One-color print: [black SVG](/brand/logo-black.svg)

In this repo, render them only through `BrandLogo` or `BrandLogoAdaptive` in `components/brand-logo.tsx`. `BrandLogoAdaptive` is color in light theme and white in dark theme. Masters live in `brand/Logo/Logo Files/` and are not edited.

| Placement | Size | Rule |
| --- | --- | --- |
| Marketing header | `h-8` (32px), `sm:h-9` (36px) | `BrandLogoAdaptive`, default |
| Marketing footer | `h-7`, `sm:h-8` | Same component, quieter |
| Admin sidebar | `h-7`, `sm:h-8` | Word “Operations” under the mark in muted uppercase |
| Admin rail, collapsed | Cropped inside a 40px hit target | Approved only here |
| Standalone reproduction (slides, print, social, docs) | At least 140px wide on screen, 35mm in print | Clear space on every side at least the height of the E in ELEMENT |

Do not recolor, stretch, outline, shadow, or glow the logo. Do not set the color logo on a mid-gray field. Do not paint the SVG with the dark-theme UI blue (`#5b7ab0`). The artwork stays `#34538b` / `#212121` / `#d6d6d6`. On a dark UI, switch to the white file.

## Priority order

When requirements compete, protect them in this order:

1. True claims. No invented clients, certifications, metrics, or project results.
2. The reader’s decision. What physics question, and what recommendation or next step.
3. This file’s logo, type, color, and voice.
4. The existing page grammar (shell, sections, components named below).
5. Atmosphere. Grid, glass, and glow are a fixed budget, not a style to extend.
6. Local polish that does not add a second visual system.

## Integrate with this repo

Public pages are the Next.js App Router. Preserve it.

| Need | Use |
| --- | --- |
| Name, tagline, industries, email, logo paths | `lib/site.ts` (`siteConfig`) |
| Color | CSS variables from `brand/tokens.css`, synced into `app/globals.css` |
| Type | Manrope and JetBrains Mono, loaded in `app/layout.tsx` |
| Public chrome | `Header`, `Footer`, wrapper `page-shell` |
| Logo | `BrandLogoAdaptive` |
| Long-form | `components/markdown.tsx` |

Do not add a new font, a second palette, or a parallel component kit. New marketing sections use the classes in [Visual system](#visual-system). Hex values belong in the token files. Components use `bg-primary`, `text-foreground`, `text-muted-foreground`, `border-border`, and the classes below.

Light and dark are both required. Theme is `class="dark"` on `html` via `next-themes`. Do not design a light-only page, and do not add a second theme switcher. `ThemeToggle` already lives in the header and the admin shell.

## Surfaces

Four surfaces share one brand. They do not share one density.

### Marketing site

Home, and any future public landing section. Atmospheric, generous, one canvas.

The homepage order is the firm’s public argument. Keep it unless the content itself changes:

1. **Hero.** Tagline, who it is for, two actions, three practice codes, and the instrument panel.
2. **Services.** CFD, FEA, DEM and multi-physics, then engineering design support.
3. **Industries.** The ten sectors in `siteConfig.industries`, in that order.
4. **Approach.** Four steps: scope the physics, model with intent, verify and iterate, deliver decisions.
5. **Credibility.** Four principles. No client counts, no logo wall, no awards.
6. **Insights.** Recent notes, linked to `/insights`.
7. **Contact.** A short brief prompt and the inquiry form.

### Insights

Editorial, quieter than the homepage. Index is a dated list, not a card grid. An article is a single column, `max-w-3xl`, with a category chip, date, reading time, headline, dek, and byline. Body copy goes through `Markdown`. Close with one contact prompt. Category labels and the “Topics” label are JetBrains Mono, 10px, uppercase, muted.

### Client evidence

Proposals, kickoff briefs, one-pagers, and any page whose reader must audit a recommendation. Use the logo, Manrope, and the color tokens. Drop the marketing atmosphere: no `page-shell` grid, no glass, no glow, no float, no gradient text, no pulse dot.

Lead with the decision and the evidence that supports it. Put assumptions, limits, units, and the comparison basis next to the claim. Use a table when the reader must scan numbers. Use prose for one recommendation. Do not invent a metric to fill a hero.

### Admin

`/admin` is an operations tool. Same tokens, no marketing atmosphere, no `page-shell`. Dense sidebar, 14px type, status colors from `--status-*`. Those status hues (amber, teal, red) are for workflow state inside admin only. They are not a marketing accent palette.

## Page composition

The first screen states the offer. On the homepage that offer is the tagline plus the lede, with the practice panel as proof of subject. A new marketing page follows the same idea: one claim, one proof, one primary action. Do not open with a label and a preamble before the claim.

### Section grammar

Marketing sections use this structure.

- Wrapper: `section-y scroll-mt-24`, with an `id` and `aria-labelledby`.
- Measure: `container-page` (max 72rem, padding `clamp(1.25rem, 4vw, 2rem)`).
- One `section-label`, then a `headline`, then either a right-aligned supporting sentence (`max-w-sm`, 14px, muted) or a sticky intro column.
- Content starts about 3rem below the intro (`mt-12`).
- Separate major turns with `divider-fade`, not a new background band.

Section headlines use `clamp(1.85rem, 4vw, 2.75rem)`. The homepage `h1` is the only larger title: `clamp(2.4rem, 5.5vw, 3.75rem)`.

Peer items share a component. Three services are `card-surface` articles. Ten industries are a 5-column grid of the same card. Four approach steps are a numbered stack. Do not give one peer a different chrome because its text is longer.

The page is one continuous canvas. A card means “these are repeated peers” or “this is the instrument panel.” Do not wrap a section, a metric, or a paragraph in a card to make it feel finished.

### Reading measure

Prose sits near 60–68 characters. `lede` already caps at 40rem. Article body is `max-w-3xl`. Do not widen body copy to fill the 72rem container.

### Grid

Desktop content aligns to `container-page`. Two-column moments on large screens:

- Hero: `1.15fr / 0.85fr`, copy left, panel right.
- Approach and contact: intro column sticky at `top-28`, content on the right.
- Services: 12 columns. The first two practices span 6. The coupled-physics practice spans 12, with its points in four columns.

Stack those splits below `lg`. Do not leave a third cell alone in a 3-column row.

## Visual system

Use the classes and tokens that already exist. Do not invent a parallel scale.

### Authorship shell

Public pages:

```tsx
<div className="page-shell">
  <Header />
  <main id="main-content">{/* sections */}</main>
  <Footer />
</div>
```

`Header` is fixed, 56px tall, inset from the viewport, radius `rounded-2xl`. It is transparent at the top and becomes `bg-background/80` with blur after 12px of scroll. Navigation labels: Services, Industries, Approach, Insights, Contact. The header action is the primary button.

`Footer` carries the logo, one-sentence description, Navigate, Contact (`hello@element.engineering`, the domain, Oregon, USA), the copyright line with the legal name, and the mono line `CFD · FEA · DEM · Multi-physics`.

Include the skip link in the root layout. It is already there. Point main content at `#main-content`.

### Typography

| Role | Face | Treatment |
| --- | --- | --- |
| Logo | Gaoel, artwork only | Never set as live text |
| Headlines, UI, body | Manrope | 400 body, 500 UI labels, 600 headlines. 700 is loaded and rarely needed |
| Codes, steps, meta labels | JetBrains Mono | 400–500. Specs, `CFD` / `FEA` / `DEM`, step numbers, footer group labels, category chips |

Headline class `.headline`: weight 600, line-height 1.1, `letter-spacing: -0.03em`, `text-wrap: balance`.

Lede class `.lede`: muted, `clamp(1.05rem, 1.8vw, 1.2rem)`, line-height 1.65, max 40rem.

Body and card copy: 14px (`text-sm`) or 15–16px, line-height about 1.6, `text-muted-foreground` when it supports a heading. Titles inside cards are 16–20px, weight 600, `tracking-tight`, `text-foreground`.

Eyebrow `.section-label`: 11px, weight 600, tracking `0.18em`, uppercase, `text-primary`, with a 1.25rem hairline. One per section. Center it only when the whole section is centered (the credibility block). Do not stack an eyebrow on another eyebrow.

Mono labels that are not section titles (footer groups, service tags, hero stats) are 10–11px, uppercase, tracking wider, primary or muted. Set only the code in mono. Do not set a sentence or a table in mono.

Sentence-case headlines. The uppercase treatment is the eyebrow and the mono code, not the headline. Write headings that say what the section is for. “Built for real design decisions” is the standard. “Our Approach” is not.

### Color

Core, fixed, from the logo:

| Name | Hex | Token | Use |
| --- | --- | --- | --- |
| Element Blue | `#34538b` | `--ee-blue`, `--primary`, `--brand` | Actions, eyebrows, focus, icon chips |
| Charcoal | `#212121` | `--foreground`, `--ee-charcoal` | Text on light |
| Silver | `#d6d6d6` | `--ee-silver` | Quiet chrome, dark-mode borders |

Light canvas is Cloud `#f5f7fa` (`--background`). Cards are white. Dark canvas is `#0f1520`. Dark cards are `#161d2b`. Dark text is `#e8eaed`.

In dark theme the interactive blue shifts to `#5b7ab0` so it can sit on navy. That shift is a UI token. It is not a new brand color, and it is not applied to the logo.

Ratio on a marketing page: about 75% neutral canvas and text, 20% Element Blue (buttons, labels, icons, rules), 5% silver or mist edges. A page that is mostly blue is off-brand. A page with no blue except the logo is unfinished.

Status colors in `tokens.css` (`--status-info`, `--status-warn`, `--status-success`, `--status-danger`) are admin-only.

Measured contrast, 2026-10-16:

| Pair | Ratio | Verdict |
| --- | --- | --- |
| `#212121` on `#f5f7fa` | 15.0:1 | Body text |
| `#5c6570` on `#f5f7fa` | 5.5:1 | Muted text passes AA |
| `#ffffff` on `#34538b` | 7.6:1 | Light primary button |
| `#34538b` on `#f5f7fa` | 7.1:1 | Eyebrows and links |
| `#e8eaed` on `#0f1520` | 15.2:1 | Dark body |
| `#9aa3b0` on `#0f1520` | 7.2:1 | Dark muted |
| `#5b7ab0` on `#0f1520` | 4.2:1 | Fails AA for normal text |

Do not set new small text in dark-theme `text-primary` on the navy canvas. 11px eyebrows and 10px mono labels in primary blue are the known gap. Until `--primary` on dark is lightened, prefer `text-foreground` or `text-muted-foreground` for any new text under 18px on the dark canvas. Large primary buttons may keep the dark token. See [Corrections](#corrections-from-the-2026-10-16-review).

### Atmosphere budget

The marketing canvas has one atmosphere, implemented on `.page-shell`:

- Three radial glows behind the page, using `--hero-glow-1/2/3`, masked so they die off.
- A 64px grid in `--grid-line` (Element Blue at about 7% opacity), masked to the upper middle.
- Noise at 2.5% opacity in light and 3.5% in dark.

That is the whole budget. New pages that use `page-shell` inherit it. They do not add a second grid, a gradient mesh, a blob, or a background image.

`.gradient-text` is allowed on one phrase: the emphasized clause of the homepage `h1` (“from first principles”). Do not apply it to a new heading, a number, a button, or a card title.

`.glass` (blur, hairline, soft shadow) is for the floating header, the hero instrument panel, and the three-up credibility strip. Do not glass every card.

`.card-surface` is the peer-card fill: a barely-there gradient from card to surface, a 1px border, a lift of 2px on hover, and a primary-tinted border on hover. Use it for repeated items. Nested cards inside cards are not allowed.

Hero-only motion is named below. It is not a pattern for the rest of the page.

### Controls

Primary button `.btn-primary`: pill, 46px tall, 14px, weight 600, primary fill with a slight top lighten, white (or dark-canvas) label, small shadow. Hover lifts 1px. One primary button per view. The header’s compact form is `!h-9 !px-4 !text-[13px]`.

Secondary button `.btn-ghost`: same height and pill, 1px border, weight 500, transparent fill. Use it for the second action (“Explore services”).

Do not invent a third button style. Links inside prose are `text-primary`, underlined, offset 4px.

Focus is `outline: 2px solid var(--ring)` at 3px offset, from the base styles. Do not remove it. Inputs on focus use a primary border and a 3px primary ring at 18% opacity.

### Icon chips

Lucide icons, stroke, one size per context (`size-4` in a standard chip, `size-3.5` in a dense chip). The chip is `.icon-chip`: 44px, radius about 0.9rem, primary-tinted fill, primary icon. Dense rows may use `!size-9` or `!size-10`.

Icons identify a peer in a list (a service, an industry, a contact fact). They are not decoration beside a heading that already says the thing. Do not put icons in colored tiles of different hues. Every chip is Element Blue.

### Motion

Default is still. The shipped exceptions are all marketing-hero:

- `.animate-fade-up` on the hero’s first paint, staggered by `.delay-1` through `.delay-4` (80ms steps).
- `.pulse-dot` on the capability pill.
- `.float-soft` on the hero panel, 7s, 8px.

`prefers-reduced-motion: reduce` already collapses animation and transition duration. Do not add scroll-triggered reveals, marquees, parallax, typing effects, or looping motion on new sections.

### Imagery

Prefer, in order: the live system itself (type, rules, the mesh panel), then a simple Element Blue line drawing of a mesh or streamline, then cool desaturated photography of a product or facility when a real photo exists.

The hero panel is the approved illustration: a faint mesh, one streamline, one marked point, then three labeled rows. If you draw a new figure, use Element Blue and Slate (`#4a6a9e`) only, on the surface color, and use tokens or `currentColor` rather than raw hex.

Do not use stock hero photography, rainbow CFD contours, neon, isometric SaaS scenes, or warm wood and metal textures. The walnut palette is retired.

## Voice and copy

Sound like a senior engineer in the room. Precise, calm, practical, specific about physics. Modern, not rustic. Confident, not boastful.

Write to engineering and program leaders. Name the physics and the decision. Define an acronym once if the reader may not own it, then use the short form. CFD, FEA, and DEM may appear as codes after the full name has appeared on the page.

Approved lines, already on the site. Match this temperature:

- “so you verify performance with evidence, not guesswork.”
- “Specialist CFD, FEA, DEM, and multi-physics capacity for teams that need rigorous analysis—not another software license.”
- “We size model complexity to the risk and the decision—not the largest simulation that will finish overnight.”
- “Tell us about the problem you need to solve.”

The “not …” turn is a positioning device. Use it once on a page, where it draws a real boundary. Do not end every sentence with it.

| Prefer | Avoid |
| --- | --- |
| CFD, FEA, DEM, multi-physics, boundary conditions, mesh, verification, margins | Revolutionary, world-class, cutting-edge, seamless, unlock, elevate, supercharge |
| Evidence, assumptions, acceptance criteria, design decision | AI-powered, intelligent platform, digital transformation |
| Element Engineering, then “Element” after the full name is on the page | Element alone in a headline, EE, the Element team as a personality |
| Oregon S-Corp, when entity or contracting matters | Hometown, family-run, artisan, craft |
| Named industries from `siteConfig` | “Every industry,” or a sector we do not list |

Primary action label: **Discuss your project.**  
Secondary: **Explore services.**  
Form submit: **Submit inquiry.**  
Success: **Thank you. Your inquiry has been received. We will be in touch shortly.**

A section may use a more specific ghost button when it describes that section (“Talk through a scope” beside the approach). It still links to `#contact`. Do not add new synonyms for the primary action.

Capability line, with middle dots, in the hero pill and the footer: `CFD · FEA · DEM · Multi-physics`.

Industries, public short form: “Aerospace, automotive, industrial equipment, data centers, and more.” The full ten stay in the industries section and in `siteConfig`. Do not add a sector in the UI without adding it there and in `brand/03-voice-and-messaging.md`.

Email is `hello@element.engineering`. Region line is “Oregon, USA” or “Based in Oregon.”

## Claims

- Do not invent clients, logos, headcount, years in business, certifications, or result statistics.
- The credibility block is four principles. Keep it that way until there is a sourced fact to add.
- Industry list may be shortened for a headline. It may not include a field the firm does not practice.
- Simulation output shown in public must be schematic (the mesh panel) or a real, cleared figure. A decorative contour plot reads as a fake result.
- Proposal numbers, dates, units, and limits come from the engagement. Do not round them into a stronger claim.

## Client documents

When the surface is a proposal, brief, or comparison:

- Open with the question and the recommendation, or with the strongest supported state if there is no recommendation yet.
- Show units, load cases, and what the model does not establish, next to the result.
- Tables are semantic, full width of the measure, text columns left, numbers right, one precision per column.
- Peer options share the same rows, so the difference is visible without rereading.
- End with the decision, the open question, or the next scope. Do not end on a logo wall.
- Still no internal process language, and no marketing glow.

## Accessibility

- Target WCAG 2.2 AA. Body, labels, and button text need 4.5:1. Large text (24px, or 19px at weight 600 and above) and non-text UI need 3:1.
- Every page has one `h1`. Section titles are `h2`. Card titles are `h3`.
- Do not put meaning only in color. Status in admin pairs a word with the hue. The hero mesh is `aria-hidden`; the rows under it carry the words.
- Icon-only buttons need an accessible name. The logo link’s name is “Element Engineering home.”
- Forms use visible labels, not placeholder-only labels. The inquiry form already does.
- Honor `prefers-reduced-motion`. Do not autoplay video or loop a new animation.
- Hit targets for icon buttons stay at least 40px. The header menu button is 40px.

## Reject these reflexes

Hard-reject on Element surfaces:

- A second typeface, including any “close enough” stand-in for Gaoel.
- Walnut, bronze, copper, warm gray, neon, and rainbow contours.
- Purple-to-blue gradients, mesh gradients behind type, glass on every card, and new glows.
- Gradient text anywhere except the existing homepage clause.
- Stock illustrations, 3D SaaS mascots, and fake dashboard screenshots.
- Counters (“500+ projects”), star ratings, and unnamed client logos.
- All-caps headlines, eyebrow stacks, and centered everything.
- A blue full-bleed hero band behind the logo.
- Marketing copy about AI agents, automation of sales, or the admin product.
- Inter, Geist, or a generic shadcn theme that replaces Manrope and the Element tokens.
- Dark-mode logo recolored to `#5b7ab0`.

## Corrections from the 2026-10-16 review

These are drifts in the shipped UI. New work follows the rule, not the drift.

| Item | Shipped today | Rule |
| --- | --- | --- |
| Header action | “Start a project” | “Discuss your project” |
| Insights end card | “Start a project conversation” | “Discuss your project” |
| Hero mesh SVG | Raw `#34538b`, `#4a6a9e`, `#f5f7fa` | Tokens or `currentColor`. The light fill is wrong on the dark canvas |
| Dark primary text | `#5b7ab0` on `#0f1520` at 4.2:1 | Do not add new small text in this pair. Lighten dark `--primary` before using it for eyebrows |
| Standalone logo minimum | Footer and admin are under 140px | 140px applies to standalone reproduction. Chrome sizes in the logo table are the approved exceptions |
| Collapsed admin mark | Logo cropped in a 40px box | Do not crop the wordmark anywhere else |

## What this file does not replace

| Question | Read |
| --- | --- |
| Purpose, values, promise | [`01-foundation.md`](./01-foundation.md) |
| Logo construction and print | [`02-visual-identity.md`](./02-visual-identity.md) |
| Boilerplate and industry language | [`03-voice-and-messaging.md`](./03-voice-and-messaging.md) |
| Asset control and naming | [`04-protection-and-implementation.md`](./04-protection-and-implementation.md) |
| Why these industries | [`05-competitive-context.md`](./05-competitive-context.md) |
| Every token | [`tokens.css`](./tokens.css) |

Bump [`00-README.md`](./00-README.md) when the palette, the logo files, or the industry set change, and change this file in the same commit when the web rules change with them.