# Modernizing the Foundation theme

**URL:** https://meta.discourse.org/t/modernizing-the-foundation-theme/395331
**Category:** Announcements
**Created:** [February 6, 2026, 5:52pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331 "2026-02-06T17:52:14Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [February 6, 2026, 5:52pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/1 "2026-02-06T17:52:14Z")

</div>

The design team are in the process of making small but powerful changes/tweaks to the foundation theme to align a bit closer to modern web standards. To view these changes live on meta, join this group:

[https://meta.discourse.org/g/modernized-foundation](https://meta.discourse.org/g/modernized-foundation)

 ![CleanShot 2026-02-05 at 16.42.34@2x](https://global.discourse-cdn.com/meta/original/4X/e/2/f/e2f5e596a85acbea02b90b671acf6869f82145be.jpeg)

 ![CleanShot 2026-02-05 at 16.43.58@2x](https://global.discourse-cdn.com/meta/original/4X/5/6/f/56f9aeac5f7cbee6c6133cd69dd01eca2df80d2e.jpeg)

 ![CleanShot 2026-02-05 at 16.44.40@2x](https://global.discourse-cdn.com/meta/original/4X/8/6/6/8668f0f30f3195f549bc0e120a4236237764bfd9.jpeg)

We will be making this change live through the new [Upcoming](https://meta.discourse.org/t/introducing-upcoming-changes-a-system-to-manage-new-features-and-changes-to-existing-functionality-in-your-community/392894)Changes feature available in Discourse. This will allow site owners to enable the changes for any group they specify, in order to test the roll out of the changes without the fear of possibly breaking themes or current customizations.

# What will change?

## Header shrinks in height

 ![CleanShot 2026-02-05 at 16.19.32@2x](https://global.discourse-cdn.com/meta/original/4X/1/c/9/1c91dd801de887858fd5d3136ddccdbc371b25ce.png)

We have decreased the site of the header along with some of the icons & avatar slightly to utilize onscreen real estate.

## Default buttons

 ![CleanShot 2026-02-05 at 16.23.37@2x](https://global.discourse-cdn.com/meta/original/4X/a/e/a/aeae6fec97af0897a628878fb0f405fa27fd247f.png)

We are moving from a grey default button background to a transparent / “secondary” background with a border.

- removal of grey background
- addition of borders
- icon color matches text color
- buttons now have a set height

## Create new topic button on topic list page

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/9/e/d9e287f1634f461b20d7045c8898fe8a135282cb.png)

Matching Horizon and giving this a “CTA” background color of `tertiary`

## Lots of gray background removal

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/7/3/573ba0076fb62971c7980adeb617ff018b703511.png)

 ![CleanShot 2026-02-05 at 16.26.46@2x](https://global.discourse-cdn.com/meta/original/4X/6/8/7/687e016f734b670ce142c6e8fad2a9059f3f84cb.jpeg)

 ![CleanShot 2026-02-05 at 16.28.04@2x](https://global.discourse-cdn.com/meta/original/4X/8/5/c/85cd5dd4cad4af1ca86db1af120b90be8378dd45.png)

## Topic list

 ![CleanShot 2026-02-05 at 16.29.53@2x](https://global.discourse-cdn.com/meta/original/4X/a/a/8/aa869b76c4212763f322d6320aaea15a325181e3.jpeg)

- removal of 3 px thicc top border
- decrease font size of table header data
- consistent color for table data items
- color value changes to read/unread
- slight increase in font weight to unread

### Category boxes

 ![CleanShot 2026-02-05 at 16.30.23@2x](https://global.discourse-cdn.com/meta/original/4X/8/d/b/8dba9e7d45cfeb17921d4cfc9fa99919a9145940.png)

- left alignment of text
- removal of thicc left colored border
- slightly rounded badges
- thinner border on box

## Nav bar

 ![CleanShot 2026-02-05 at 16.31.26@2x](https://global.discourse-cdn.com/meta/original/4X/3/0/c/30cf7fc67b7bd521ed01112a17244d782e16d014.png)

- The nav pills on topic list pages will be the same height as buttons in this zone
- darker color text & icon on select kit

## Sidebar

 ![CleanShot 2026-02-05 at 16.31.59@2x](https://global.discourse-cdn.com/meta/original/4X/0/2/e/02ec1d485a938f45f36d78cad837da19ba542579.png)

- icon & text match color
- darker text & icons
- lighter “active” background
- heavier active font weight

## Welcome banner

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/f/f/8ffff4127cccd259fd68229715e8e6aacdeff423.png)

- balanced spacing
- added variables for easier left/right/center alignment via customization
- header font weight decreased
- sub title font size decrease

## Calendar

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/d/5/cd5d75c0ed98b335a5b8126b9609ac22abf5723c.png)

- removed grey background from “buttons”
- use grey only to signify “active”
- switch to “bordered transparent” button styling

## Drop downs

 ![CleanShot 2026-02-05 at 16.34.54@2x](https://global.discourse-cdn.com/meta/original/4X/4/3/0/4305ec7c801f9dc2d20d6d7d0d0b6116cb121238.png)

 ![CleanShot 2026-02-05 at 16.35.09@2x](https://global.discourse-cdn.com/meta/original/4X/2/e/8/2e86b4ac9b7e9ab0ea91af21c9b228f704e46416.png)

 ![CleanShot 2026-02-05 at 16.34.32@2x](https://global.discourse-cdn.com/meta/original/4X/6/e/1/6e140b198f4d17633d58d1ed090a9da4cb06a45c.png)

- padding added to drop down container
- height, padding, gap now matches sidebar items
  - unification of “clickable lists”

- border inherits `--d-border-radius` variable

# New Variables

Some of the changes here will be introduced via additional variables added into core.

## Welcome banner alignment

The alignment of the welcome banner will now be able to be changed via:

```plaintext
// default
  --welcome-banner-text-align: center;
  --welcome-banner-search-menu-margin-inline: auto;

// custom
  --welcome-banner-text-align: left;
  --welcome-banner-search-menu-margin-inline: 0 auto;

```

## Button height

We will now have a set button height via:

```plaintext
// default
  --button-height: var(--space-8);

```

### Font smoothing

We are already doing this in Horizon, it makes sense to bring to foundation.

```plaintext
// new default
--webkit-font-smoothing: antialiased;

```

---

_[View the full topic](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331)._