Make Nordlys your own.

Nordlys is built from one shared system: Variables, native classes, six components (Navbar, Footer, CTA Section, FAQ Section, Button Primary and Button Secondary) and one GSAP script. Change the system and every page follows. Read chapter 1, then jump to what you need.

01Getting started

The template ships 24 pages. Most are variants, so pick the layout you like and delete the rest.

1. 02Duplicate the template into your workspace. Leave the original untouched as a reference.
2. 03Choose a home layout. Open its page settings and use Set as home page, then delete the other three or keep them as drafts.
3. 04Open the Style guide page and change your Variables there first (chapter 2). It shows every part, so you see the effect straight away.
4. 05Replace the logo, then the content, then the CMS items. Set up form notifications last.

Components and props

Repeated parts are components in three groups. Select an instance and edit its text and links in the Props panel on the right; that changes this page only. To change the Navbar or Footer on every page, open the component and edit the default values of its props.

06Colours & fonts

Every colour and font is a Variable. Class styles are linked to them, so recolouring the whole site means editing a handful of values in the Variables panel.

Fonts

1. 07Fonts are self-hosted with the theme (src/styles/fonts.ts): Inter Tight (300, 400, 500) and Geist Mono (400), from Fontsource. Both are free (see Licenses).
2. 08To use a different sans, add it there and change the Font / Primary variable. The footer wordmark measures the font by name, so also change '500 100px "Inter Tight"' in block N5 of the site footer code.

Type scale

Every font size, line height, letter spacing and weight is a Variable in the Layout and Primitives collections. Change one value and every heading or label that uses it follows. Display and Mobile sizes are fluid: edit the clamp() value to change the smallest and largest size together.

09Logo & wordmark

The logo is an image inside the Navbar and Footer components, so you replace it once and every page updates.

1. 10Open the Navbar component, select the logo image and choose your own file in the Assets panel. Keep a descriptive alt text. Do the same in the Footer component.
2. 11The preloader draws the split-N mark from three shapes. To switch the preloader off, set SHOW_LOADER = false in block N1, or delete the Loader div inside the Navbar component.
3. 12The footer wordmark is live text inside the element with the ID wmk. Change the word; the script sizes it to span the full width. Keep the IDs wmk and glWm.

The wordmark, the email address and every footer link are props of the Footer component; edit the prop defaults inside the component to change every page at once. Type the address once in Email Address and Email Link: block N5 splits it into the rolling letters when the page loads. If you change the wordmark word, re-measure WM_INK at the top of block N5 so it still spans the full width.

13Shader

The violet light is a live SVG silk, animated with GSAP. In the markup it is a div holding a rendered still image and two custom attributes; when the page loads, the site script draws the moving light over the still.

data-silk = 1 data-shader = {'light':[.64,.74],'seed':31}

• One shader off: delete the div, or remove its data-silk attribute. The rendered still image stays in its place.
• Performance: the silk pauses off screen and holds one still frame for visitors who prefer reduced motion. Defaults for every block are in SILK, block N3b of the footer code.

14How to edit GSAP animations

All motion uses GSAP with ScrollTrigger and SplitText, installed from npm and loaded by src/components/CustomCode.astro. src/custom-code/site-head.html only hides the page until the first frame is ready (with a 3-second safety fallback). The motion script is in public/assets/js/nordlys.js, split into numbered blocks:

Pages with their own motion (the four homes, pricing switches, list filters) carry a short GSAP script in Page settings › Custom code › Before </body>. Home scripts are labelled by block (H1-01, H1-02 … on Home 01, H2-… on Home 02, and so on), so you can delete a block together with its section.

To animate an element, add a custom attribute in its section component. No timelines to build:

To remove an animation, delete the attribute; the element simply shows. Visitors who prefer reduced motion get no preloader and no GSAP animation, and every element stays fully visible.

15CMS

Three collections drive the News, Customers and Careers sections. Each list page uses Collection Lists; each detail page is a Collection Template. Every field has help text in the CMS panel.

1. 16Turn on Featured for one item in each collection; the featured block is a Collection List filtered by Featured = true, limit 1.
2. 17Careers lists only items with Open on, featured roles first.
3. 18The filter tags on News, Case studies and Careers are plain links. The page script shows only the rows whose category, industry or department matches the clicked tag. No plugins are needed.

19Forms

Every form shows the design's success message; to receive submissions, set its action to your form service (README › Forms).

1. 20Set the form action to your form service's endpoint in src/components/.
2. 21Choice chips are native radio buttons and checkboxes; the selected look is applied by the state engine (block N2).
3. 22The success message is an H2 styled in mono lilac; edit its text in the form's success block. The error message uses the same style.

23Icons

The eight icons are inline dot-matrix SVGs: circles of radius 0.9 on a 3px grid inside a 33 × 21 viewBox. Copy one from the Style guide.

• Hover: put data-animate="lit" on the parent card, chip or link. On hover the dots turn lilac with a violet glow, one after another.
• Colour: the dots follow the text colour of their parent.

24Utility pages

When you delete the template pages, remove the Template column from the Footer component as well.

25Support

Template support covers setup questions and anything that does not work as described here. Write to hello@example.com and include:

• The build number from the footer, for example 26.10.05.
• A link to your repository or demo and the page in question.
• What you expected, what happened, and a screenshot.

We reply within two working days. Customisation work is outside template support.