Can LLMs bring the Berkshire Hathaway web site into the 21st century? (AI and CSS/HTML)

by John Morgan

Another collaborative post from Philip Greenspun and John Morgan…

Let’s see what the Giants of Coding can do in the world of HTML and CSS design. Web page design should be much easier than generating C, Java, Python, etc. because people with no programming experience are often capable of writing HTML/CSS. On the other hand, HTML/CSS also entails the challenge of taste. There is no technical obstacle to making every word on a page bold and bright red, but should every word be bold/red?

This article will compare the performance of ChatGPT, Grok, Gemini, and Claude on the challenge of redesigning a legacy web site to render tastefully and legibly on both mobile and desktop. (Inspiration: Peter Norvig’s comparison of LLM performance on small programming puzzles.)

Let’s start with Berkshire Hathaway, market cap $1 trillion. “Berkshire has failed to outperform the S&P 500 since 2008—not because Buffett lost his touch, but because deploying an unwieldy $1 trillion in capital effectively is exponentially harder than investing millions” says Morningstar. The underperformance relative to the S&P can’t be attributed to diverting effort into web page design. The home page is a hideous example of misleading user interface. The text that isn’t hyperlinked is in blue, the standard color for hyperlinks, and unvisited links are in purple, the standard color for already-visited hyperlinks. This isn’t a site that was competently built in the mid-1990s and then didn’t evolve with the rest of the Web; it would have been an example of substandard web design taste even in the mid-1990s.

How does it perform on mobile (iPhone 17 Pro Max; Chrome)? It’s a literal waste of (screen) space:

Tiny barely legible fonts and half the screen left blank.

The Prompt

Here’s an HTML file [upload] with no style sheet reference that doesn’t render well on mobile. Please create a .css file that it can reference and also tell me what changes will be needed in the .html (please keep this to a minimum) to make the site responsive and also look as good as it can on both desktop and mobile.

from Grok

Here’s a practical approach to make the Berkshire Hathaway homepage look decent on both desktop and mobile with minimal HTML changes and one new CSS file.

Minimal HTML changes required

Add these two lines inside the <head> (right after the <title> is fine):

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="berkshire.css">

That’s it for HTML edits. (If the file is named something else, adjust the href accordingly.)

Suggested berkshire.css file

CSS

/* ============================================================================
   Berkshire Hathaway Homepage - Responsive CSS
   Minimal modern cleanup + mobile-friendly layout
   ============================================================================ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #000080;
background-color: #ffffff;
line-height: 1.45;
}
...
  font[size="1"] {
font-size: 0.78rem;
}
}

What this CSS does

  • Keeps the classic Berkshire color scheme and serif font feel
  • Makes the two-column table become a single-column stacked layout on phones/tablets
  • Improves spacing, readability and touch targets
  • Slightly modernizes typography without destroying the retro aesthetic
  • Handles very small screens reasonably well

Optional nice-to-have HTML improvements (not required)

If you are willing to make a few more small changes later:

HTML

<!-- Replace the big first <p align="center"><b>...</b></p> with: -->
<h1 style="text-align:center; margin:1.5rem 0; font-size:clamp(2rem, 8vw, 3.4rem);">
B<span style="font-size:0.65em;">ERKSHIRE </span>
H<span style="font-size:0.65em;">ATHAWAY </span>
INC.
</h1>
<p style="text-align:center; color:#333; font-size:1.1rem; margin-bottom:1.5rem;">
3555 Farnam Street<br>Omaha, NE 68131<br>
<strong>Official Home Page</strong>
</p>

But again — the two <head> lines + the CSS file above should already give you a surprisingly usable mobile experience with almost zero HTML surgery.

Let me know if you’d like a darker mode variant or more aggressive modernization while still preserving the spirit of the page.

after Grok

Desktop:

Mobile:

from Gemini

It is a classic “rite of passage” for developers to look at the Berkshire Hathaway website—it’s famously minimalist (some might say “frozen in 1996”).

To modernize this without stripping its soul, we need to move away from fixed-width tables and use a CSS Grid layout.

1. The CSS File ( style.css )

Create a new file named style.css in the same folder as your HTML. This code handles the responsiveness, typography, and spacing.

/* Basic Reset & Typography */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #000080;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
}
... 
/* The Magic: Convert the Table to a Responsive Grid */
tbody {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columns on desktop */
gap: 20px;
}
...
.geico-box {
text-align: center;
padding: 20px;
background: #fff;
}

2. Changes to the HTML

You only need to add two lines to your <head> section. Everything else will be handled by the CSS targeting the existing tags.

  1. The Viewport Meta Tag: This tells mobile browsers to match the screen width.
  2. The Link Tag: This connects your new CSS file.

Add these inside the <head> tags:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">

What these changes achieve:

  • Mobile First: On a phone, those two columns of links will now stack vertically so you don’t have to “pinch and zoom” to read them.
  • Readability: It replaces the default Times New Roman with modern system fonts that are much easier on the eyes.
  • Touch Friendly: By adding padding and a light background color to the table cells ( td ), we turn the links into “cards” that are much easier to tap with a thumb.
  • Minimal Intrusion: We didn’t have to rewrite the table structure or delete any of the original content, which honors the “no-nonsense” spirit of the original site.

Would you like me to help you refactor the HTML further to remove the legacy <font> and <center> tags entirely for better SEO?

after Gemini

Desktop:

Mobile (less compact than Grok’s layout, but arguably more attractive and consistent):

from Claude (slick two-window presentation! Multi-minute analysis)

after Claude

Desktop:

Mobile (failure to notice that the text will overlap; perhaps the AI doesn’t have its own headless browser where it can test and see whether HTML/CSS renders properly?):

from ChatGPT

Below is a drop-in stylesheet + the smallest HTML tweaks needed to make your page render cleanly on phones while still looking good on desktop (your file is very “classic” HTML with <font> tags + a two-column <table> layout berkshire-hathaway).

1) Create styles.css

Save this as styles.css in the same folder as your .htm file:

/* styles.css - responsive polish for legacy table/layout HTML */
/* --- sensible defaults --- */
:root {
--page-max: 980px;
--pad: 16px;
--text: #0a2a6a;          /* close to the original text color */
--bg: #ffffff;
--link: #5a1a7a;          /* close to the original link color */
--visited: #b00000;       /* close to the original vlink */
--rule: rgba(0,0,0,0.18);
}
...
/* Lists look cramped by default in many browsers */
ul {
margin: 0.4rem 0 0.8rem 0;
padding-left: 1.25rem;
}
li { margin: 0.35rem 0; }
...
/* --- mobile: convert the 2-col table into stacked sections --- */
@media (max-width: 640px) {
:root { --pad: 14px; }
/* Turn table rows/cells into blocks so each "column" stacks */
table, tbody, tr, td { display: block; width: 100% !important; }
td {
padding: 6px var(--pad);
}
/* Reduce overly-large headline spacing on small screens */
p[align="center"] {
margin: 12px auto;
}
/* Better tap targets for links inside list items */
li a {
display: inline-block;
padding: 6px 0;
}
}

What this accomplishes:

  • Keeps the old-school Berkshire look (colors, centered header, simple typography), but
  • Prevents horizontal squish/overflow, and
  • Stacks the two columns into a single column on phones (because your core layout is a 2-column table with width="50%" tds berkshire-hathaway).

2) Minimal HTML changes needed

A) Add viewport + CSS link (recommended)

In your <head>...</head> add these two lines (anywhere before </head> ):

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

Why: without a viewport meta tag, mobile browsers often render “desktop width” then shrink it, making everything tiny.

B) (Optional but nice) add a language attribute

Change:

<html>

to:

<html lang="en">

That’s it—no restructuring required. The stylesheet is designed to “wrap” and modernize the existing markup (including the <table width="90%"> layout berkshire-hathaway) without you having to rewrite the HTML.

If you want, I can also provide a second CSS variant that’s more “modern” (card-like sections, a little more whitespace, subtle background tint) while still preserving the minimalist vibe—still with minimal/no HTML changes.

after ChatGPT

Desktop:

Mobile (another failure via overlap):

after ChatGPT again (accepted the offer of a more modern CSS)

Desktop:

Mobile (still overlapping):

Summary

Despite the apparent simplicity of the challenge, Gemini was the only LLM that was able to create a web site that rendered well on mobile. Grok came in second with a mobile rendering that featured odd spacing and horizontal lines placed seemingly randomly but at least kept the text legible. Both ChatGPT and Claude’s styling resulted in mobile rendering that can only be described as broken with multiple instances of overlapping text.

These LLMs probably could do much better if they ran an open-source web browser, such as Firefox, internally and used the browser to render whatever they’d designed and then used their image understanding capabilities to spot obvious problems, e.g., overlapping blocks of text.

Stay turned for more comparisons among LLMs in the web development domain, including a look at the Brave New World of artificial intelligence in integrated development environments (AI in IDEs).

11 thoughts on “Can LLMs bring the Berkshire Hathaway web site into the 21st century? (AI and CSS/HTML)”

  1. AI is the sigh of the oppressed creature, the heart of a heartless world, and the soul of soulless conditions. It is the opium of the people. — Karl Marx, c. 2026

    AI is a sort of spiritual booze, in which the slaves of capital drown their human image, their demand for a life more or less worthy of man. — V. Lenin, c. 2026

    Reply

    • I was going to give a lecture on Fred Brooks’ Mythical Man Month and the folly of the silver bullet (or opium/soma), but I’ll spare you the details. Simpler just to share this this gem I read today:

      https://mitchellh.com/writing/my-ai-adoption-journey

      It admonishes us when vibe coding to “Immediately cease trying to perform meaningful work via a chatbot” and “Always Have an Agent Running…is there something an agent could be doing for me right now?” Sounds like he (and big tech) got inspiration from Hollywood actors. I heard on the news last night that in 2025 alone, China built out 40% of the entire capacity of the U.S. electrical power grid. Preparing for a billion people running AI agents 24/7 I suppose.

      As for Berkshire Hathaway, I looked at their “A Message from Warren Buffet” link. (I’m a bigger admirer of Jimmy Buffet, turns out.) He skipped the foreplay and went right to the message, funneling people into GEICO insurance and gemstones. My takeaway as to his message was “Always Be Marketing”. Their web skills may be lacking and outdated, but their core competencies seem to be spot on. My migraine headache is worsening, so I didn’t look into their position over time on AI to verify that hunch.

  4. Can’t imagine anything more practical than the original 90’s html. It efficiently shows all the information in as little space as possible, loads as fast as possible, doesn’t require any scrolling, doesn’t interrupt with GDPR compliance prompts, terms of service prompts, data sharing prompts, notification prompts, location prompts, advertizing popups, or AI summary popups.

    Reply

    • Seconded. Motion on the table for returning to the 1990s web, pre-JavaScript, up for a vote.

      JavaScript was the LLM of the 2000s. It wormed its way into everything on the web, even the backend, turning the web experience into a bloated gross mess. (Berkshire Hathaway was probably less financially bloated back then too, pre-Biden, and just needed a webmaster/mistress/mistrix who wasn’t colorblind.) Also, while we are revisiting history, let us preemptively outlaw web analytics. Closing spam popups was good for cognitive brain health and improving hand/eye coordination. Oh, yeah, and less pronouns to choose from.

  5. If the reason Berkshire has failed to outperform over the last two decades is that it became too large, that was primarily the result of WEB’s decision not to return capital to shareholders through dividends. The more likely explanation for mediocre performance though is that the structure of the financial markets changed with the rise of institutional investors and the wide availability of investment products like ETFs that enable anyone to duplicate WEB’s investment style at low cost. WEB’s glory years were in the 60s and 70s when he was sitting across the table from low information patsies. We live in a different world today. I wouldn’t spend a lot of time redesigning the Berkshire website since Berkshire’s likely denouement is that it like all the conglomerates that preceded it, ITT, Teledyne, more recently GE, will be broken up once WEB passes and the market is less forgiving of his successor, who also doesn’t own a control stake in the company & will be less appealing to fawning journalists. There is no good reason for a railroad, insurance company, aerospace parts, real estate brokerage, investments in carbonated beverages etc. to sit under one roof. And largely absent from that roof are the real growth companies of today in tech. Berkshire trades at around 1.5X book and a multiple of about 16- as compared to say Alphabet, which trades at a multiple of about twice Berkshire and around 9X book. There is a reason that Berkshire is cheap – because it will be broken up and the market is telling us that the pieces are not worth a lot more than what the Sage of Omaha paid.

    Reply

  6. > We find that AI use impairs conceptual understanding, code reading, and debugging abilities, without delivering significant efficiency gains on average…The erosion of conceptual understanding, code reading, and debugging skills that we measured among participants using AI assistance suggests that workers acquiring new skills should be mindful of their reliance on AI during the learning process.

    https://arxiv.org/abs/2601.20245

    So the more we rely on AI, the less skilled we get, and the more we have to trust it. What’s the point if it can’t deliver “significant efficiency gains on average”? They hypothesized even more loss of knowledge with agentic coding assistants. Of course, this is only one study, with a limited scope. I’m sure the next generation of AI will fix this, fix it real good.

    Reply
Leave a Reply

Your email address will not be published. Required fields are marked *