v1.4.0 Complete Reference

Abstrakt Documentation

Everything you need: getting started guides, design tokens, and component patterns — all in one place.

Documentation

Getting started, AI tools, and customization guides.

Choose Your Workflow

AI-Assisted Development

Let your AI assistant guide you through setup and customization.

"Help me set up this template"
"Add a testimonials section"
"Change the primary color"

Traditional Development

Browse the design system and customize directly.

1. Fill out PROJECT.md
2. Browse Design System
3. Copy from Section Library

Quick Start

Extract

Unzip the downloaded file

Open

Open in your editor

Install

Run npm install

Start

Run npm run dev

# Install and start

npm install && npm run dev

Documentation Files

PROJECT.md Your brand, colors, requirements customize

DESIGN.md Design tokens, spacing, typography

AGENTS.md Code patterns, imports, file structure

Supported AI Tools

Claude Code Full support

Interactive agents, setup wizard

Cursor Full support

Conventions via .cursorrules

GitHub Copilot Core conventions

Via copilot-instructions.md

Windsurf Core conventions

Via .windsurfrules

Customization

Changing Colors

Edit src/styles/globals.css

@theme { --color-primary: oklch(55% 0.2 250); }

Adding Your Logo

1. Add logo to public/images/
2. Update src/components/Logo.astro

Deployment

Vercel

Push to GitHub → Import → Deploy

Netlify

Build: npm run build, Publish: dist

Other

Cloudflare, AWS, GitHub Pages

npm run dev Start development server

npm run build Build for production

npm run preview Preview production build

Design System

Colors, typography, spacing, and UI components.

Colors

Semantic color tokens using OKLCH. Automatically adapts to dark mode.

background

Page background

bg-background

foreground

Primary text

bg-foreground

primary

Primary actions

bg-primary

muted

Subtle backgrounds

bg-muted

destructive

Error states

bg-destructive

border

Borders, dividers

bg-border

Typography

Font: Geist (variable). Monospace: Geist Mono.

h1 (hero) Hero headlines

The quick brown fox

text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight

h1 (page) Page headers

The quick brown fox

text-3xl sm:text-4xl md:text-5xl font-medium tracking-tight

h2 Section headings

The quick brown fox

text-3xl md:text-4xl font-bold tracking-tight

h3 Subsection headings

The quick brown fox

text-2xl font-bold

p (lead) Body text

The quick brown fox

text-lg text-muted-foreground leading-relaxed

p (small) Secondary text

The quick brown fox

text-sm text-muted-foreground

Spacing

Section Padding py-[6vh] md:py-[8vh] 6vh / 8vh Standard sections

Section (compact) py-[4vh] md:py-[6vh] 4vh / 6vh Secondary sections

Container Width max-w-5xl 1024px Default content

Container (wide) max-w-7xl 1280px Images, grids

Container Padding px-4 sm:px-6 16px / 24px Horizontal padding

Buttons

shadcn/ui Button from @/components/ui/button

Primary actions

Secondary actions

Tertiary actions

Subtle actions

Delete actions

Forms

Password

Cards

Card Title

Card description

Card content goes here.

Card Variants

Standard: border rounded-lg bg-card
Muted: bg-muted/50
Inverted: bg-foreground text-background

Shadows

.cta-shadow

.carousel-shadow

Section Library

Pre-built section components with live previews.

Hero

Component: src/components/sections/Hero.astro

Live Preview

Abstrakt is a community of creators, builders, and innovators.

Book a Tour

Props: title, cta?, image?, imageAlt?

Content Block

Component: src/components/sections/ContentBlock.astro

Live Preview

"Join a community of builders"

At Abstrakt, you're joining a curated community of entrepreneurs and creatives.

Props: quote, description, showFaces?

Edge Carousel

Component: src/components/sections/EdgeCarousel.astro

Live Preview

Explore Our Spaces

From private offices to collaborative areas

Private Offices

Dedicated space for your team

Explore Private Offices

Hot Desks

Flexible seating options

Explore Hot Desks

Meeting Rooms

Professional spaces

Explore Meeting Rooms

Props: title, subtitle?, items[], variant?

Bento Grid

Component: src/components/sections/BentoGrid.astro

Live Preview

High-Speed Internet

Enterprise-grade 10Gbps fiber connection.

Premium Coffee

Locally roasted specialty beans.

Community Events

Weekly workshops and networking.

24/7 Access

Secure keycard access around the clock.

Props: title?, subtitle?, items[], containerClass?

Icons: wifi, coffee, calendar, clock, zap, shield, chart, users, globe, lock

Pricing Table

Pattern in src/pages/pricing.astro

Live Preview

Hot Desk

€199 /mo

Business hours access
High-speed WiFi
Coffee & kitchen

Dedicated

€399 /mo

24/7 access
Personal locker
Business address
5 meeting hours

Private Office

€899 /mo

Lockable office
Custom branding
Unlimited meetings

Testimonials

Pattern in src/pages/features.astro

Live Preview

"The internet speed alone is worth it."

Sarah Chen

Founder

"I actually look forward to coming in."

Marcus Webb

Designer

FAQ Accordion

Native <details> element — zero JavaScript

Live Preview

Can I switch plans?

Yes, changes take effect at the next billing cycle.

Minimum commitment?

Hot Desk is month-to-month. Private Office requires 3 months.

Uses group-open:rotate-180 for chevron animation