Cogniv Design System Overview
A complete reference for the design language, components, and patterns that power the Cogniv product and marketing site.
Pages
All pages included in this template, organized for marketing, product, and content needs.
Home
Marketing landing page with hero, features, and CTAs.
Overview
Design system overview with pages, typography, colors, and components.
Pricing
Tiered plans with monthly/yearly toggle and comparison table.
Integrations
Searchable grid of 100+ third-party integrations.
Contact
Multi-channel contact form with office locations.
About
Company story, team, values, and investor info.
Blog
MDX-powered blog with categories and search.
Blog: AI Agents
Article page for the future of work with AI agents.
Blog: Customer Support
Article page about automating customer support workflows.
Blog: Workflow Automation
Article page about scaling workflow automation.
Legal
Legal index route that redirects into policy documentation.
Legal: Cookies
Cookie policy and tracking disclosure page.
Legal: Privacy
Privacy policy and data handling documentation.
Legal: Security
Security, compliance, and platform protection documentation.
Legal: Terms
Terms of service and usage agreement page.
Changelog
Versioned product updates and release notes.
Customers
Case studies and customer success stories.
Customer: Acme Corp
Customer success story detail page for Acme Corp.
Customer: Lumen Health
Customer success story detail page for Lumen Health.
Customer: Northwind Logistics
Customer success story detail page for Northwind Logistics.
Customer: Pixel Design Studio
Customer success story detail page for Pixel Design Studio.
Customer: Stellar Finance
Customer success story detail page for Stellar Finance.
Customer: Voltway Energy
Customer success story detail page for Voltway Energy.
404 / Not Found
Brand-consistent error page with helpful links.
Robots.txt
Generated robots metadata route for crawler access rules.
Sitemap.xml
Generated sitemap metadata route with all indexable pages.
Typography
Type scale, weights, and font families. Built around Inter for body and display.
Colors
Brand, surface, border, text, and semantic colors. Click any swatch to copy the value.
Spacing
Spacing scale, breakpoints, border radius, and container widths used throughout.
Component Samples
Live previews of the reusable building blocks. Copy code with a single click.
<Button variant="primary" size="lg">Primary</Button>
<Button variant="secondary" size="md">Secondary</Button>
<Button variant="outline" size="sm">Outline</Button>
<Button variant="ghost">Ghost</Button><SectionLabel>Pricing</SectionLabel><Badge variant="outline">Default</Badge>
<span className="bg-emerald-500/20 text-emerald-400 ...">Live</span>
<span className="bg-yellow-500/20 text-yellow-400 ...">Beta</span><input className="border border-white/15 bg-white/[0.02] px-3 py-2.5 text-sm text-white ..." />Sample card
A simple card with icon, title, and description.
<div className="border border-white/10 p-6 hover:bg-white/[0.02] transition-colors">
...
</div><div className="h-10 w-10 rounded-full bg-gradient-to-br from-emerald-400 ..." />Run npm install to install dependencies.
<code className="border border-white/10 bg-white/[0.05] px-1.5 py-0.5 text-emerald-400">
npm install
</code>- Unlimited team members
- 100GB of storage
- 24/7 support
- Custom integrations