The official design reference for this project. Every future page, section, component, and UI update must follow this file so the site remains consistent.

• Website / product name: CodePlug Technologies
• Website type: Company and product-portfolio landing page with product legal documents
• Surface profile: Landing / Marketing plus Content / Editorial / Docs
• Platform: Responsive web, statically deployed to Cloudflare Pages
• Target users: Pixalto users, potential collaborators, product partners, and people discovering the company behind the products
• Main design goal: Present CodePlug as the focused product studio behind Pixalto Web, Pixalto Mobile, and the in-development AI Dance mobile experience.

• Visual style: Bold editorial technology with warm material cues
• Mood & tone: Capable, direct, inventive, human
• Design personality: Bold-human
• Design concept: “The Product Signal” connects each CodePlug product through a vertical signal line, status nodes, oversized movement-led typography, warm paper, and restrained transform motion.
• Adversarial-review verdict: With the company name hidden, the warm editorial palette, plug-derived mark, live status language, and connected product stages still read as one product studio rather than a generic purple AI startup. The initial weakness was the possibility of a conventional product-card stack; it was fixed by giving the web, mobile, and upcoming products three distinct layout families.
• References: Pixalto for recognizable product colors and actual work; FUNG for concise creative-technology positioning; kurzform on Awwwards for minimal editorial structure; More Studio for oversized project-led typography with motion reduced for usability.
• Voice & UX copy: Plain, confident, specific. Lead with what each product does. CTAs use one label per intent: “Explore products,” “Open Pixalto,” “View App Store,” “Follow launch,” and “Contact us.” Never use generic claims such as “revolutionary” or “seamless.”

• Backgrounds: Signal Paper is the page base; Paper Raised separates large sections; Night and Signal Orange are intentional portfolio stages.
• Text: Carbon Ink on light surfaces; Night Text on Night; Signal Dark is used only for small informational labels.
• Buttons: Carbon Ink fill, Signal Paper text, Signal Orange physical shadow. On Night, invert to Night Text fill and Night text.
• Cards: Separated through surface color and hue-tinted shadow, never decorative borders.
• Highlights / focus: Deep Teal 3px focus ring with 4px offset.
• Contrast verification: Ink/Paper 15.59:1; Soft/Paper 7.23:1; Soft/Raised 7.83:1; Signal Dark/Paper 6.33:1; Night Text/Night 16.66:1; Night Muted/Night 10.84:1; Ink/Signal 5.70:1; Focus/Paper 6.53:1.
• Dark mode: No site-wide dark mode. Night is a deliberate, single-theme product stage.

• Brand personality: Bold-human
• Pairing: Bricolage Grotesque Variable for display and headings; Geist Variable for body and UI
• Why: Bricolage adds crafted, movement-friendly character to a creative product studio, while Geist stays quiet and highly readable around product information.
• Display: clamp(4rem, 10.5vmin, 8rem)
• H1: clamp(3.5rem, 8.8vmin, 7.4rem); mobile clamp(3.55rem, 18vw, 5.6rem)
• H2: clamp(2.8rem, 7vw, 6.5rem)
• H3: clamp(2.15rem, 4.6vw, 4.25rem)
• Body large: clamp(1.2rem, 1.75vw, 1.5rem)
• Body: 1rem / 16px minimum
• Body small: 0.9rem
• Caption: 0.8rem
• Button: 0.95rem, 700 weight
• Line height / length: 1.55 body; supporting copy capped at 62ch; headings use 0.92 and balanced wrapping.
• Responsive rules: All display sizes scale through tokens; mobile hero has a dedicated viewport-safe H1 token; copy is never truncated.

• Container: Maximum 78rem, with gutters from 1.25rem to 3rem.
• Section spacing: clamp(5rem, 10vw, 9rem).
• Grid: Content-led CSS Grid; asymmetric two-column product stage, three-device composition, full-width kinetic stage, and two-column editorial About.
• Page anatomy: Homepage: navbar → oversized hero → product introduction → Pixalto Web → Pixalto Mobile → AI Dance → company story → conversion → footer. AI Dance legal: compact brand header → editorial document hero → contents/prose grid → legal footer.
• Legal reading flow: Desktop uses a sticky numbered table of contents beside a 68ch reading column. Tablet/mobile stacks the contents above the article. Legal anchors use generous scroll offsets, never tabs, accordions, or hidden copy.
• Conversion flow: Primary goal is product discovery. “Explore products” repeats in the navbar, hero, and final CTA. Product-specific links remain secondary intents.
• Hero composition: Oversized typographic hero, centered within 100svh. The signal line runs behind the composition and terminates at a socket node. It is not a split hero. Headline is fixed to two lines on desktop.
• Viewport section: Only the hero is viewport-sized and is verified at 700px and 800px heights. Product stages are content-driven so their imagery and copy are never compressed or clipped to mimic a full-screen section.
• Horizontal rails: None. The three-device mobile composition is decorative and clipped inside a stable stage, with no horizontal scrolling or native scrollbar.
• Breakpoints: 600px mobile refinement, 900px tablet/small desktop, 1280px design maximum.
• Alignment: Optical asymmetry on desktop; single-column reading order on mobile; logical inline properties are preferred.

• Base: Native semantic HTML and CSS; no styled component library.
• Buttons: Primary pill, small navbar pill, and light-on-dark pill. Every button has default, hover lift, :focus-visible, pressed compression, and disabled rules.
• Cards: Web browser frame only; soft shadow and one large radius, no border.
• Badges: Status component with a labeled dot; color is never the only signal.
• Navbar: Absolute one-line desktop nav; native <details> menu on mobile.
• Footer: Carbon Ink field with oversized wordmark, direct email, location, copyright, and persistent AI Dance Privacy/Terms links.
• Forms / inputs: Not shipped. Future forms require visible labels, blur validation, associated error text, and explicit success/error states.
• Feature sections: Each product receives a unique stage rather than a repeated card template. Legal pages use LegalLayout, a compact header, document metadata chips, a sticky table of contents, semantic prose sections, and one orange plain-language callout.
• CTA sections: Primary CTA primitive is reused exactly.

• Style: Borderless, material, editorial
• Radius: 0.65rem small, 1.25rem medium, 2rem large, 999px pills
• Elevation: 0 24px 64px rgb(49 34 19 / 14%) light; 0 32px 80px rgb(0 0 0 / 32%) dark
• Gradients: None in the CodePlug UI. Purple/blue gradients appear only inside supplied Pixalto product screenshots.
• Glass: Only the browser chrome bar uses a practical 10px blur over an image.
• Hierarchy: Page base → raised product section → floating browser frame. No nested card stacks.

• Library: Custom geometric SVGs derived from the plug/signal motif
• Size: 1.1rem inline arrows; 1.65rem brand mark
• Color: currentColor
• Rules: Stroke style stays consistent; decorative SVGs are hidden from assistive technology; icon-only controls require labels.

• CodePlug logo: Custom SVG/text wordmark, transparent and resolution-independent.
• Pixalto logo: Extracted from the live product as SVG.
• User images: App Store screenshots supplied by the user, converted to WebP at 660 × 1434.
• Live images: Pixalto before/after product image extracted from the live site as WebP.
• AI images / stock: None.
• Crop: Product screenshots retain their full 1320:2868 aspect ratio; web imagery is cropped inside a large browser stage.
• Treatment: Product colors stay inside product stages; CodePlug chrome never borrows Pixalto purple as a site accent.

• Experience tier: Standard DOM + CSS
• Library: CSS-only plus a small IntersectionObserver reveal
• Motion: 160ms micro, 260ms component, 700ms reveal; shared cubic-bezier(0.16, 1, 0.3, 1) ease-out.
• Hover: Transform lift/rotation only; arrow translates 3px.
• Reveal: Opacity and translateY(2rem) once per section.
• Button pressed: translateY(4px) scale(0.985) with reduced physical shadow.
• States: Default, hover, focus-visible, active, and disabled are defined in the shared button primitive.
• Async / toast / data states: No async actions or data views ship. Legal pages are static HTML and keep all terms readable without JavaScript. Future additions must include labeled loading, explicit success/error, and useful empty states.
• Reduced motion: Smooth scrolling and reveals are removed; all content remains visible.
• Performance: Static Astro output; no framework runtime; local variable fonts with swap behavior from Fontsource; WebP assets; explicit width/height on every image; below-fold images lazy-load; CSS/JS animate only transform and opacity; Cloudflare immutable caching for assets. Targets: LCP <2.5s, CLS <0.1, INP <200ms via these levers, not claimed as measured.

• Body/supporting text maintains at least 4.5:1 contrast; computed ratios are recorded in section 3.
• Every interactive element receives a keyboard-only 3px Deep Teal :focus-visible ring.
• Semantic landmarks, one H1, sequential headings, descriptive link text, and a skip link are required.
• Navigation works without JavaScript; DOM order matches visual reading order.
• Images have meaningful alt text and explicit dimensions.
• prefers-reduced-motion and forced-colors are supported; text remains usable at 200% zoom.
• Never rely on color alone; statuses combine a dot and explicit label.

• Approved colors: #F5F0E6, #FFF9ED, #171915, #4D5048, #FF5A36, #A8240D, #10140F, #1D221B, #F7F2E7, #C4C7BC, #075F64.
• Pure black/white: Neither #000 nor #FFF is used as a design token.
• Concept test: Covering the brand still leaves the signal line, socket mark, warm industrial palette, and three differentiated product stages. These are specific to this studio and portfolio.
• Project exceptions: Pixalto screenshots retain their product-owned purple gradients and sparkle iconography because they are authentic supplied product media, not CodePlug UI decoration.

Every future page must reuse this palette, typography, spacing, components, icon style, section depth, motion language, and product-image treatment. Do not introduce a new visual direction without updating this file first.

When colors, typography, components, animations, cards, icons, or image treatments change, update this file in the same change so the documented system never drifts from the site.