---
title: Redesigning NHCarrigan
description: "A detailed account of the NHCarrigan redesign: the goals, the lit glass look, accessibility checks, dark mode, and version 6 of the shared script."
image: https://mktg.nhcarrigan.com/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-01-homepage-hero-after.png
---

[Skip to content](https://mktg.nhcarrigan.com/blog/redesigning-nhcarrigan#main-content)

[![](https://mktg.nhcarrigan.com/hs-fs/hubfs/logo.png?width=2048&height=2048&name=logo.png)Homepage](https://nhcarrigan.com)

- [Code](https://git.nhcarrigan.com)
- [Socials](https://socials.nhcarrigan.com)
- [Documentation](https://docs.nhcarrigan.com)

[Join Discord](https://chat.nhcarrigan.com)

- [Code](https://git.nhcarrigan.com)
- [Socials](https://socials.nhcarrigan.com)
- [Documentation](https://docs.nhcarrigan.com)

[Join Discord](https://chat.nhcarrigan.com)

![The new homepage hero, with a floating glass header, an availability notice, a highlighted headline phrase and a rose light from the upper right.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-01-homepage-hero-after.png?width=1280&height=900&name=nhcarrigan-redesign-01-homepage-hero-after.png)

# Redesigning NHCarrigan

![Naomi Carrigan](https://mktg.nhcarrigan.com/hs-fs/hubfs/Generated_Image_1790742324098.jpg?width=48&height=48&name=Generated_Image_1790742324098.jpg)

 Naomi Carrigan

October 16, 2026

On 14 October 2026 we released a redesign of nhcarrigan.com, our documentation, our forms and every site that uses our shared page script.

This is a redesign. It is not a rebrand. The name, the logo and the colour palette have not changed. What has changed is how the palette is applied.

This post explains what we were trying to achieve, how the new look works, how we checked that it stays readable, what went wrong along the way, and what it means for you. It is long on purpose. If you want the short version, start with the next section.

## In short

- The site now uses frosted glass surfaces, lit by a single rose light source.
- Every NHCarrigan site now has the same header and the same footer.
- Dark mode has been removed from all of our sites.
- The homepage has been reworked to make it easier to start a conversation with us.
- A new FAQ page answers 62 questions in one place.
- Version 6 of our shared page script is a breaking change for developers. Migration notes are further down.

![The previous NHCarrigan homepage hero, with a dark purple background and a plain header.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-01-homepage-hero-before.png?width=1280&height=900&name=nhcarrigan-redesign-01-homepage-hero-before.png)

Before

![The new homepage hero, with a floating glass header, an availability notice, a highlighted headline phrase and a rose light from the upper right.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-01-homepage-hero-after.png?width=1280&height=900&name=nhcarrigan-redesign-01-homepage-hero-after.png)

After

## What we were trying to achieve

We had three goals.

### One site, not several

Before this change, our homepage, our documentation, our forms and our small apps shared a colour palette and little else. Some pages had a header. Some did not. The footers differed. A visitor moving between them could reasonably wonder whether they were still on our site.

We wanted every page to look and behave like part of one product.

### A clearer path for people deciding whether to work with us

NHCarrigan sells services. The homepage has to answer three questions quickly. What do you do? Can I trust you? How do I start?

Most of the changes to the homepage exist to answer those questions with less effort from the reader.

### Nothing that costs readability

This was the rule that limited everything else. Any effect had to survive a contrast measurement. If an effect made text harder to read, the effect was removed or changed. We did not add decoration for its own sake.

## How the look works

### One light source

The palette has not changed. Witch Rose, Witch Plum, Witch Purple and Witch Black are the same colours as before. The difference is that they now behave as if a single lamp lit the page.

The lamp is in the upper right. Light arrives from that direction on every surface. The left side, where most text sits, stays in shadow. Shadows are plum and black. We use no second accent colour. The effect comes from light set against dark, and from keeping the direction the same everywhere.

On dark sections, the light appears as a glow. On light sections, light cannot glow in the same way, so it appears as colour bleeding in from the corner, a sheen along card edges, shadows tinted rose and plum, and a rose edge glow thrown towards the light.

![The previous services section, with plain white cards on a flat background.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-02-services-before.png?width=1280&height=2484&name=nhcarrigan-redesign-02-services-before.png)

Before

![The new services section, with frosted cards that have a rose edge glow, on a background washed with rose and mauve.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-02-services-after.png?width=1280&height=2485&name=nhcarrigan-redesign-02-services-after.png)

After

### Glass needs something behind it

Frosted glass only shows when there is colour behind it. A glass card on a plain background looks like a white box. For that reason the light sections carry soft rose and mauve washes, and the cards sit on top of them.

The header is dark glass at 72 per cent opacity with an 18 pixel blur, floating 12 pixels from the top of the window. Cards are white glass. On the shared pages, the background artwork is frosted over by the same rose and lavender wash, so the artwork shows softly through it.

### Rules we set ourselves

- Glow is never animated. There is one exception. On the company site, the dot beside our availability notice pulses slowly. It stops for readers who ask their device for reduced motion.
- Long lists, such as testimonials and résumé entries, stay on plain white. Blur is costly on low-end phones, and it adds nothing to a long list.
- On phones, cards and backgrounds drop the blur.
- If a browser does not support blurred backgrounds, or the reader asks for reduced transparency, every surface becomes solid.
- Printed pages use plain surfaces with no glow.
- The logo is never filtered, tinted or overlaid. Any glow sits on the container behind it.
- Glow never replaces the keyboard focus ring.

## How we checked that it stays readable

Text on a translucent surface is a moving target. Its contrast depends on what is behind it, and that changes as the page scrolls and as the screen gets wider.

So we did not measure colour pairs in the abstract. We measured the contrast of every piece of text against the background actually rendered behind it, at the brightest and darkest point of that background. We did this at phone and desktop widths on every page we measured. The homepage, the shared header and the shared script were also measured at tablet and ultrawide widths.

We measured every page of the company site, 20 documentation pages drawn from every section of the documentation, all 19 of our pages and blog posts hosted on HubSpot, and a test application page. That came to more than 7,000 measurements of distinct text styles.

Every one met the WCAG AA requirement, which is 4.5 to 1 for body text and 3 to 1 for large text, with three exceptions:

- The style guide page contains examples that exist to show low contrast, such as swatch labels and a disabled button.
- Some HubSpot forms have a disabled Next button. WCAG exempts inactive controls.
- One line of red text on a grey background in the content of our report form. The author set those colours in the page itself, and we have noted it for correction.

The lowest ratio we measured on the shared script was 4.63 to 1. The lowest on the homepage was 4.78 to 1.

There is a limit to this. For each page we measured every distinct text style, with up to four examples of each, and not every paragraph. We did not measure the documentation pages we did not sample, or applications other than our test page. If you find text that is hard to read, please tell us.

## Making it easier to start a conversation

These are the homepage changes, and the reason for each.

- An availability notice. The hero now states that we are taking on new engagements. A visitor should not have to guess whether we have capacity.
- Example projects with rough prices. Each service page lists example projects with estimated prices. They are labelled as estimates, not quotes. Pricing is specific to each client, and the examples exist to help you judge scale before you contact us.
- A featured testimonial. One mentee, Rain Kalugdan, describes our mentorship programme in full. We show the whole message, not an excerpt, because the detail is what makes it credible.

![The featured testimonial card on the homepage, a dark card with a rose glow holding Rain Kalugdan's full message.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-10-featured-testimonial.png?width=1280&height=1669&name=nhcarrigan-redesign-10-featured-testimonial.png)

- A team section. Naomi, Hisho and Tim each have a profile page.
- Better phone behaviour. The hero is clearer on small screens. There is a sticky contact button, and each page ends with a contact section.
- A newsletter sign-up. It is on the homepage and in the footer.
- Confirmation pages. After you submit one of our forms, you now see a page that confirms it and explains what happens next.

![The previous homepage on a phone.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-05-homepage-phone-before.png?width=390&height=900&name=nhcarrigan-redesign-05-homepage-phone-before.png)

Before

![The new homepage on a phone, with a clearer hero.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-05-homepage-phone-after.png?width=390&height=900&name=nhcarrigan-redesign-05-homepage-phone-after.png)

After

### One place for every question

Eight of our pages carried their own FAQ sections. Together they held 88 questions, and many of them repeated across the service pages.

All of them now live in one place. The FAQ page at [https://nhcarrigan.com/faq/](https://nhcarrigan.com/faq/) answers 62 questions, and each question appears once. Every FAQ section elsewhere on the site shows its questions as cards, and each card links to its answer on that page. Each answer also lists the pages it applies to.

![The previous FAQ, a plain list of questions that expand.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-03-faq-before.png?width=1280&height=876&name=nhcarrigan-redesign-03-faq-before.png)

Before

![The new FAQ section, a grid of question cards with rose edge glows.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-03-faq-after.png?width=1280&height=931&name=nhcarrigan-redesign-03-faq-after.png)

After

![The new FAQ page, with a topic index and full answers on lit cards.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-11-faq-page.png?width=1280&height=900&name=nhcarrigan-redesign-11-faq-page.png)

## One header and one footer, everywhere

Every site that loads our shared script now has the same header as the homepage. It carries the same logo and the same links. The text beside the logo is the title of the page you are on.

The footer is a copy of the homepage footer. It has the same columns, the same links, the same address and the same Tree-Nation badge.

The community invitation popup has the same lit surface and rose glow as the rest of the site. The page content sits on a lit, frosted card. Buttons, tables, quotations and code blocks follow the same styling.

![A sample application page before the change, with a plain white card and a small footer.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-06-app-page-before.png?width=1280&height=900&name=nhcarrigan-redesign-06-app-page-before.png)

Before

![The same page after the change, with a glass header, a frosted card and the full footer.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-06-app-page-after.png?width=1280&height=900&name=nhcarrigan-redesign-06-app-page-after.png)

After

![The previous community popup.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-07-discord-popup-before.png?width=1280&height=900&name=nhcarrigan-redesign-07-discord-popup-before.png)

Before

![The new community popup, with a rose glow and a glowing button.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-07-discord-popup-after.png?width=1280&height=900&name=nhcarrigan-redesign-07-discord-popup-after.png)

After

![The previous footer.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-04-footer-before.png?width=1280&height=572&name=nhcarrigan-redesign-04-footer-before.png)

Before

![The new footer, with a glowing top edge, link markers and a rose key light.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-04-footer-after.png?width=1280&height=669&name=nhcarrigan-redesign-04-footer-after.png)

After

Our forms and our blog are hosted on HubSpot, which uses its own theme. They now load the same script. HubSpot's own header and footer are hidden, and ours are shown in their place.

## Why we removed dark mode

We removed dark mode from every site. This is the decision most likely to change how you read our pages, so here is the reasoning.

The homepage never had a dark theme. To make every site look the same as the homepage, we had two options. We could design a second, dark version of every lit surface, every glow and every frosted panel. Or we could drop the toggle.

Light behaves differently on a dark page. The rose light on a dark surface is a glow. On a light surface it is colour bleeding in from a corner. A dark version of the look is not a recolouring. It is a second design, and doing it badly would have been worse than not doing it. We chose one theme, done properly.

There is a cost. Some readers prefer dark pages, and they lose that option on our sites. We know that. We kept the other accommodations: reduced motion, reduced transparency, visible focus rings, and measured contrast.

If the change makes our sites harder for you to read, please tell us at [contact@nhcarrigan.com](mailto:contact@nhcarrigan.com). We would rather hear it than guess.

![The previous documentation page in dark mode.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-08b-docs-page-before-dark.png?width=1280&height=900&name=nhcarrigan-redesign-08b-docs-page-before-dark.png)

Before, in dark mode

![The new documentation page, light only, with a glass header and frosted panels.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-08-docs-page-after.png?width=1280&height=900&name=nhcarrigan-redesign-08-docs-page-after.png)

After

## The documentation

The documentation at [https://docs.nhcarrigan.com](https://docs.nhcarrigan.com) has the same changes.

- The header carries the same links as the homepage, with the page title beside the logo, and keeps search.
- The sidebar, the content and the contents panel sit on frosted surfaces.
- Cards, buttons, tables and notes use the same lit surfaces.
- The footer is the homepage footer.
- The theme picker is gone. Code blocks use the dark code theme, to match the style guide.

Two policy updates were released with it. The Privacy Policy now discloses our newsletter and marketing emails. The change notice dated 14 October 2026 lists the sections affected. The Professional Services and Commission Policy now states that example prices are estimates, and names social media management as a service.

![The previous documentation home page.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-09-docs-home-before.png?width=1280&height=900&name=nhcarrigan-redesign-09-docs-home-before.png)

Before

![The new documentation home page, with a lit hero card and link cards.](https://mktg.nhcarrigan.com/hs-fs/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-09-docs-home-after.png?width=1280&height=900&name=nhcarrigan-redesign-09-docs-home-after.png)

After

## For developers: version 6 of the shared script

If you build pages that load [https://cdn.nhcarrigan.com/headers/index.js](https://cdn.nhcarrigan.com/headers/index.js), version 6.0.0 is a breaking change.

### What was removed

- The dark theme, the footer theme toggle and the `is-dark` class. Nothing adds `is-dark` any more.
- The `--page-overlay` token.
- The old footer element ids.

### What is new

- A header on every page, unless you exclude it or the page already has its own `header.site-header`.
- A `header` value for the exclusion attribute.
- A `data-nhcarrigan-title` attribute for the header text.
- Opt-in components for cards, notices, quotations, pills, FAQ cards, grids and buttons.

To set the header text:

```
<html lang="en-GB" data-nhcarrigan-title="Tarot">
```

If you leave it out, the script takes the page title and removes the NHCarrigan name and its separators. Long titles are cut short with an ellipsis.

To skip the header on a page that has its own:

```
<html lang="en-GB" data-nhcarrigan-exclude="header">
```

Every component class starts with `nhc-`, for example `nhc-card` and `nhc-btn nhc-btn-primary`. We prefixed them so that they cannot collide with the styles in your own application.

The semantic variables still exist, and they keep their light values, so existing pages continue to work. The style guide at [https://nhcarrigan.com/style/](https://nhcarrigan.com/style/) lists every component, every variable and the full upgrade table. The release notes are at [https://github.com/nhcarrigan/website-headers/releases](https://github.com/nhcarrigan/website-headers/releases).

## What went wrong

We found these problems while building this. We are listing them because they are the useful part.

### A dark section turned pale

We wrote a style rule for the light sections. It also matched our dark process section, and replaced its dark background with a pale one. The text became pale on pale, a contrast of about 1 to 1. Measuring found it. It happened a second time when we added a narrow-screen variant of the same rule. We now scope that rule explicitly, and the project documentation records the trap.

### The glowing seam stopped short on an ultrawide screen

Each section has a glowing line along its top edge. We had inset it from both sides, which looked like a soft fade on a normal monitor. On an ultrawide monitor it visibly stopped before the edges. It now spans the full width. Our earlier tests had not included a screen that wide.

### A background that painted nothing

To stop page content scrolling behind the floating header, we added a strip of frosted artwork behind it. The strip did nothing. A CSS background shorthand allows a plain colour only in its last layer, and we had put one above the image. The browser discarded the entire declaration without a warning. A screenshot showed the fault straight away. Reading the code had not.

### Blue text in the HubSpot header

On HubSpot pages, the header title and button rendered in blue. HubSpot's theme styles links with a more specific selector than ours, so theirs won. We raised the specificity of the header and button rules. This would have affected any application with strong link styles, including ones outside HubSpot. HubSpot's theme also colours its links violet, which fell below the 4.5 to 1 requirement on our lit card. We set its link colour variables to ours.

Each of these was found by measuring or by looking at a rendered page. None was found by reading code.

## If something looks wrong

If a page looks wrong to you, please send us the address, the size of your screen and a screenshot. Our contact address is [contact@nhcarrigan.com](mailto:contact@nhcarrigan.com).

Thank you for reading.

## Share this post

<https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmktg.nhcarrigan.com%2Fblog%2Fredesigning-nhcarrigan><https://twitter.com/intent/tweet?url=https%3A%2F%2Fmktg.nhcarrigan.com%2Fblog%2Fredesigning-nhcarrigan><https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fmktg.nhcarrigan.com%2Fblog%2Fredesigning-nhcarrigan><https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fmktg.nhcarrigan.com%2Fblog%2Fredesigning-nhcarrigan>[mailto:https%3A%2F%2Fmktg.nhcarrigan.com%2Fblog%2Fredesigning-nhcarrigan](mailto:https%3A%2F%2Fmktg.nhcarrigan.com%2Fblog%2Fredesigning-nhcarrigan)

## Keep reading

### [![](https://mktg.nhcarrigan.com/hs-fs/hubfs/Generated_Image_September_29_2026_-_9_34PM.jpg?width=6336&height=2688&name=Generated_Image_September_29_2026_-_9_34PM.jpg) How I Approach Events Differently](https://mktg.nhcarrigan.com/blog/how-i-approach-events-differently)

### [![](https://mktg.nhcarrigan.com/hs-fs/hubfs/Generated_Image_September_29_2026_-_9_34PM.jpg?width=6336&height=2688&name=Generated_Image_September_29_2026_-_9_34PM.jpg) How to Spot a Fake Email](https://mktg.nhcarrigan.com/blog/how-to-spot-fake-emails)

<https://linkedin.com/company/nhcarrigan><https://www.facebook.com/nhcarrigan><https://mktg.nhcarrigan.com/blog/x.com/nhcarrigan1><https://bsky.app/profile/nhcarrigan.com><https://support.nhcarrigan.com><https://www.reddit.com/r/nhcarrigan/>

---

[Privacy Policy](https://docs.nhcarrigan.com/legal/privacy/) · [Terms of Service](https://docs.nhcarrigan.com/legal/terms/) · © NHCarrigan 2026. All rights reserved.

 

15640 NE Fourth Plain Blvd, Ste 106 #923  
Vancouver, Washington 98682  
United States   
(971) 303-8662‬

 

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Naomi Carrigan",
    "url" : "https://mktg.nhcarrigan.com/blog/author/naomi"
  },
  "dateModified" : "2026-10-16T21:36:04.747Z",
  "datePublished" : "2026-10-16T21:36:04.000Z",
  "headline" : "Redesigning NHCarrigan",
  "image" : [ "https://mktg.nhcarrigan.com/hubfs/blog/redesign-2026-10/nhcarrigan-redesign-01-homepage-hero-after.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://mktg.nhcarrigan.com/blog/redesigning-nhcarrigan",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://mktg.nhcarrigan.com/hubfs/logo.png"
    }
  }
}
```