---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
// Site-global CSS: tokens first (defines --ks-*), kit second (consumes them),
// footer styling third. Every page using Base.astro picks these up; no need
// to re-import from page-level stylesheets.
import '../styles/kinpaku-tokens.css';
import '../styles/kinpaku-kit.css';
import '../styles/light-mode.css';
import '../styles/footer.css';
interface Props {
title: string;
description?: string;
activeNav?: 'home' | 'designing' | 'docs' | 'slop' | 'live';
canonicalPath?: string;
bodyClass?: string;
noIndex?: boolean;
mainId?: string;
mainClass?: string;
hideHeader?: boolean;
hideFooter?: boolean;
ogTitle?: string;
ogDescription?: string;
ogImage?: string;
twitterSite?: string;
twitterCreator?: string;
}
const {
title,
description = 'Design fluency for AI-assisted frontend development.',
activeNav,
canonicalPath,
bodyClass,
noIndex = false,
mainId = 'main',
mainClass,
hideHeader = false,
hideFooter = false,
ogTitle,
ogDescription,
ogImage,
twitterSite,
twitterCreator,
} = Astro.props;
const canonical = canonicalPath
? `https://impeccable.style${canonicalPath}`
: undefined;
// Social card defaults. Every page gets the brand card unless it passes its own.
const SITE_OG_IMAGE = 'https://impeccable.style/og-image-v2.jpg';
const ogImageUrl = ogImage || SITE_OG_IMAGE;
const resolvedOgTitle = ogTitle || title;
const resolvedOgDescription = ogDescription || description;
---
{title}
{noIndex && }
{canonical && }
{twitterSite && }
{twitterCreator && }
Skip to content
{!hideHeader && }
{!hideFooter && }