--- version: alpha name: "Car wash template by 8B" description: "One-page website design for a hand car wash and valeting bay: electric violet and foam cream grounds with yellow prices, condensed bold type and scalloped edges. Free HTML template by 8B, MIT." colors: primary: "#3b20f0" secondary: "#5a3ffd" tertiary: "#ffc83d" neutral: "#fdf7e3" surface: "#fdf7e3" on-surface: "#160c50" night: "#160c50" lilac: "#d6d0ff" caption: "#4b4386" typography: headline-display: fontFamily: Instrument Sans fontSize: 100px fontWeight: 700 lineHeight: 0.93 letterSpacing: -0.01em headline-lg: fontFamily: Instrument Sans fontSize: 76px fontWeight: 700 lineHeight: 0.95 letterSpacing: -0.005em headline-md: fontFamily: Instrument Sans fontSize: 32px fontWeight: 700 lineHeight: 1 price: fontFamily: Instrument Sans fontSize: 48px fontWeight: 700 lineHeight: 1 body-lg: fontFamily: Rethink Sans fontSize: 20px fontWeight: 400 lineHeight: 1.55 body-md: fontFamily: Rethink Sans fontSize: 17px fontWeight: 400 lineHeight: 1.6 label-md: fontFamily: Rethink Sans fontSize: 14px fontWeight: 600 lineHeight: 1.35 letterSpacing: 0.01em button: fontFamily: Rethink Sans fontSize: 15px fontWeight: 700 lineHeight: 1.1 badge: fontFamily: Rethink Sans fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.01em rounded: sm: 12px md: 14px lg: 30px coat: 20px question: 22px full: 999px spacing: gutter: 48px section: 168px column: 1240px button-x: 22px button-y: 12px field-x: 14px card: 40px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.neutral}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 22px height: 48px button-primary-hover: backgroundColor: "{colors.night}" textColor: "{colors.neutral}" button-secondary: backgroundColor: "{colors.tertiary}" textColor: "{colors.night}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 22px height: 48px button-outline: backgroundColor: transparent textColor: "{colors.night}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 22px height: 48px badge-time: backgroundColor: "{colors.lilac}" textColor: "{colors.night}" typography: "{typography.badge}" rounded: "{rounded.full}" padding: 5px 12px card-review: backgroundColor: "{colors.neutral}" textColor: "{colors.night}" rounded: "{rounded.lg}" padding: "{spacing.card}" card-coat: backgroundColor: "{colors.tertiary}" textColor: "{colors.night}" rounded: "{rounded.coat}" padding: 20px 24px faq-row: backgroundColor: "{colors.lilac}" textColor: "{colors.caption}" typography: "{typography.body-md}" rounded: "{rounded.question}" padding: 22px 24px input-field: backgroundColor: "{colors.neutral}" textColor: "{colors.night}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 12px 14px height: 50px --- # Two Buckets design system ## Overview This is the visual system of a one-page website for a hand car wash and valeting bay that sells by vehicle size, offers interior work and paint protection, and runs a monthly club. The one idea is a clean, loud, friendly workshop: electric violet and foam cream grounds in turn, with scalloped edges where one meets the next, and yellow reserved for prices and choices. Type is bold and condensed, photos are large and cut by one big rounded corner. It should feel cheerful and careful at once, like a bay that is proud of its method. ## Colors - **Primary (#3b20f0):** electric violet. Primary buttons, the wordmark, the violet sections (prices, protection, reviews, booking), the menu overlay, the second line of the h1, the club price and crew role lines. - **Secondary (#5a3ffd):** a lighter violet for the bubbles in the booking section, the border of the size switch and the hover and close-button fills of icon buttons. - **Tertiary (#ffc83d):** sunny yellow. Prices, the selected vehicle size, the Step tags on the method photos, the club disc, the secondary button, the second protection coat, alternate review cards and the footer wordmark. - **Neutral and surface (#fdf7e3):** foam cream. The page ground, review and booking cards, text on violet, scalloped edges. - **On-surface and night (#160c50):** deep indigo. Text and headings on cream, the footer ground, the fourth protection coat and the hover fill of the primary button. - **Lilac (#d6d0ff):** badges, empty photo frames, lead text on violet and the third protection coat. The question rows use a 45% mix of it with cream, made in the CSS. - **Caption (#4b4386):** muted indigo for paragraphs on cream and for review footers. ## Typography Instrument Sans is loaded only at weight 700 and 75% width, in upright and italic. It carries every heading, the step titles, the prices, the review quotes and the club amount. The italic cut is for the wordmark and the menu title. Rethink Sans is a variable font from 400 to 700: body text at 400, labels at 600, buttons and badges at 700. Nothing is set in capitals, and there is no third family. The display level runs from about 44px on a phone to 100px on a wide screen, the large level from 40px to 76px, and the card-title level from 24px to 32px. Prices run from 32px to 48px, and the club amount from 72px to 144px. ## Layout Content sits in a column up to 1240px wide with a gutter that grows from 16px to 48px. Sections are spaced by 88px to 168px of padding and alternate cream and violet. Nine sections begin with a scalloped foam edge: two layers of repeating radial gradients in the section's own colour, bulging up into the section above. The first screen is a cream two-column spread with the h1 and buttons at the left and one tall photo at the right. The method is a two-column spread with a sticky photo window beside five steps; prices are a dashed row board with a vehicle-size switch; protection is a copy column beside two overlapping photos; the crew is four arched portraits of different heights. At 900px the price rows fold, at 860px the protection and crew grids do, and at 720px the method window docks at the top, the booking button leaves the bar, and the call button shrinks to an icon. ## Elevation & Depth Depth comes from colour fields and overlap, with one soft shadow. The floating navigation bar and the cream cards (reviews and the booking form) share a wide, low shadow in indigo at 55% strength. Everything else is flat: the protection coats are stacked coloured slabs, two protection photos overlap with a thick violet border, and the foam edges lift each section over the previous one. ## Shapes Corners follow one rule: a photo frame has a 30px radius and one large cut corner of 110px to 160px, on a different side from one frame to the next. Buttons are 14px, form fields 12px, protection coats 20px, question rows 22px, and badges and perk pills are full pills. Crew portraits are arches with a fully rounded top. The star in the wordmark, the club disc, the bubbles and the foam edges are drawn in SVG and CSS gradients, not images. ## Components - **button-primary:** violet fill, cream text, 48px tall. On hover a scalloped indigo fill rises from the bottom and the arrow moves 3px. - **button-secondary:** yellow fill with indigo text, used for the protection button; hover fills cream. - **button-outline:** transparent with a violet 2px border and a small yellow square holding the icon; hover fills lilac. - **badge-time:** lilac pill for step minutes and service durations. - **card-review:** cream card with the soft shadow; alternate cards are yellow. - **card-coat:** one of four stacked protection slabs in cream, yellow, lilac and indigo. - **faq-row:** a native details element on the lilac and cream mix, with a violet round plus that turns to a cross. - **input-field:** cream, 50px, a 2px violet border at 30% strength that goes solid on hover and focus. ## Motion The page loads GSAP, ScrollTrigger and Lenis (smooth scrolling, lerp 0.085). The one motion idea is things springing and rising like foam: headings and cards squash up with an elastic ease, scenes are scrubbed to the scroll. - **Navigation:** slides in on load; tucks away after about 24px of downward scroll and returns on upward scroll. - **Opening:** the two h1 lines rise in turn, then the paragraph and buttons, and the photo settles up by 70px, all on load. - **Method:** the photo window is sticky; photos 2 to 5 rise from below over the last one as their step arrives, and the other steps dim to 38%. - **Prices, crew, questions, footer:** headings and rows spring up once with an elastic ease of 0.9 seconds, staggered by 0.09 seconds; crew and protection photos also get a light sweep of 1.3 seconds. - **Interiors:** the stage is sticky and the five cards slide right to left under the heading. - **Protection:** the coats begin in a tilted slab at -3.5 degrees and spread into the list; the two photos move 80 and 60px in opposite directions. - **Reviews:** two rows slide against each other. - **Club:** the yellow disc grows from 7% scale and a turn of -160 degrees to fill the section. - **Booking:** three bubble layers drift at different speeds; the form card straightens from -4 degrees. Reduced motion switches off the entrance and scroll animations, the held interiors stage and smooth scrolling, and the page then reads in full. The method window stays sticky but shows only the fifth photo, because the photos are stacked and only the scroll scene uncovers them. The navigation still hides on scroll and button hover fills still run. Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the selectors AGENTS.md lists, because the scripts read them. ## Do's and Don'ts - Do keep yellow for prices, the chosen size, step tags and the club disc. - Do alternate cream and violet sections and join them with the scalloped edge. - Do set headings and prices in the condensed bold face, and everything else in Rethink Sans. - Do keep one large cut corner on every photo frame. - Do keep corner sizes: 30px, 22px, 20px, 14px and 12px. - Don't add a third typeface, thin weights or all-caps labels. - Don't add hard drop shadows, glass blur or gradient fills on buttons. - Don't use stock icon sets or square-cornered cards. - Don't add accent colours; new states reuse violet, yellow, lilac and indigo.