Design system

AI Socratic Design

Explore the fonts, colours and components behind AI Socratic. Try the controls and see how they look in light and dark.

Adopt it @aisocratic/design

Palette

55 colours

Fonts

Radii

Typography

Three fonts, clear purposes

Use Space Grotesk for everyday UI, Newsreader for headlines, and JetBrains Mono for code.

Space Grotesk

400 · Card names, labels, navigation and body text.

Team members

Events · News · About

<h3 className="font-body text-title">Team members</h3>

Newsreader

200 · News headlines and page titles.

A new chapter in AI

<h1 className="font-display text-page">A new chapter in AI</h1>

JetBrains Mono

400 / 500 · Code snippets and technical values.

pnpm add @aisocratic/design

<code className="font-code">npm install</code>

Explore the size scale

text-micro · 11px

Ideas worth sharing

text-body · 14px

Ideas worth sharing

text-lead · 18px

Ideas worth sharing

text-title · 18 → 23px

Ideas worth sharing

text-section · 23 → 29px

Ideas worth sharing

text-page · 29 → 37px

Ideas worth sharing

text-display · 37 → 47px

Ideas worth sharing

text-hero · 47 → 59px

Ideas worth sharing

text-mega · 59 → 75px

Ideas worth sharing

Colour

The palette at a glance

A compact view of every colour, followed by examples of how they work together.

neutral

slate

oat

ink

amber

violet

red

green

yellow

orange

blue

cyan

purple

Actions

Status

PublishedDraftFailed

Surfaces & text

Primary text on a card.

Secondary text adds context.

Shape

Two radii, one measure

A control is 10px, a surface is 16px, a pill is full. Every other Tailwind radius name lands on one of them. Cards are border, not shadow. The page-shell is 72rem plus a gutter added on top.

control

rounded-md · 10

surface

rounded-xl · 16

pill

rounded-full

Components

The same components rendered inside a light and a dark ancestor. Nothing changes but the tokens.

light

Buttons

Badges

DefaultSecondaryOutlineDestructivesuccesswarningcautiondangerinfohighlightaccentneutral

A card

Note

Country

Tags / labels

Search and select more than one. Remove a tag with its × button.

Remember me Alerts

Heads up

Three text roles, and only three.

Saved

Status tones, from the same seven tokens as the badges.

Cards, columns, drag to move.

Model	Score
Fable 5.1	92.4
Opus 5	89.1

Nothing here yet

The empty state, one component instead of twenty.

dark

Buttons

Badges

DefaultSecondaryOutlineDestructivesuccesswarningcautiondangerinfohighlightaccentneutral

A card

Note

Country

Tags / labels

Search and select more than one. Remove a tag with its × button.

Remember me Alerts

Heads up

Three text roles, and only three.

Saved

Status tones, from the same seven tokens as the badges.

Cards, columns, drag to move.

Model	Score
Fable 5.1	92.4
Opus 5	89.1

Nothing here yet

The empty state, one component instead of twenty.

Component library

More pieces to build with

Cards from Agora, charts from Atlas, and the missing controls — all in Stoa’s style.

44 examples · 64 reference categories covered

Cards

Task card

High

Make the next step clear for the person reviewing the work.

DesignAgentFederico

3 subtasks2 comments

Update the labels

readyUIAnna

How to use

// @aisocratic/design/components/task-card
<TaskCard title="Review agent output" status={status} columns={columns} onStatusChange={setStatus} />

Cards

Content card

New York

COMMUNITY

New York chapter

Meet your local AI community.

Next gathering · September 24

How to use

// @aisocratic/design/components/content-card
<ContentCard title="New York chapter" eyebrow="COMMUNITY" description="Meet your local AI community." />

Charts

Line chart

Weekly activity

Sample data

Mon24
Tue38
Wed31
Thu56
Fri48

View data

line example
Label	Value
Mon	24
Tue	38
Wed	31
Thu	56
Fri	48

Chart colors follow the current theme.

How to use

// @aisocratic/design/components/chart
<Chart kind="line" label="Activity" data={data} />

Charts

Area chart

Weekly activity

Sample data

Mon24
Tue38
Wed31
Thu56
Fri48

View data

area example
Label	Value
Mon	24
Tue	38
Wed	31
Thu	56
Fri	48

Chart colors follow the current theme.

How to use

// @aisocratic/design/components/chart
<Chart kind="area" label="Activity" data={data} />

Charts

Bar chart

Weekly activity

Sample data

Mon24
Tue38
Wed31
Thu56
Fri48

View data

bar example
Label	Value
Mon	24
Tue	38
Wed	31
Thu	56
Fri	48

Chart colors follow the current theme.

How to use

// @aisocratic/design/components/chart
<Chart kind="bar" label="Activity" data={data} />

Charts

Donut chart

Device breakdown

Sample data

Desktop640
Mobile280
Tablet80

View data

donut example
Label	Value
Desktop	640
Mobile	280
Tablet	80

Chart colors follow the current theme.

How to use

// @aisocratic/design/components/chart
<Chart kind="donut" label="Activity" data={data} />

Charts

Ranking chart

Device breakdown

Sample data

Desktop640 · 64.0%

Mobile280 · 28.0%

Tablet80 · 8.0%

View data

ranking example
Label	Value
Desktop	640
Mobile	280
Tablet	80

Chart colors follow the current theme.

How to use

// @aisocratic/design/components/chart
<Chart kind="ranking" label="Activity" data={data} />

Charts

Segmented chart

Device breakdown

Sample data

Desktop640
Mobile280
Tablet80

View data

segmented example
Label	Value
Desktop	640
Mobile	280
Tablet	80

Chart colors follow the current theme.

How to use

// @aisocratic/design/components/chart
<Chart kind="segmented" label="Activity" data={data} />

Charts

Gauge chart

Quality scores

Sample data

Performance

Accessibility

View data

gauge example
Label	Value
Performance	92
Accessibility	98

Chart colors follow the current theme.

How to use

// @aisocratic/design/components/chart
<Chart kind="gauge" label="Activity" data={data} />

Disclosure

Accordion

How to use

// @aisocratic/design/components/accordion
<Accordion type="single" collapsible><AccordionItem value="one"><AccordionTrigger>What is Stoa?</AccordionTrigger><AccordionContent>Shared UI.</AccordionContent></AccordionItem></Accordion>

Disclosure

Alert dialog

How to use

// @aisocratic/design/components/alert-dialog
<AlertDialog><AlertDialogTrigger asChild><Button>Archive</Button></AlertDialogTrigger><AlertDialogContent>…</AlertDialogContent></AlertDialog>

Fields

Calendar

September 2026

How to use

// @aisocratic/design/components/calendar
<Calendar mode="single" selected={date} onSelect={setDate} />

Fields

Date picker

How to use

// @aisocratic/design/components/date-picker
<DatePicker value={date} onValueChange={setDate} />

Fields

Radio group

DailyWeeklyMonthly

How to use

// @aisocratic/design/components/radio-group
<RadioGroup defaultValue="daily"><label><RadioGroupItem value="daily" />Daily</label></RadioGroup>

Fields

Slider

How to use

// @aisocratic/design/components/slider
<Slider defaultValue={[35]} aria-label="Volume" />

Fields

Toggle

How to use

// @aisocratic/design/components/toggle
<Toggle aria-label="Bold"><Bold /></Toggle>

Fields

Toggle group

How to use

// @aisocratic/design/components/toggle-group
<ToggleGroup type="multiple"><ToggleGroupItem value="bold" aria-label="Bold">B</ToggleGroupItem></ToggleGroup>

Fields

Native select

How to use

// @aisocratic/design/components/native-select
<NativeSelect aria-label="Language"><option>English</option></NativeSelect>

Fields

Input group

https://

How to use

// @aisocratic/design/components/input-group
<InputGroup><InputGroupAddon>https://</InputGroupAddon><InputGroupInput aria-label="Domain" /></InputGroup>

Fields

Input OTP

How to use

// @aisocratic/design/components/input-otp
<InputOTP length={6} aria-label="Verification code" />

Fields

Tag input

Inline edit

How to use

// @aisocratic/design/components/inline-edit
<InlineEdit value={title} onSave={setTitle} />

Fields

File upload

Choose files

How to use

// @aisocratic/design/components/file-upload
<FileUpload multiple onFilesChange={setFiles} maxBytes={5000000} />

Navigation

Context menu

How to use

// @aisocratic/design/components/context-menu
<ContextMenu><ContextMenuTrigger>Right-click here</ContextMenuTrigger><ContextMenuContent><ContextMenuItem>Duplicate</ContextMenuItem></ContextMenuContent></ContextMenu>

Navigation

Menubar

How to use

// @aisocratic/design/components/menubar
<Menubar><MenubarMenu><MenubarTrigger>File</MenubarTrigger><MenubarContent><MenubarItem>New</MenubarItem></MenubarContent></MenubarMenu></Menubar>

Navigation

Hover card

Space Grotesk

How to use

// @aisocratic/design/components/hover-card
<HoverCard><HoverCardTrigger href="#type">Space Grotesk</HoverCardTrigger><HoverCardContent>Readable UI type.</HoverCardContent></HoverCard>

Disclosure

Drawer

How to use

// @aisocratic/design/components/drawer
<Drawer><DrawerTrigger asChild><Button>Open</Button></DrawerTrigger><DrawerContent><DrawerTitle>Details</DrawerTitle><DrawerDescription>More information.</DrawerDescription></DrawerContent></Drawer>

Layout

Resizable

Drag the divider

Or focus it and use arrow keys

How to use

// @aisocratic/design/components/resizable
<ResizablePanelGroup direction="horizontal"><ResizablePanel>Left</ResizablePanel><ResizableHandle /><ResizablePanel>Right</ResizablePanel></ResizablePanelGroup>

Layout

Aspect ratio

16 : 9

How to use

// @aisocratic/design/components/aspect-ratio
<AspectRatio ratio={16 / 9}>Media</AspectRatio>

Layout

Separator

Overview

Details

How to use

// @aisocratic/design/components/separator
<Separator />

Layout

Button group

How to use

// @aisocratic/design/components/button-group
<ButtonGroup aria-label="Actions"><Button>Save</Button><Button>More</Button></ButtonGroup>

Layout

Kbd

Open search ⌘K

How to use

// @aisocratic/design/components/kbd
<Kbd>⌘</Kbd> <Kbd>K</Kbd>

Layout

Item

Research notes

Updated a few minutes ago

How to use

// @aisocratic/design/components/item
<Item><ItemContent><ItemTitle>Research notes</ItemTitle></ItemContent></Item>

Layout

Direction

مرحبا بالعالم

How to use

// @aisocratic/design/components/direction
<DirectionProvider dir="rtl"><div dir="rtl">مرحبا بالعالم</div></DirectionProvider>

Layout

Typography

Team members

Readable names and useful descriptions.

pnpm dev

Make the next step clear.

How to use

// @aisocratic/design/components/typography
<Heading>Team members</Heading><Text>Readable body copy.</Text><Code>pnpm dev</Code>

Layout

Carousel

Readable names

1 / 3

How to use

// @aisocratic/design/components/carousel
<Carousel label="Highlights" items={[<Card>One</Card>, <Card>Two</Card>]} />

Agent UI

Message · Bubble · Marker

You

Review these changes.

Today

Agent

Ready to review. The card titles use Space Grotesk.

Review complete

How to use

// @aisocratic/design/components/message
<Message><MessageContent><MessageHeader>Agent</MessageHeader><Bubble><BubbleContent>Ready to review.</BubbleContent></Bubble></MessageContent></Message>

Agent UI

Message scroller

I’ve reviewed the component library.

How to use

// @aisocratic/design/components/message-scroller
<MessageScroller>{messages}</MessageScroller>

Agent UI

Attachment

notes.pdf

PDF · 240 KB

How to use

// @aisocratic/design/components/attachment
<Attachment name="notes.pdf" description="PDF · 240 KB" onRemove={remove} />

Agent UI

Questionnaire

How to use

// @aisocratic/design/components/questionnaire
<Questionnaire questions={questions} onComplete={saveAnswers} />

Utilities

Copy button

How to use

// @aisocratic/design/components/copy-button
<CopyButton text="pnpm add @aisocratic/design" />

Utilities

Countdown

—

How to use

// @aisocratic/design/components/countdown
<Countdown until="2027-01-01T00:00:00Z" />

Utilities

Back to top

How to use

// @aisocratic/design/components/back-to-top
<BackToTop />

Full component directory · 64 categories

Compared with shadcn’s component list. Names below show the Stoa export. Existing equivalents are retained.

AccordionNew

Accordion · accordion

AlertExisting

Alert · alert

Alert DialogNew

AlertDialog · alert-dialog

Aspect RatioNew

AspectRatio · aspect-ratio

AttachmentNew

Attachment · attachment

AvatarExisting

Avatar · avatar

BadgeExisting

Badge · badge

BreadcrumbExisting

Breadcrumbs · breadcrumbs

BubbleNew

Bubble · bubble

ButtonExisting

Button · button

Button GroupNew

ButtonGroup · button-group

CalendarNew

Calendar · calendar

CardExisting

Card · card

CarouselNew

Carousel · carousel

ChartNew

Chart · chart

CheckboxExisting

Checkbox · checkbox

CollapsibleExisting

Collapsible · collapsible

ComboboxExisting

SelectField · select-field

CommandExisting

Command · command

Context MenuNew

ContextMenu · context-menu

Data TableExisting

DataTable · data-table

Date PickerNew

DatePicker · date-picker

DialogExisting

Dialog · dialog

DirectionNew

DirectionProvider · direction

DrawerNew

Drawer · drawer

Dropdown MenuExisting

DropdownMenu · dropdown-menu

EmptyExisting

EmptyState · empty-state

FieldExisting

FieldWrapper · field

Hover CardNew

HoverCard · hover-card

InputExisting

Input · input

Input GroupNew

InputGroup · input-group

Input OTPNew

InputOTP · input-otp

ItemNew

Item · item

KbdNew

Kbd · kbd

LabelExisting

Label · label

MarkerNew

Marker · marker

MenubarNew

Menubar · menubar

MessageNew

Message · message

Message ScrollerNew

MessageScroller · message-scroller

Native SelectNew

NativeSelect · native-select

Navigation MenuNew

NavigationMenu · navigation-menu

PaginationExisting

PaginationControls · pagination

PopoverExisting

Popover · popover

ProgressExisting

Progress · progress

QuestionnaireNew

Questionnaire · questionnaire

Radio GroupNew

RadioGroup · radio-group

ResizableNew

ResizablePanelGroup · resizable

Scroll AreaExisting

ScrollArea · scroll-area

SelectExisting

Select · select

SeparatorNew

Separator · separator

SheetExisting

Sheet · sheet

SidebarExisting

AdminShell · admin-shell

SkeletonExisting

Skeleton · skeleton

SliderNew

Slider · slider

SpinnerExisting

Spinner · spinner

SwitchExisting

Switch · switch

TableExisting

Table · table

TabsExisting

Tabs · tabs

TextareaExisting

Textarea · textarea

ToastExisting

Toaster · sonner

ToggleNew

Toggle · toggle

Toggle GroupNew

ToggleGroup · toggle-group

TooltipExisting

Tooltip · tooltip

TypographyNew

Heading · typography

Admin

The dashboard chrome

AdminShell, Breadcrumbs, PageToolbar with a SegmentedControl, MetricCard and the table — the pieces every /admin page on aisocratic.org is built from, shipped as one layer.

Admin

4 events

Upcoming

Registrations+8%

1,284

Attendance

71%

Event	Chapter	Status	Guests
AI Socratic Milan #12	Milan	Published	184
Frontier Stack: Agents	New York	Draft	0
Open Weight War	Madrid	Review	42
Cafés — May	Berlin	Cancelled	0

Tables

One list, both archetypes

DataTable: search, select filters, sortable columns, pinned rows, selection with bulk actions, row actions, expandable sub-rows and pagination — in memory here, or driven by the server with the same props. Delete asks through ConfirmDialog.

7 events

				Status
	Frontier Stack: Agents	New York	2026-10-02	Draft	0
	Eval night	Milan	2026-11-06	Published	96
	Robotics lab tour	Madrid	2026-10-21	Review	12
Awaiting an editor. Last touched by fed.
	Founders dinner	New York	2026-09-30	Published	28
	Open Weight War	Madrid	2026-09-25	Review	42
Awaiting an editor. Last touched by fed.

Page 1 of 2

Forms

Forms that are easy to fill in

Clear labels, helpful hints and room to breathe. Try the fields, search the options and select a few topics.

Event details

What goes on the public page.

Title*

Slug

aisocratic.org/events/

Luma link

Guests register there; we sync the list hourly.

Chapter*

Host

Topics

Agents

Description

Format

One choice.

Visibility

Published

Listed on /events and in the digest.

Members only

Hide the registration link from signed-out visitors.

One window for join and sign in

AuthScreen is /login on aisocratic.org: the violet field, the pitch, and AuthPanel — a passwordless code flow by default, a magic link or a password if you need one, and any mix of Google, Apple, GitHub, Microsoft, LinkedIn, X or SAML. Use 123456 as the code.

AI Socratic

Join the community

A global community of AI engineers, researchers and founders. Membership is free — and automatic once you attend an event.

Community access
A private directory of AI engineers, researchers and founders.
Exclusive events
Priority access to member-only workshops, meetups and dinners.
Learning resources
Curated content and discussions to stay ahead in AI.
Global network
Chapters in New York, Milan and Madrid — and growing.

Membership is free, always
Create your account, come to an event, and you're a member.

Create your account with an email — no password to remember.

Also email me the weekly AI digest and monthly round-up (unsubscribe any time)

By continuing you agree to our Terms and Privacy Policy.

card · password · every provider

card · magic link · dark

One package, one version to bump.

A dark band is just a themed section: `tone="dark"` puts the `dark` class on it and every token inside follows.

Read the adoption guide

AI Socratic Design

Three fonts, clear purposes

Space Grotesk

Newsreader

JetBrains Mono

The palette at a glance

Two radii, one measure

Components

More pieces to build with

Task card

Review agent output

Update the labels

Content card

New York chapter

Line chart

Weekly activity

Area chart

Weekly activity

Bar chart

Weekly activity

Donut chart

Device breakdown

Ranking chart

Device breakdown

Segmented chart

Device breakdown

Gauge chart

Quality scores

Accordion

What is Stoa?

Which font belongs on cards?

Alert dialog

Calendar

Date picker

Radio group

Slider

Toggle

Toggle group

Native select

Input group

Input OTP

Tag input

Inline edit

File upload

Context menu

Menubar

Navigation menu

Hover card

Drawer

Resizable

Aspect ratio

Separator

Button group

Kbd

Item

Research notes

Direction

Typography

Team members

Carousel

Message · Bubble · Marker

Message scroller

Attachment

Questionnaire

Copy button

Countdown

Back to top

The dashboard chrome

Talent Garden

One list, both archetypes

Forms that are easy to fill in

Event details

Format

Visibility

One window for join and sign in

Join the community

Community access

Exclusive events

Learning resources

Global network