Design — Titen Next.js

The look comes from a small set of tokens. Change a token and every page, component and state follows, so you rarely need to touch a component.

See everything first

Run npm run dev and open http://localhost:3000/style-guide. It shows the colours, text styles, buttons, form fields, cards and every other component with its name. When you want to know what a change will affect, look there.

Colours

src/design-system/theme.css:

@theme {
  --color-ink: #121212;        /* text, dark buttons, the footer and dark sections */
  --color-background: #f5f1e5; /* the page, and the header once you scroll */
  --color-sand: #e0dcd7;       /* the Projects band on Home, the Beginnings section on About */
  --color-accent: #c36036;     /* button hovers, award names, accent buttons */
  --color-orange: #e8481c;     /* the current page in the menu, the rating star */
  --color-danger: #e8481c;     /* form errors */
}

Each name becomes a Tailwind class: bg-ink, text-accent, bg-sand. Swap the hex values for your own palette and the whole site changes. Keep enough contrast between text and its background (at least 4.5:1), or the site becomes hard to read.

Faded colours are opacity modifiers on the same colour: text-ink/80 (labels), bg-ink/30 (divider lines), bg-white/10 (lines in the footer). They follow the palette when you change the colour.

Logo

The Titen wordmark is drawn as an SVG path in src/design-system/components/brand/Logo.tsx, in the current text colour. That’s why it is black on the page and white on the dark Home, About and project covers and in the footer. To use your own:

• As an SVG: paste your logo’s path data into path and set the viewBox to your artwork’s size.
• As an image file: replace the <svg> with an <Image> of your file.

The header shows it at 62 × 25 px (49 × 20 px on phones) and the footer at 74 × 30 px. Change the className sizes in src/components/site/Header.tsx and Footer.tsx to fit your proportions. Its label for screen readers is site.name.

The browser icons are src/app/icon.svg and src/app/apple-icon.png.

Fonts

The template loads Plus Jakarta Sans through next/font in src/app/layout.tsx:

const jakarta = Plus_Jakarta_Sans({ variable: "--font-jakarta", subsets: ["latin"], weight: ["400", "500", "600", "700"] });

To use another Google font, import it by name from next/font/google and keep the variable name:

import { Manrope } from "next/font/google";
const jakarta = Manrope({ variable: "--font-jakarta", subsets: ["latin"], weight: ["400", "500", "600", "700"] });

For a font you have licensed yourself, use next/font/local and point it at the files in src/app/fonts/. Next.js serves the font from your own domain either way, so there is no request to Google at runtime.

The search panel is set in Inter, as on the original design (src/design-system/components/navigation/SearchDialog.tsx). Remove inter.className there to use the site font.

Text styles

src/design-system/tokens/text.ts holds the sizes, weights and line heights, named after the design:

display, h1, h2, h3, h4, h5, h6
paragraph, small, tiny
menu, button

Each is a set of Tailwind classes. The headings have the phone size first and the tablet (md:) and desktop (lg:) sizes after, for example h2: "text-[30px] md:text-4xl lg:text-[42px] leading-[1.2] font-medium". Paragraphs, menu and button labels are the same at every size; menu and button labels are uppercase with a little letter spacing. Change the numbers here rather than in the components, and headings stay consistent across the site.

Use them as className={text.h2} or combine: className={cn(text.h6, "text-white")}.

Breakpoints

Three sizes, set in theme.css:

	Width	Tailwind prefix
Phone	below 810 px	(none)
Tablet	810–1199 px	md:
Desktop	1200 px and up	lg:

Content is at most 1440 px wide. The side padding is 16 px on phones, 30 px on tablets and 50 px on desktops, and sections are 60 / 80 / 100 px apart (src/design-system/components/layout/Section.tsx).

Motion

src/design-system/tokens/motion.ts holds the transitions:

Token	Used for
spring	Arrows turning, menu and link underlines, card hovers, the accordion, the phone menu
springButton	Button colours
springSlide	The slideshows
appearWord, appearLine, appearBlock, appearLate	The appear effects: headings word by word, lines rising, blocks rising when they scroll into view

Lower a spring’s duration for a snappier feel, or raise bounce for a livelier one.

Effect	Where to change it
The Home testimonials change every 4 seconds	interval={4} on <Slideshow> in src/components/sections/HomeHeroSection.tsx
Blocks rise in as you scroll	<Reveal>. Replace it with a plain <div> (same className) where you don’t want it.
Headings appear word by word	<WordsAppear>; a plain heading with the same className shows at once
The header is transparent at the top of Home, About and project pages	hasCover() in src/components/site/Header.tsx; add or remove routes there

Every animation respects the visitor’s “reduce motion” setting.

Rounded corners, spacing, shadows

Titen is square: buttons, form fields and photos have no rounded corners. The exceptions are the testimonial cards (10 px), the search panel (16 px) and the round icons. Spacing is Tailwind classes on the components (px-5, gap-12). Tailwind’s scale is 4 px per step, so p-5 is 20 px. Change them where you see them; the style guide shows the result immediately.

Components

src/design-system/components/ holds the buttons, cards, form fields, the accordion, the service list, the slideshow, the search panel, the videos and the icons. Its README lists every component next to the design it comes from. The sections that make up a page are one level up, in src/components/sections/, and are listed in Pages and sections.

Icons

The icons are Phosphor shapes stored as path data in src/design-system/components/icons/paths.ts, and <Icon name="check" /> draws one in the current text colour. To add one:

1. Open the icon on phosphoricons.com and copy the SVG.

2. Take the d="…" of its <path>.

3. Add a line:

   "my-icon": "M128,24A104,104,0,1,0,…",

Then use <Icon name="my-icon" className="size-5" />. Paths use a 256 × 256 grid, which is what Phosphor exports.