Iconography — Carbotura Brand Guidelines

01 // Governing Principles

Design language.

Style

—Stroke-based, not filled — schematic, not illustrative
—1.5px stroke at 24px, scaled proportionally
—Round line caps and joins throughout
—2px optical padding inside 24×24 viewBox
—No fills except deliberate accent marks

Reference model

→P&ID / process flow diagram conventions
→Engineering schematic line weights
→ISO 10628 process equipment symbols as inspiration
→Not: SaaS icon libraries, emoji, illustration

Grid & sizing

→Master: 24×24px viewBox, 20×20 live area
→Deployed sizes: 16 / 20 / 24 / 32 / 48px
→Minimum: 16px (UI compact); never below 12px
→At 48px+: increase stroke to 1.75px

The rule: If a Carbotura icon could appear in a generic SaaS product unchanged, it is wrong. Every icon should feel like it was drawn for a feedstock processing facility, a Circular Offtake Agreement, or a RevCon™ data stream — not a CRM.

02 // Stroke Weight System

Approved stroke weights.

1.5px is the governing weight at 24px. Deviation requires justification. Heavier strokes signal structural importance; lighter strokes signal secondary information.

1px

Hairline — tooltips,
captions only

1.5px ← Governing

Default — all UI icons
at 20–32px

2px

Emphasis — featured
icons, 48px+

2.5px

Bold — 64px hero
icons only

03 // Process & Technology

ACM process vocabulary.

Icons representing the core ACM technology stack — reactor, feedstock, RevCon streams, modules. Drawn from P&ID conventions adapted to the Carbotura context.

04 // Commercial & Partnership

Partnership vocabulary.

COA, TMC Fee, Circular Royalty™, engagement stages, community benefit. The commercial and contractual layer of the ACM relationship.

05 // Environmental & Regulatory

Environmental vocabulary.

Landfill, diversion, emissions, compliance, certification. The regulatory and environmental context Carbotura operates within and improves.

06 // UI & Navigation

Interface vocabulary.

Navigation, status, data, interaction. These are the standard UI icons adapted to Carbotura's stroke weight and visual language.

07 // Size Scale

Sizes in context.

The same icon across the five approved sizes. Stroke weight holds at 1.5px for 16–32px. Increase to 1.75–2px for 48px and above.

16px

20px

24px ← Default

32px

48px (2px stroke)

08 // Color Application

Icon color rules.

Icons inherit color from context via currentColor. Apply brand color directly to the parent element or the SVG itself. Never hardcode color inside the SVG path.

White

On dark backgrounds

Systems Blue

Primary UI, nav, CTAs

Sustain Emerald

Environmental metrics

Emerald Light

Prosperity stats, FTEs

Forged Steel

Secondary, metadata

Mustard

Warning / safety flags

Alert Red

Errors, critical alerts

Muted

Disabled, placeholder

09 // Usage Rules

When to use what.

Context	Size	Stroke	Color	Notes
Navigation bar	20px	1.5px	--text 60% opacity	Active state: 100% opacity + --blue. Never colored icons in nav unless active.
Button with label	16px	1.5px	Inherits button color	Icon sits to the left of label. 8px gap. Never right-aligned except for external-link indicator.
Icon-only button	20px	1.5px	--text	Always requires aria-label. Minimum touch target: 40×40px with padding.
Section heading accent	32px	1.5px	--blue or category color	Used sparingly above section titles. One icon per section maximum.
Status badge	14px	1.5px	Matches badge color	Check = success, Triangle-warn = warning, X = error. Use semantic colors only.
Data table cell	16px	1.5px	--muted2	Only use when the icon adds meaning not carried by the text. Not for decoration.
Hero / feature card	48px	2px	--text 20–30% opacity	Decorative use. Ghosted, not dominant. The heading carries the meaning.
Document / EIR report	20px	1.5px	SP-01/02 palette only	In municipal-facing documents: Blue, Emerald, Steel only. No Magenta, Violet, or Lime.

Never do

Shape

Filled icons from external libraries

Filled variants of Lucide, Material, or Heroicons feel like generic software. All Carbotura icons are stroke-based unless there is a specific deliberate accent fill.

Color

Multicolor icons

Icons are monochrome. No two-tone, no gradient fills, no multicolor path combinations. A single currentColor value controls the entire icon.

Size

Non-standard sizes

Only use 16 / 20 / 24 / 32 / 48px. Fractional or arbitrary pixel sizes (18px, 22px, 36px) introduce inconsistency across the UI.

Context

Icons without accessible labels

Every icon used as an interactive element or as the sole carrier of meaning requires aria-label or aria-hidden="true" + visible text label.

Style

Emoji as icons

Emoji render inconsistently across OS, at inconsistent sizes, and carry cultural associations that conflict with the industrial precision brand character.

Weight

Mixed stroke weights in the same UI

Don't mix 1px and 2px strokes within the same component or section. One weight per visual context. Inconsistent weights signal visual disorder.

10 // Third-Party Icon Usage

When to use external libraries.

Custom icons cover the Carbotura-specific vocabulary. For generic UI actions (close, search, sort, pagination), approved third-party icons may be used — with adjustments.

Approved source

Lucide Icons

Open source, stroke-based, consistent 24px grid, 1.5px default stroke weight. Closest match to Carbotura's icon language. Use the stroke variant only — never the filled variant.

lucide.dev

Requires adjustment

When using Lucide in Carbotura contexts

—Set stroke-width="1.5" explicitly — Lucide default varies
—Set stroke="currentColor" and remove any hardcoded fill values
—Never use Lucide icons for ACM-specific concepts — custom icons only

The test: Would this icon appear in a Salesforce or Notion UI unchanged? If yes, it needs a custom replacement for any Carbotura-specific concept. Generic actions (close, sort, chevron, search) may use Lucide. Anything representing ACM process, commercial structure, or environmental data must use the Carbotura custom set.