--- version: alpha name: "Tile store template by 8B" description: "A one-page site for a tile shop or bathroom studio, drawn as a white grid ruled in black with fields of yellow, blue and red. Free HTML template by 8B, MIT." colors: primary: "#121212" secondary: "#5c5c5c" neutral: "#d9d9d9" surface: "#ffffff" on-surface: "#121212" accent-yellow: "#ffcf00" accent-blue: "#1858b8" accent-red: "#e1251b" typography: headline-display: fontFamily: Radio Canada Big fontSize: 70px fontWeight: 700 lineHeight: 0.98 letterSpacing: -0.015em headline-lg: fontFamily: Radio Canada Big fontSize: 56px fontWeight: 700 lineHeight: 0.98 letterSpacing: -0.015em title-md: fontFamily: Radio Canada Big fontSize: 22px fontWeight: 700 lineHeight: 1.15 letterSpacing: 0.01em body-md: fontFamily: Radio Canada Big fontSize: 16px fontWeight: 400 lineHeight: 1.55 caption: fontFamily: Radio Canada Big fontSize: 13px fontWeight: 400 lineHeight: 1.5 label-md: fontFamily: Radio Canada Big fontSize: 12px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.08em button: fontFamily: Radio Canada Big fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em wordmark: fontFamily: Radio Canada Big fontSize: 120px fontWeight: 700 lineHeight: 0.98 letterSpacing: 0.14em rounded: none: 0px spacing: rule: 2px cell-padding: 32px edge-left: 14px edge-right: 40px nav-height: 64px nav-height-mobile: 56px gutter-mobile: 16px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.surface}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 26px height: 52px button-primary-hover: backgroundColor: "{colors.accent-yellow}" textColor: "{colors.primary}" nav-link: textColor: "{colors.primary}" typography: "{typography.label-md}" chip-sample: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" rounded: "{rounded.none}" padding: 10px height: 34px chip-sample-checked: backgroundColor: "{colors.primary}" textColor: "{colors.surface}" input-field: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 8px height: 44px material-row-head: backgroundColor: "{colors.neutral}" textColor: "{colors.primary}" typography: "{typography.label-md}" height: 48px step-current: backgroundColor: "{colors.accent-yellow}" textColor: "{colors.primary}" typography: "{typography.body-md}" --- # TEGEL ## Overview TEGEL is a one-page site for a tile shop or bathroom studio that has a showroom, posts free samples and sends its own fitters. The one idea is that the page is a tiled wall: every section is a grid of white cells separated by thin black joints, and three flat fields of yellow, blue and red sit in some cells like glazed tiles among plain ones. It suits shops that want to look exact and confident, like a setting-out plan on squared paper. ## Colors The ground is white and the joints are near-black, so black and white carry the whole page and the three accents stay rare. - **primary, #121212:** body text, the joints between cells (the near-black background of each section grid showing through the gaps), primary buttons, checked sample chips, lit step numbers, the black cell in the bond wall and the Ink glaze field. - **surface, #ffffff:** the page ground and the fill of every cell, button text on black, and the text of checked chips. - **accent-yellow, #ffcf00:** the blocks in the navigation bar, the opening and the contact section, the hover wipe on buttons, the underline of the current navigation link, the markers beside the bond list and the room list, the current step, the guarantee and phone cards and the Saffron glaze. - **accent-blue, #1858b8:** the block in the opening, the strip beside the samples form, cells of the bond wall, the marker that travels along the job steps, focus outlines on buttons and fields, and the Cobalt glaze. - **accent-red, #e1251b:** the end block of the navigation bar and the blocks in the opening, materials, contact and footer sections, cells of the bond wall, plus the Signal glaze. - **neutral, #d9d9d9:** the materials table header row, the Chalk glaze field, one cell of the bond wall and the ground behind the glaze photos. - **secondary, #5c5c5c:** small captions and descriptions, and the No cells in the materials table. ## Typography Radio Canada Big is the only family, loaded as a variable font for weights 400 to 700 with a metric-matched fallback so text does not jump when it arrives. Section headings and the opening heading are 700 weight, uppercase and tight, with line height just under 1: they scale with the viewport, roughly 34 to 56 pixels for section titles and 38 to 70 pixels for the opening. Item titles are 700 weight uppercase at about 18 to 22 pixels. Labels, buttons and the table header are 12 pixels, uppercase and widely tracked. Body text is 16 pixels at 400 weight; descriptions use 13 pixels in the secondary grey. The wordmark is spaced very widely, 0.32em in the navigation bar and 0.14em at up to 120 pixels in the footer. ## Layout There is no centred container. Each section is a CSS grid across the full width, and a two pixel gap on a near-black background draws the joints. Narrow strips, 14 pixels on the left and 40 pixels on the right on desktop, frame the page; the left one stays empty and the right one sometimes carries a colour block. Inside, columns use fractions such as 25 / 15 / 44 / 12 in the opening and 32 / 68 for the text-and-wall sections. Cell padding is up to 32 pixels, scaling from 18. Below 900 pixels the grids fall to one or two columns, the left strip goes and a 20 to 28 pixel column on the right carries the colour blocks, the navigation bar drops from 64 to 56 pixels with a menu button, and gutters are 16 pixels. The materials table turns into stacked rows with labelled Yes and No cells, and the bond wall moves above its text. ## Elevation & Depth There are no shadows and no rounded layers. Depth comes from joints, from fields that wipe over cells and from photos clipped to cell shapes. ## Shapes Corners are square everywhere, including buttons, chips and fields. The only drawn shapes are the cells themselves, the small square Yes and hollow No markers in the materials table, and the plus sign in the questions that turns into a cross when opened. ## Components - **button-primary:** black block, white 12 pixel uppercase label, 52 pixels high with 26 pixels of side padding; on hover a yellow field slides in from the left and the text turns black. - **nav-link:** tracked 12 pixel label with a thin underline that shrinks on hover; the section in view gets a 4 pixel yellow underline. - **chip-sample:** a square outlined chip with a 2 pixel border and an 11 pixel label, 34 pixels high at minimum; checked chips turn black, and unchecked chips turn yellow on hover. - **input-field:** no box, only a 2 pixel black line under the text, 44 pixels high, with a blue focus outline. - **material-row-head:** a grey row of tracked labels above six material rows that are at least 104 pixels high. - **step-current:** the step the blue marker has reached takes a yellow ground; steps already passed turn their number block black. ## Motion The page loads GSAP 3.13.0, ScrollTrigger and Lenis for smooth scrolling. The motion idea is cells being laid: colour fields wipe in over the grid and rows slide into position like tiles being set. - **Opening:** CSS keyframes on load. The blue, yellow and red fields wipe in from the left in turn over 0.9 seconds, the photo opens from a horizontal cut and the text rises. There is no scroll scene here. - **Bonds:** pinned for about two screens of scrolling. The four rows of the cell wall slide sideways to half bond and then third bond while the matching name in the list lights up. - **Rooms:** pinned for about three screens. Four photos sit in clipped cells whose borders move so each room takes the large cell in turn, with a yellow marker beside its name. - **Glazes:** pinned while the row of five bays travels sideways, for as far as the row overflows the screen (about one screen on a laptop, less on a wide monitor), and each bay's colour field rises as the bay comes in from the right. - **Service:** a blue marker moves along a rail and each step it passes turns its number black, the current one yellow. - **Contact:** the showroom photo widens from a small window while a red block slides down and a yellow one slides across. - **Smaller effects:** headings and tables start offset left and right in turn and settle as they rise; fields wipe in with a power3 in-out ease over 0.9 seconds; sample chips and fitter cards open from their upper-left corners in a stagger of 0.09 seconds. Buttons use a 0.5 second wipe with a sharp ease. The navigation bar slides away when you scroll down and returns on scroll up. With reduced motion on, the entrance and scroll animations and smooth scrolling are off: the bond wall stays in stack bond, the rooms stay in their first cell layout, the glazes wrap into a grid and no section is pinned. Hover transitions and the hiding navigation bar still run. ## Do's and Don'ts - Do keep corners square and borders at two pixels; the joints are the style. - Do use yellow, blue and red as flat fields, one or two per section, never as gradients. - Do keep headings uppercase, heavy and tight, and labels uppercase and tracked. - Do keep Radio Canada Big as the only family. - Do recolour through the colour variables in :root, not by editing single rules. - Don't add rounded cards, soft shadows or glass effects. - Don't add a second display typeface or decorative icons beyond the simple line icons in the navigation bar. - Don't pin more sections than the three that already hold the screen; they are already long on a phone.