Brand Assets

Brand Use Developers

NHCarrigan has two primary brand assets: our logo and our mascot, Hikari. Both are available for use under the rules below. Any use must comply with our Code of Conduct.

Logo

Download

Hikari (Mascot)

Download

Usage Rules

Both assets may be placed on any background colour.
Both assets must be displayed at a minimum size of 512×512 pixels.
Both assets must link back to nhcarrigan.com whenever used.
Hikari may only be used when the NHCarrigan logo is also present and visible in the same area.
All use must comply with our Code of Conduct.

Prohibited Uses

Both assets must be used exactly as provided. No modifications of any kind are permitted. The following examples illustrate common prohibited alterations:

✗ Do not recolour

Do not apply colour filters, tints, or overlays to either asset.

✗ Do not rotate

Do not rotate either asset at any angle.

✗ Do not stretch

Do not stretch, squash, or distort the proportions of either asset.

✗ Do not crop

Do not crop, clip, or partially obscure either asset.

✗ Do not invert

Do not invert, desaturate, or otherwise alter the colours of either asset.

✗ Hikari without logo

Do not use Hikari unless the NHCarrigan logo is also visible in the same area.

Colour Palette

Brand Use Developers

These are the official NHCarrigan brand colours. Use them for any NHCarrigan-adjacent content to maintain visual consistency. Developers should reference the CSS custom property names rather than hardcoding hex values, so that dark mode works correctly.

Witch Purple #2B1B3D --witch-purple

Witch Plum #44275A --witch-plum

Witch Rose #A8577E --witch-rose

Witch Mauve #D4A5C7 --witch-mauve

Witch Lavender #E8D5E8 --witch-lavender

Witch Black #0A0009 --witch-black

Witch Silver #C0C0C0 --witch-silver

Witch Moon #F5F5F5 --witch-moon

Semantic Theme Variables

Developers should use these semantic variables in preference to the raw palette colours. They automatically remap in dark mode.

:root {
  --foreground: var(--witch-purple);   /* Primary text */
  --background: var(--witch-moon);     /* Page background */
  --accent:     var(--witch-rose);     /* Links and highlights */
  --border:     var(--witch-plum);     /* Borders and dividers */
  --highlight:  var(--witch-mauve);    /* Hover states */
}

Typography

Developers

NHCarrigan web applications use four typefaces, all loaded from Google Fonts. Add the following import at the top of your stylesheet:

@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Creepster&family=Griffy&family=Henny+Penny&display=swap');

Griffy — Headings (h1, h2, h3, h4, h5, h6)

The quick brown fox jumps over the lazy dog

Used for all heading elements. Applied automatically — no class needed.

Kalam — Body text, UI, form elements

The quick brown fox jumps over the lazy dog

The default page font. Applied to all body text, inputs, and general UI. Applied automatically via html — no class needed.

Creepster — Accent display text (.witchy-accent)

The quick brown fox jumps over the lazy dog

Used via the .witchy-accent class. Use sparingly for labels and callouts.

Henny Penny — Mystical display text (.mystical-text)

The quick brown fox jumps over the lazy dog

Used via the .mystical-text class. Suited to large display headings and special callouts. Use sparingly.

Icons

Developers

All NHCarrigan web applications use Font Awesome for iconography. Font Awesome is loaded automatically via the shared header script — you do not need to add a separate import. Use standard <i> tags with Font Awesome class names:

<!-- Solid icon -->
<i class="fas fa-heart"></i>

<!-- Brand icon -->
<i class="fab fa-github"></i>

<!-- Regular icon -->
<i class="far fa-star"></i>

Browse the full library at fontawesome.com/icons.

Layout

Developers

All NHCarrigan pages share a common layout delivered by the shared header script. Include it in every page's <head>:

The script injects the global stylesheet, Font Awesome, footer markup, and theme toggle logic. Your page only needs to provide the <main> element with your content.

Page Structure

body::before — Background image (fixed, full-viewport, z-index: -2)

body::after — Purple gradient overlay (fixed, full-viewport, z-index: -1)

<main> — Primary content container
max-width: 1080px · margin: auto · padding: 40px · border-radius: 15px

Background & Overlay

Every page uses a two-layer background system. This is applied automatically by the shared stylesheet — do not override it.

/* Layer 1: Background image */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url(https://cdn.nhcarrigan.com/background.png) center / cover;
  z-index: -2;
}

/* Layer 2: Mystical purple gradient overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(168, 87, 126, 0.35) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(68, 39, 90, 0.35) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(10, 0, 9, 0.5) 0%,
      rgba(43, 27, 61, 0.25) 50%,
      rgba(43, 27, 61, 0.4) 100%
    );
  z-index: -1;
}

Responsive Breakpoints

Max Width	Changes
`625px`	Footer height reduces to 50px; Tree Nation badge hidden; main bottom margin reduces to 60px
`425px`	Donate badge hidden from footer
`350px`	Footer font size reduces to 10pt

Custom Cursors

Developers

NHCarrigan pages use custom SVG cursors as a distinctive brand element. Four cursor states are defined and must be applied to the correct elements. The cursors are provided as inline SVG data URIs in the shared stylesheet — copy them exactly; do not substitute standard browser cursors.

Default

Applied to: html

A cross-shaped flower with a witch-purple body, rose centre, and a trailing lavender sparkle dot. Shown in all non-interactive areas.

Pointer

Applied to: a, button, input[type="submit"], input[type="button"], select

The same flower shape with a glowing rose fill, indicating a clickable or interactive element.

Text

Applied to: input[type="text"], input[type="email"], input[type="password"], textarea

A classic I-beam styled in witch purple with a rose midpoint dot, indicating an editable text field.

Move / Drag

Applied to: [draggable="true"]

A four-directional diamond shape in witch purple, indicating a draggable element.

Components

Developers

All components below are styled automatically by the shared stylesheet. No additional classes are required unless noted.

Buttons

<button>Click Me</button>
<input type="submit" value="Submit" />

Links

An example link

<a href="https://nhcarrigan.com">An example link</a>

Form Inputs

<input type="text" placeholder="Text input" />
<input type="email" placeholder="Email input" />
<textarea rows="3"></textarea>
<select>
  <option>Option one</option>
</select>

Tables

Name	Role	Status
Naomi	Founder	Active
Hikari	Mascot	Always here
Contributor	Developer	Welcome!

<table>
  <thead>
    <tr><th>Column</th></tr>
  </thead>
  <tbody>
    <tr><td>Value</td></tr>
  </tbody>
</table>

Blockquotes

Permanence in a Transient World.

<blockquote>Your quote here.</blockquote>

Code

Use inline code within body text.

// Code block example
const greeting = "Hello, world!";

<!-- Inline -->
<code>inline code</code>

<!-- Block -->
<pre><code>// your code here</code></pre>

Lists

First item
Second item
Third item

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Special Classes

Developers

Three utility classes provide decorative text effects. Use them sparingly — they are designed for display emphasis, not body text.

.witchy-accent

Witchy Accent Text

Creepster font with wide letter-spacing, a rose text shadow, and a subtle skew. Good for labels, taglines, or section callouts.

.mystical-text

Mystical Display Text

Henny Penny font with letter-spacing and a subtle purple text shadow. Suited to display headings or special callouts.

.spooky-title

Spooky Title Text

Creepster font with a purple-to-rose-to-mauve gradient fill. Use for large display titles where maximum visual impact is desired.

Dark Mode

Developers

Dark mode is activated by adding the .is-dark class to the <html> element. The shared footer script handles this automatically via the theme toggle button — you do not need to implement the toggle yourself.

If your page includes custom elements beyond the standard components, add .is-dark overrides for those elements:

.is-dark .your-custom-element {
  background: rgba(10, 0, 9, 0.95);
  color: var(--witch-lavender);
  border-color: var(--witch-rose);
}

Theme Variable Remapping

Variable	Light Mode	Dark Mode
`--foreground`	--witch-purple	--witch-lavender
`--background`	--witch-moon	--witch-black
`--accent`	--witch-rose	--witch-mauve
`--border`	--witch-plum	--witch-rose
`--highlight`	--witch-mauve	--witch-plum

Preview

Light Mode

Body text uses --witch-purple against a near-white gradient background.

Links use --witch-rose in light mode.

The main container has a soft lavender gradient with a rose box shadow glow.

Dark Mode

Body text uses --witch-lavender against a near-black gradient background.

Links use --witch-mauve in dark mode.

The main container switches to a deep gradient with an intensified rose glow on the box shadow.

Scrollbar & Selection

Developers

The shared stylesheet defines custom scrollbar and text selection styles. These are applied automatically — do not override them in page-specific stylesheets.

Scrollbar

Webkit scrollbars (Chrome, Edge, Safari) are styled to match the witch palette. Firefox uses the standard scrollbar with no customisation.

::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--witch-lavender); }
::-webkit-scrollbar-thumb { background: var(--witch-plum); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--witch-purple); }

Text Selection

Selected text is highlighted in witch rose with moon-white text. This applies across all browsers.

Try selecting some text on this page to see it in action!

::selection      { background: var(--witch-rose); color: var(--witch-moon); }
::-moz-selection { background: var(--witch-rose); color: var(--witch-moon); }

Animations

Developers

A small set of animations are defined in the shared stylesheet and applied to specific elements. Do not remove or override them — they are part of the brand's playful character.

Wiggle

Applied automatically to all <h1> elements. A gentle, continuous rocking animation that gives page titles their personality.

Page Title

@keyframes wiggle {
  0%, 100% { transform: rotate(-2deg); }
  25%       { transform: rotate(2deg); }
  50%       { transform: rotate(-1deg); }
  75%       { transform: rotate(1deg); }
}

h1 {
  transform: rotate(-2deg);
  display: inline-block;
  animation: wiggle 4s ease-in-out infinite;
}

Hover Transitions

Interactive elements use a consistent transition: all 0.3s ease for smooth hover feedback. Key hover behaviours to preserve:

Element	Hover Effect
Buttons	Lifts up, rotates slightly, scales up, gains rose border and glow
Links	Colour shifts to --witch-plum, rose underline appears
Footer links	Colour shifts to --witch-mauve, soft text glow appears
Social list items	Background fills with rose tint, row nudges right

Contact

Brand Use Developers

Have a question not covered by this guide? We're happy to help.

Brand & logo enquiries — reach us through our website.
Developer questions — join our community and ask in our Discord server.
Code of Conduct — all use of NHCarrigan brand assets must comply with our Code of Conduct.

NHCarrigan Style Guide

Brand Assets

Logo

Hikari (Mascot)

Usage Rules

Prohibited Uses

Colour Palette

Semantic Theme Variables

Typography

The quick brown fox jumps over the lazy dog

Icons

Layout

Page Structure

Background & Overlay

Responsive Breakpoints

Custom Cursors

Components

Buttons

Links

Form Inputs

Tables

Blockquotes

Code

Lists

Special Classes

.witchy-accent

.mystical-text

.spooky-title

Dark Mode

Theme Variable Remapping

Preview

Light Mode

Dark Mode

Scrollbar & Selection

Scrollbar

Text Selection

Animations

Wiggle

Page Title

Hover Transitions

Contact