NHCarrigan Style Guide
++ This is the authoritative reference for NHCarrigan brand and design + standards. It serves two audiences: +
+-
+
- + Brand users — Anyone featuring our logo or mascot in + advertisements, shoutouts, fan content, or other external materials. + +
- + Developers — Anyone building new web applications or + contributing to existing ones within the NHCarrigan ecosystem. + +
+ Each section is labelled with the audience it applies to. All use of + NHCarrigan brand assets must comply with our + Code of Conduct. +
+ + + + +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. +
+ + + +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. +
+ +Semantic Theme Variables
++ Developers should use these semantic variables in preference to the + raw palette colours. They automatically remap in dark mode. +
+Typography
+ Developers + ++ NHCarrigan web applications use four typefaces, all loaded from Google + Fonts. Add the following import at the top of your stylesheet: +
++ The quick brown fox jumps over the lazy dog +
++ Used for all heading elements. Applied automatically — no class + needed. +
++ 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.
+
+ The quick brown fox jumps over the lazy dog +
+
+ Used via the .witchy-accent class. Use sparingly for
+ labels and callouts.
+
+ 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:
+
+ 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
++ 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. +
+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
+Form Inputs
+Tables
+| Name | +Role | +Status | +
|---|---|---|
| Naomi | +Founder | +Active | +
| Hikari | +Mascot | +Always here | +
| Contributor | +Developer | +Welcome! | +
Blockquotes
+Permanence in a Transient World.+
Code
+Use inline code within body text.
// Code block example
+const greeting = "Hello, world!";Lists
+-
+
- First item +
- Second item +
- Third item +
Special Classes
+ Developers + ++ Three utility classes provide decorative text effects. Use them + sparingly — they are designed for display emphasis, not body text. +
+ +.witchy-accent
++ Creepster font with wide letter-spacing, a rose text shadow, and a + subtle skew. Good for labels, taglines, or section callouts. +
+.mystical-text
++ Henny Penny font with letter-spacing and a subtle purple text + shadow. Suited to display headings or special callouts. +
+.spooky-title
++ 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:
+
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. +
+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!
+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
+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. + +