AI: what actually works. Applied AI for people who build and sell real things, from a decade of putting tech to work.
10+ years in SaaS, digital services, IoT and data-driven operations.
Personally experimenting with AI tools, agents, and product development. Sharing lessons from the intersection of enterprise reality and AI capability.
Not publishing papers. Not aggregating AI news.
Where raw material becomes something useful. Workshop warmth meets digital sharpness. The palette channels metalworking, the maker space, the workshop where materials get shaped into tools. Warm metallics: copper, steel, dark leather. More Leica than blacksmith.
The industrial reference comes through material metaphors, not signage or literal imagery. Serious tools for serious work, with craft and warmth. Like a good power tool: built to last.
Every piece of content is forged with care. The claw-scratch maker's mark on every component says "handmade by someone who cares about quality."
Copper accents, ember glows, warm neutrals. This brand has depth: not the brightness of plastic, but the heat of metal. Approachable without being casual.
Two-layer shadows. Brushed metal textures. Thick badge borders with inner glow. Components feel like physical objects, not web elements.
Conclusions first, then explain. No throat-clearing.
Every claim carries proof. Numbers, examples, tested results.
Fellow professionals, not students. Respect the reader's time.
Selectivity is the brand promise. No firehose of tips.
Dry observation, never sarcasm. The hazard stripe is the visual wink.
Informs, doesn't inspire. No rallying cries or life-changing promises.
No catastrophising for clicks. "AI will replace you" is not our game.
Confident without arrogance. No "I'm just a random guy" energy.
Rigour without footnotes. We cite, but we don't lecture.
When selling, say so directly. No disguised pitches.
| Platform | Adjustment |
|---|---|
| LinkedIn article | Full voice. Evidence-dense. Clear structure. |
| LinkedIn post | Tighter. One insight. Short paragraphs. Hook in line 1-2. |
| Newsletter | Warmest version. Slightly more personal. Can include asides. |
| Instagram carousel | Visual-first. Headline + 1-2 sentences max per slide. Let the design carry the point. |
| Role | Light Mode | Dark Mode | Notes |
|---|---|---|---|
| Page bg | #F5F2E8 Parchment | #121010 Soot Black | Default surface |
| Section bg | n/a | #1C1917 Forge Dark | Section panels on dark theme |
| Card bg | #FFFFFF | #252220 Elevated | Raised surface |
| Primary accent | #D97706 Copper | #D97706 Copper | Logo, accents, section numbers |
| Hover accent | #B45309 | #F59E0B Spark | Interactive highlight |
| Primary text | #1C1917 Forge Dark | #E7E5E4 Warm White | Headlines, body |
| Secondary text | #57534E Soot | rgba(231,229,228,0.65) | Body, descriptions |
| Tertiary text | #A8A29E Ash | rgba(231,229,228,0.40) | Meta, timestamps |
| Accent text on light | #92400E | n/a | NEVER use raw Copper as text on light |
| Success | #059669 Emerald | #34D399 | Use light variant on dark bg |
| Danger | #CC3300 Forge Red | #E84830 | Use light variant on dark bg |
| Borders | rgba(28,25,23,0.06) | rgba(231,229,228,0.06) | Default card/component borders |
WCAG AA minimum (4.5:1 normal text, 3:1 large text). Tested values for the Forge palette.
| Combination | Ratio | Verdict |
|---|---|---|
| Forge Dark on Parchment | 14.8:1 | AAA |
| Warm White on Soot Black | 15.2:1 | AAA |
| Copper on Soot Black | 7.1:1 | AAA |
| Soot on Parchment | 6.5:1 | AA |
| Copper on Parchment | 1.9:1 | FAIL: never use |
| Copper-Light (#92400E) on Parchment | 6.1:1 | AA Use this instead |
| Forge Red Light on Soot Black | 4.6:1 | AA |
| Emerald Light on Soot Black | 9.5:1 | AAA |
Categorical colours for charts. Use in order. For 2-3 series, use only the first 2-3.
Copper is the primary accent: logo, section numbers, card accent borders, progress bars, nav highlights. Emerald is for tags, badges, and status labels. Ratio: ~60% copper accents, ~40% emerald tags across any given page. Forge Red serves as the error and destructive colour, always paired with an icon or label for clarity.
| Use | Font | Weight | Size |
|---|---|---|---|
| Headlines | Space Grotesk | 700 Bold | 28-96px |
| Body text | Inter | 400 Regular / 600 Semi | 14-18px |
| Code / data / labels | JetBrains Mono | 400 Regular / 500 Medium | 11-13px |
Label rules: JetBrains Mono labels use letter-spacing: 0.08em max, uppercase. Minimum font size for accessible labels: 11px.
Two official themes. Dark is the default for every image we publish: article visuals, social posts, carousels and covers. Light is for long reading: documents, guides and web pages. Use the toggle (top-right) to preview.
Fallback: When CSS background patterns are unavailable (print, email, PDF export), use flat Parchment #F5F2E8 without the grain texture.
| Element | Light (Grain) | Dark (Soot Black) |
|---|---|---|
| Page bg | #F5F2E8 + grain texture | #121010 Soot Black |
| Card bg | #FFFFFF | #252220 Elevated |
| Primary text | #1C1917 | #E7E5E4 |
| Secondary text | #57534E Soot | rgba(231,229,228,0.65) |
| Tertiary text | #A8A29E Ash | rgba(231,229,228,0.40) |
| Accent | #D97706 Copper | #D97706 Copper (same) |
| Accent text | #92400E (dark copper) | #D97706 Copper |
| Success text | #059669 Emerald | #34D399 Emerald Light |
| Danger text | #CC3300 Forge Red | #E84830 Forge Red Light |
| Borders | rgba(28,25,23, 0.06) | rgba(231,229,228, 0.06) |
| Nav bg | #FFFFFF | #1C1917 Forge Dark |
Nine surfaces and patterns available. Use 1-2 patterns per view. Never stack more than 2 in one viewport. All adapted to Forge copper tones. Toggle Dark Mode (top-right) to preview the dark theme.
| Pattern | Surface | Use for | Max per view |
|---|---|---|---|
| Brushed Metal | Dark | Default dark background, cards, sections | Always-on for dark |
| Ember Glow | Dark | Hero sections, social image backgrounds | 1 per page |
| Hazard Grid | Dark | Alternative dark bg. More industrial feel. | 1 section |
| Full Hazard Stripe | Any | Background for accent tags, contained elements only | Sparingly |
| Hazard Bar | Any | Optional element. Top of hero, articles, cards. Faded edges. | 1-2 per view |
| Blueprint Grid | Dark | Technical content, data sections, presentations | 1 section |
| Margin Stripe | Dark | Article heroes, presentation slides, annotation feel | 1 per view |
| Parchment | Light | Default page background, article body | Always-on for light |
The hazard bar is a 4px alternating copper/dark stripe at the top of elements. It fades at both edges via CSS mask. Add it to any dark element (hero, article header, card, banner) for an industrial touch. It is always optional: the design works without it. When present, it adds a subtle "under construction" signal.
Example:
CSS:
Three curved claw-scratch arcs in a rounded-square container. Each arc bows right. The right scratch is shortest, the middle is longest. Two primary treatments, light context and dark context, form the core pair. The files are under Downloads below.
ViewBox: 0 0 240 240. Container: rx="40". Three arcs: right (sw 17, shortest), middle (sw 20, longest), left (sw 18, medium). Flat gradients, no texture, no shadow. Use stroke-linecap="round" on all arcs.
On dark images the mark drops its container. The copper claw sits bottom-left beside the wordmark, AI in Warm White and Bear in Copper, with ai-bear.io bottom-right on square posts.
AI Bear| Version | Use | Files |
|---|---|---|
| Light context | Copper container, dark scratches | SVG · PNG |
| Dark context | Dark container, copper scratches | SVG · PNG |
| Monochrome | Single colour | SVG · PNG |
| Accent | Events and keynotes | SVG · PNG |
| Parchment container | SVG · PNG | |
| Copper claw | The mark on dark images, no container | PNG |
Rounded square (12px radius). 2px copper border with inner glow. Maker's stamp feel.
White on Parchment. 3px solid Copper top-accent. Maker's mark claw scratch in top-left at 6% opacity.
Elevated surface on Forge Dark. 3px solid Copper top-accent. Inner glow on hover.
Note: The hazard bar works on dark containers (article heroes, banners, dark sections) but not on card tops: the copper/dark stripe pattern clashes with light card surfaces. Use the solid copper line for cards.
With optional hazard bar and margin stripe.
Every enterprise AI deployment I've seen fail had the same root cause: the integration layer, where AI meets the systems already there, was treated as an afterthought.
After watching this pattern repeat across construction, manufacturing, and logistics, the fix became obvious: you build the integration layer first, then fit the model to it.
| Recipe | Treatment | Use for |
|---|---|---|
| Dark screen | Forge Dark @ 75% opacity, multiply blend | Social images with text |
| Light wash | Parchment @ 25% opacity | Inline article photos |
| Duotone | Desaturate 100%, Copper blend @ 8% | Headshots, speaker bios |
| Warm grade | Reduce blues -10%, boost warm tones +5% | All editorial photography |
Every image AI Bear publishes, from article covers to carousel slides, is built the same way: real type in the brand fonts on the dark Forge surface, with one illustration made for it and blended into the background.
AI BearA section image from an October 2026 article, rebuilt here in HTML: the type is real text, and the illustration has no box around it.
Forge Dark gradient (#1C1917 to #292524), a faint grid, and one glow per image: copper, emerald or forge red.
Real type in Space Grotesk, Inter and JetBrains Mono, never generated inside a picture. No serif, and nothing under 24px at full size.
Flat glowing line-art in Copper, Warm White and a little Forge Red, drawn on black and blended into the surface. One per image, made for it.
Text on the left, the illustration centred in the space on the right. Line breaks set by hand, never one word alone on a line.
Copper claw and wordmark bottom-left, ai-bear.io bottom-right on square posts.
Bars drawn to true scale with the value outside the bar. A relative number is shown as a comparison, never on its own.
| Use | Size | Notes |
|---|---|---|
| Article cover | 1200 × 630 | Also the link preview and the email cover |
| LinkedIn post | 1200 × 1500 | The cover recomposed at 4:5 |
| Section image | 1080 × 1080 | One per section that earns it |
Photos come only from sources that allow reuse (Unsplash, Pexels, Wikimedia Commons, press kits, or our own), with a small credit. Screenshots of other people's pages get a thin frame and a credit line. Our own screenshots go in as they are.
#92400E for amber-toned text on light surfaces#E84830 for danger text on dark surfaces#34D399 for success text on dark surfaces#F59E0B for hover states on dark surfaces#D97706 as text on light surfaces (1.91:1, fails WCAG)#CC3300 as body text on dark (3.63:1, fails): to introduce an explanation: "The fix: build the integration layer first" - for an aside, and a plain hyphen for ranges: "Tested across 10K-10M pages"— or a double hyphen anywhere. It is the #1 AI fingerprint in written content#D97706 or it looks cheap