Documentation

Getting started

Clone the repository and install dependencies.

npm install
npm run dev

The dev server starts at localhost:4321. All pages are statically generated at build time.

How the system works

UINUX Marketing is organized into three layers:

• Tokens define visual decisions (colors, spacing, typography)
• Components are the smallest building blocks (Button, Card, Badge)
• Sections compose components into page-level blocks (Hero, FeatureGrid, CTA)

Pages are assembled by composing sections. There are no hardcoded page templates. You choose which sections to include and in what order.

Composing sections

Every page is a composition of sections inside a layout.

---
import Page from '../layouts/Page.astro';
import Hero from '../sections/Hero.astro';
import FeatureGrid from '../sections/FeatureGrid.astro';
import CTA from '../sections/CTA.astro';
---

<Page title="Home">
  <Hero title="Your title" description="Your description" />
  <FeatureGrid features={features} />
  <CTA title="Get started" action={{ label: 'Go', href: '/' }} />
</Page>

Customizing tokens

All visual decisions live in src/tokens/tokens.css. Override any CSS variable to match your brand.

:root {
  --color-background: #09090b;
  --color-foreground: #fafafa;
  --color-muted: #a1a1aa;
  --color-border: #27272a;
  --color-surface: #18181b;
}

Tokens are consumed by both Astro and Next.js runtimes. Change them once, both runtimes update.

Astro vs Next.js

Astro is the primary runtime. It produces static HTML with zero JavaScript by default. Choose Astro when your site is content-driven and does not require client-side interactivity.

Next.js is the secondary adapter. Use it when you need React-based interactivity, server-side rendering, or integration with an existing React application.

The Next.js adapter mirrors the Astro component API. Same names, same props, same tokens. No new design decisions are introduced in the Next.js layer.

• Default choice: Astro
• React-heavy needs: Next.js adapter
• Tokens: Shared between both
• Rule: If it does not exist in Astro, it must not exist in Next.js

Components

The system includes 10 core components:

• Button — Primary, secondary, ghost variants. Renders as link or button.
• Link — Styled anchor with external link support.
• Card — Default (filled) or bordered container.
• Section — Vertical spacing wrapper with sm/md/lg/xl options.
• Container — Max-width wrapper (narrow, default, wide).
• Navbar — Sticky navigation with blur backdrop.
• Footer — Multi-column footer with brand and links.
• Badge — Small label, default or outline.
• CodeBlock — Styled code display with optional title.
• Divider — Horizontal rule.

Sections

The system includes 6 composable sections:

• Hero — Title, description, badge, up to two actions.
• FeatureGrid — Grid of feature cards with optional header.
• SocialProof — Centered quote with attribution.
• Pricing — Tier-based pricing cards.
• CTA — Call to action with title, description, and button.
• FooterSection — Wraps the Footer component.