--- version: alpha name: "Interior design template by 8B" description: "A flat periwinkle, pink and lime interior colour studio page set in tall condensed serif type over near-white. Free HTML template by 8B, MIT." colors: primary: "#5767c2" secondary: "#fbb3c9" tertiary: "#dde833" neutral: "#f6f6f9" surface: "#f6f6f9" on-surface: "#5767c2" ink: "#242b68" accent-pink: "#fbb3c9" accent-lime: "#dde833" on-accent: "#242b68" on-primary: "#f6f6f9" typography: headline-display: fontFamily: Roboto Serif fontSize: 6.75rem fontWeight: 500 lineHeight: 0.92 headline-hero: fontFamily: Roboto Serif fontSize: 6.25rem fontWeight: 500 lineHeight: 0.92 headline-md: fontFamily: Roboto Serif fontSize: 3rem fontWeight: 500 lineHeight: 1 quote: fontFamily: Roboto Serif fontSize: 2.75rem fontWeight: 500 lineHeight: 1.08 wordmark: fontFamily: Roboto Serif fontSize: 2.1rem fontWeight: 500 lineHeight: 1 body-md: fontFamily: Google Sans fontSize: 1rem fontWeight: 400 lineHeight: 1.6 label-md: fontFamily: Google Sans fontSize: 0.78rem fontWeight: 500 lineHeight: 1.35 letterSpacing: 0.12em button: fontFamily: Google Sans fontSize: 0.8rem fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.12em rounded: none: 0px full: 999px spacing: gutter: 2.75rem gutter-min: 1rem section: 9rem section-min: 4.5rem tile-gap: 0px field-height: 3rem components: button-primary: backgroundColor: "{colors.accent-lime}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 0.8rem 1.75rem height: 3rem button-secondary: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 0.65rem 1.35rem height: 2.75rem nav-bar: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.label-md}" height: 4rem menu-overlay: backgroundColor: "{colors.primary}" textColor: "{colors.surface}" typography: "{typography.headline-display}" price-pill: backgroundColor: "{colors.accent-lime}" textColor: "{colors.ink}" typography: "{typography.wordmark}" rounded: "{rounded.full}" padding: 0.35em 0.7em paint-card-ink: backgroundColor: "{colors.ink}" textColor: "{colors.surface}" rounded: "{rounded.none}" input-field: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" height: "{spacing.field-height}" --- # Pervenche: interior design template ## Overview Pervenche is a one-page site for a small colour studio, a decorator or a home stylist who sells a method and fixed prices to private clients. The idea is that colour and type carry the page. Everything is flat: periwinkle, pink and lime fields on near-white, tall condensed serif headings, tiny spaced capitals for captions, and a mosaic of geometric tiles instead of a photo hero. The mood is playful, confident and a little French, closer to a paint chart than a magazine. The studio, prices, projects and quotes in the demo are invented and must be replaced. ## Colors Five colours, all set as custom properties in `:root`. Nothing else is introduced. - **Primary (#5767c2, periwinkle):** body text and headings on near-white, hairline rules, the full-bleed bands for client quotes, the price list and the four sittings, the menu overlay and the daylight wall. - **Secondary / accent-pink (#fbb3c9):** glossary letter discs, the plus and ring tiles, the dot that grows inside buttons on hover, the open question icon and one paint card. - **Tertiary / accent-lime (#dde833):** the Commissions and form buttons, the See the rooms tile, the price pills, the fill of the opening text tile, one paint card and the lamp. - **Neutral / surface (#f6f6f9):** page ground and the navigation bar; also the text colour on periwinkle and ink surfaces. - **Ink (#242b68):** text on lime and pink, form text, the opening button (ink with near-white text), focus outlines and the darkest paint card. One paint card, the lilac one, is a 40/60 oklab mix of periwinkle and pink computed in CSS; do not turn it into a new variable. Lime and pink form the 3px gradient used for the price rules and the link underlines on hover. Keep body text on near-white at periwinkle or ink. ## Typography Two families, both from Google Fonts. - **Roboto Serif** at weight 500, in its narrowest width (50%) and the largest optical size (144), sets every heading except the small sans footer column labels, the wordmark, the menu links, the price pills and the giant contact and quote words. Line height is tight, 0.8 to 1.08, and letter spacing is 0. The hero heading runs from 3rem up to about 100px; section headings from 3rem up to 108px. Display lines are scaled so a given number of characters fills the width (the `--len` value). - **Google Sans** at 400 sets body text at 1rem and a 1.6 line height. At 500 it sets captions, buttons and form labels in uppercase with 0.12em tracking, at 0.75 to 0.8rem. Do not add a third face and do not set headings in sans. ## Layout The page is full width: there is no max-width container. A fluid gutter, `clamp(1rem, 3.2vw, 2.75rem)`, pads every section, and vertical section padding runs from 4.5rem to 9rem. The opening is a six-column mosaic of nine tiles of different sizes with no gaps, wrapped around the heading tile. Below it, near-white sections alternate with full periwinkle bands. Several sections pair content with a sticky element: the glossary beside the A to Z wall, and the paint cards stacked as a deck. Quote cards sit in a 1.3 / 1 / 1 grid with staggered top margins. On narrower screens the mosaic re-flows to four columns below 1000px and two below 600px, the navigation links collapse into a Menu button below 820px, and grids go single column around 860px. ## Elevation & Depth There are no shadows or blurs; the only gradients are the lime to pink rules and the soft sun patch and lamp glow on the daylight wall. Depth comes from flat colour fields butted against each other, overlap (paint cards sliding over one another, photos floating over the heading) and sticky layers. Hairline 1px rules, the 3px lime to pink rule and 1.5px outlines separate content. Scale and position do the rest. ## Shapes Corners are square on tiles, photos, bands and paint cards. Roundness is reserved for pills (buttons and price tags, 999px) and for drawn geometry: circles, rings, quarter-circle petals and half-discs made from border radii and SVG strokes of 2 to 5px. These shapes are CSS and SVG, not images. Only seven photos appear, cropped square-cornered with `object-fit: cover`. Form fields have no box, only a 1.5px bottom line. ## Components - **button-primary:** lime pill, ink text, uppercase 0.8rem caps, at least 3rem high. On hover or focus a pink dot grows from the left until it fills the button. - **button-secondary:** outline pill with a 1.5px border in the current text colour, same caps, 2.75rem high, with the same pink fill on hover. - **nav-bar:** fixed, near-white, a 1px periwinkle line below, links left, a tag in the middle and the serif wordmark at 2.1rem on the right. - **menu-overlay:** a full-screen periwinkle panel with huge serif links, opened by the Menu button on narrow screens. - **price-pill:** lime pill with a serif price, minimum width 5.5rem. - **paint-card-ink:** one of six flat colour cards with a rotated name on a spine; the others are periwinkle, pink, lime, lilac and a chalk card outlined in periwinkle. - **input-field:** borderless, ink text, 3rem tall, a single periwinkle bottom line, uppercase labels above. ## Motion The page loads GSAP 3.13 with ScrollTrigger and SplitText, plus Lenis for smooth scrolling. The one idea is that colour shapes assemble and move as a design game: pieces slide, roll and stretch into place as you scroll, then rest. - **Navigation:** the bar hides when you scroll down and returns on scroll up. - **Opening:** tiles fade in on load, the text tile fills with lime, its text rises and the sparkles pop, and the photo eases out of a slight zoom as you scroll. Tiles that start below the first screen, mostly on phones, animate again as they scroll in. - **Glossary:** a wave of width runs along the sticky A to Z wall and each letter stretches and relaxes. - **Projects:** the six photos float around the heading like loose prints, then fly into their hairline frames. - **Quotes:** the shapes turn into place as the band rises; on exit the two giant words part like a curtain. - **Prices:** rows rise, each rail draws from the left and each pill slides in from the right. - **Paints:** on screens at least 560px tall the deck sticks and each card slides over the last, leaving its name as a spine. - **Light:** a patch of sunlight crosses the wall, the wall warms, then goes dark and the lamp comes on. - **Sittings:** four rings start stacked and roll out until they lock into a chain. - **FAQ:** each rule draws itself and the sparkle twinkles; the questions open without script. - **Contact:** the letters of the giant word rise out of their baselines in a scattered order. Text reveals use `power3.out` over 1s with a 0.1s line stagger; rules draw in 1.2s. Lenis runs at a lerp of 0.085. When the visitor prefers reduced motion the entrance and scroll animations and smooth scrolling are off and the page reads in full; the navigation bar still hides on scroll and the hover fills still play. The scripts read the `data-8b-motion` attributes and the section ids, and the CSS sizes the giant words from their `--len` values, so keep them. ## Do's and Don'ts - Do keep exactly five colours and use pink and lime as accents, never as body text colours. - Do set display type in Roboto Serif 500 at 50% width and captions in uppercase Google Sans with 0.12em tracking. - Do keep corners square on surfaces and use pills only for buttons and price tags. - Do make new decorative pieces from CSS or SVG in the palette, not from icons or stock illustrations. - Do give any new full-bleed section a flat colour field and a hairline rule. - Don't add shadows, glass blurs or surface gradients. - Don't introduce purple gradients, a sixth hue or a second display face. - Don't round photos or tiles. - Don't put grey or low-contrast text on the periwinkle bands; use near-white. - Don't replace the invented studio name, prices, quotes and contacts with made-up real ones; ask the owner.