Design — Ciketo HTML

Ciketo is styled with Tailwind CSS classes and a few colour, font and breakpoint tokens. Most changes are HTML edits; a new colour or font needs a CSS rebuild.

How the styling works

The pages are styled with Tailwind CSS classes written in the HTML (class="rounded-[2px] bg-white p-5 text-soft"). assets/css/style.css contains exactly the classes the pages use, generated from src/css/style.css.

That means two kinds of change:

Change	Rebuild the stylesheet?
Move, copy or delete elements; use classes that already appear somewhere in the site	No
Change a colour, a font, a breakpoint; use a class that appears nowhere yet (say `mt-7`)	Yes

Rebuilding the stylesheet

Once, install the tools (needs Node.js 20 or newer):

npm install

Then, after a change:

npm run build:css      # one build
npm run watch:css      # rebuilds on every save while you work

Both write assets/css/style.css. The build scans the .html files in the root folder and one folder down (services/, blog/, legal/), and assets/js/main.js, so a class you add there is picked up. Upload the new style.css with your pages.

Colours

In src/css/style.css:

@theme {
  --color-ink: #000000;        /* Black: headings, dark buttons and cards, the footer */
  --color-soft: #4b4a4a;       /* Soft Black: body text, dates, form labels */
  --color-grey: #e5e5e5;       /* Grey: lines, field borders, text on dark */
  --color-orange: #e2652a;     /* Orange: label squares, step numbers, hovers, the focused field */
  --color-background: #f4f0f0; /* Background: the page and the form fields */
}

Each becomes a class (bg-ink, text-soft, bg-orange). Change the values, rebuild, and the whole site follows. Keep text on its background at a contrast of at least 4.5:1 so it stays readable.

A few colours are also written as rgb() values, in the HTML or in the site script, because the script animates them. If you change a token, replace its value in the files too (find and replace in files, assets/js/main.js included):

Colour	Written as	Where
Orange	`rgb(226, 101, 42)`	The current page in the menus, and the hover of the small buttons (“Get a Quote” in the header, “Explore …”): their `data-motion` and `style` attributes
Grey	`rgb(229, 229, 229)`, `rgba(229, 229, 229, 0)`	The hover of the menu links
Background	`rgba(244, 240, 240, 1)`, `rgba(244, 240, 240, 0)`	The header: the `style` of each page’s `<header>`, and `assets/js/main.js`, which turns it solid as you scroll
Black, white	`rgb(0, 0, 0)`, `rgb(255, 255, 255)`	Button fills and labels, and the open card of the services accordion (also in `main.js`)

The error state of the quote form (“Something went wrong”) is red, #FF2244, written in the Submit button’s classes: data-[status=error]:text-[rgb(255,34,68)] and data-[status=error]:bg-[rgba(255,34,68,0.15)]. Change both and rebuild the stylesheet.

Logo and icons

The Ciketo logo is an <svg viewBox="0 0 94 18"> drawing (the mark and the name) inside the logo link in the header and the footer of every page. It’s drawn in the current text colour: black in the header’s white box, white in the footer and, on phones, over the dark covers. To use your own, replace the <path d="…"> elements (and the viewBox) in those two places with your logo’s, using find and replace in files, and the link’s aria-label="Ciketo" with your name. The logo shows at 94 × 18 px everywhere (w-[94px] and h-[18px] on the link); change the width for a logo of other proportions, and rebuild the stylesheet if that class is new.

icon.svg and apple-icon.png (180 × 180 px) in the root folder are the icons in the browser tab and on a phone’s home screen. Replace the files, keeping the names.

The interface icons in the pages are inline SVG (Phosphor): the arrow in the buttons and the stars of the ratings. To use another one, open it on phosphoricons.com, copy its SVG and paste it where the old one is. Icons take their colour from the text around them.

Fonts

Inter ships in assets/fonts/inter-variable.woff2 and is declared at the top of src/css/style.css:

@font-face { font-family: "Inter"; src: url("../fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; … }
:root { --font-inter: Inter, "Inter fallback: Arial", sans-serif; }

Every page uses it through font-sans on the <body>. To use another font:

Put its .woff2 file in assets/fonts/.
Change the @font-face rule (font-family and src) and the first name in --font-inter. The pages use the weights 400, 500 and 600: a font that isn’t variable needs one @font-face rule per weight file.
Rebuild the stylesheet.

The font file covers Western European languages (the rule’s unicode-range). For other alphabets, use a file that includes them and remove the unicode-range.

Fonts from Google Fonts can be downloaded as files with https://gwfh.mranftl.com, so they are served from your own domain, which is faster and needs no consent banner.

Sizes and spacing

Text sizes are classes with a phone value first and the tablet (md:) and desktop (lg:) values after: text-[30px] md:text-[36px] lg:text-[42px]. Spacing uses Tailwind’s scale (4 px per step, so p-5 is 20 px and gap-2.5 is 10 px) or exact values in brackets (py-[60px]). Content is at most 1600 px wide (max-w-[1600px]), with 15, 20 and 40 px at the sides. Every box has 2 px corners (rounded-[2px]): buttons, cards, photos, form fields and the header’s boxes.

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

max-md: and max-lg: apply below those widths: max-lg:hidden hides the header clock on phones and tablets.

The header

The header has two looks. On the pages that open with a dark photo (Home, Contact and 404), the <header> carries data-cover: while the page is at the top, the header is transparent, with a white clock and a white “Get a Quote” button (on phones, a white logo and menu button). As soon as the visitor scrolls or opens the phone menu, it turns solid: the page background, with dark text and a black button. Every other page starts solid. The script swaps the colours and the two “Get a Quote” buttons (data-tone-button="white" and "black") between the two looks, and each page’s header is written in the look it starts with. To give a page the other look, copy the whole <header> from a page that has it, rather than adding or removing data-cover.

Components

The style guide page: the colours and text styles, then every component with its name

style-guide.html shows the colours, the text styles, the logo, icons and clock, the header’s parts, the buttons, the section label and title, the facts, the post card, the services accordion, the steps, the FAQ, the ticker, the rich text and the form, each with its name. To reuse one, copy its markup from there or from the page that shows it.

Elements with data-… attributes are wired to the site script, so keep those attributes when you copy them: data-header, data-cover, data-hamburger, data-clock, data-hover, data-motion, data-appear, data-service-accordion, data-faq-item, data-steps, data-toggle, data-on, data-off, data-testimonials, data-ticker, data-load-more, data-form, …

Motion

The hover effects, the Home hero’s entrance, the header, the accordions, the steps, the testimonials, the logo ticker and the blog list are all in assets/js/main.js, and respect the visitor’s “reduce motion” setting. A few settings are written in the HTML:

Effect	Where
The Home title appears word by word; the line under it and the cards rise in	`data-appear="text"` (rises 10 px) or `data-appear="block"` (7 px), with `data-delay` in seconds and `style="opacity: 0; transform: translateY(…)"`. Remove them from an element to show it at once.
Hovers on buttons, menu links and post cards	`data-hover` on the element, and `data-motion` on its parts: the `rest` and `hover` values the script moves between
The client logos scroll at 20 px per second, 60 px apart	`data-ticker="20"` on the ticker row; the gap is `style="gap: 60px"` on the row and on each of its three copies
The Blog shows six posts at a time	`data-load-more="6"` on the list in `blog.html` (Editing the site)