Design System

The Cognitive Blueprint™ is a silent, powerful, and evolving visual language. It prioritizes clarity, precision, and space to breathe.

01. Typography
Display / H1

The Future of AI Brand Personas

Heading / H2

The Cognitive Blueprint

Subheading / H3

Defining the Essence

Body Text / Large

Thoughts, frameworks, and perspectives on the future of AI Brand Personas.

Body Text / Standard

Traditional style guides are built for humans to interpret. An AI Brand Persona is built for Large Language Models (LLMs) and generative systems.

Meta / Small Text
Step 01 / Define Essence
02. Colors
White
#FFFFFF / bg-white
Zinc 50
#FAFAFA / bg-zinc-50
Zinc 100
#F4F4F5 / bg-zinc-100
Zinc 400
#A1A1AA / text-zinc-400
Zinc 500
#71717A / text-zinc-500
Zinc 900
#18181B / bg-zinc-900
Zinc 950
#09090B / bg-zinc-950
03. Interactive Elements
Primary Button
Secondary Button
Link Button
Read Full Insight
Navigation Link
Active LinkInactive Link
04. Components
Minimalist Card (No Border/BG)

Cognitive Strategy

We define the core logic of how your AI should think, reason, and respond based on your brand values.

Breadcrumb
Tags
Active TagInactive Tag
05. Layout Principles

Hierarchy through Spacing: We avoid borders and boxes. Instead, we use generous vertical margins (`py-24`, `space-y-16`) to create distinct sections.

Readable Widths: Content-heavy sections are restricted to `max-w-4xl` (approx. 65-75 characters per line) to ensure optimal readability.

Blueprint Grid: Layouts follow a strict grid system, often using 50/50 split panes or asymmetric grids to create dynamic but balanced compositions.