AI Socratic Design

Stoa

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

Adopt it Adoption guide

Palette

62 colours

Fonts

Radii

Typography

Three fonts, clear purposes

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

Inter

400–700 · Card names, labels, navigation and article 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

Reading, not scanning

Wrap rendered markdown in markdown-content and prose steps up to text-lead in the reading colour, while headings take the display face. Links keep the body colour with an amber underline.

What it covers

Paragraphs, lists and emphasis
Headings h1 to h4 on the fluid scale
Quotes, code, rules and reference tables

An article is the one place on the site that is read rather than scanned.

Element	Step
p, li	lead
h2	section

Article text

One class for every rendered article: blog posts, news updates, event descriptions. Built on the tokens, so it follows the theme.

<article className="markdown-content">{html}</article>

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

Breakdown ramp

Donuts and split bars step through amber in ring order; the last swatch is the neutral “not reported” wash.

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.

47 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} />

Charts

Breakdown donut

Where members heard of us

Sample data

Search420
Newsletter310
LinkedIn220
Meetups160
Referral120
Podcast80
Other50
Not reported90

View data

Breakdown donut example
Label	Value
Search	420
Newsletter	310
LinkedIn	220
Meetups	160
Referral	120
Podcast	80
Other	50
Not reported	90

One hue: amber steps alternate dark and light, ring order.

How to use

// @aisocratic/design/components/chart
<Chart kind="donut" label="Sources" colors={chartRampColors} data={[…, { label: "Not reported", value: 90, color: chartRampMuted }]} />

Charts

Breakdown split bar

Where members heard of us

Sample data

Search420
Newsletter310
LinkedIn220
Meetups160
Referral120
Podcast80
Other50
Not reported90

View data

Breakdown segmented example
Label	Value
Search	420
Newsletter	310
LinkedIn	220
Meetups	160
Referral	120
Podcast	80
Other	50
Not reported	90

One hue: amber steps alternate dark and light, ring order.

How to use

// @aisocratic/design/components/chart
<Chart kind="segmented" label="Sources" colors={chartRampColors} data={[…, { label: "Not reported", value: 90, color: chartRampMuted }]} />

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

Multi-select filter

How to use

// @aisocratic/design/components/multi-select-filter
<MultiSelectFilter triggerLabel="2 cities" options={[{ value: "it", label: "Italy", count: 3 }, { value: "milan", label: "Milan", count: 2, depth: 1 }]} selectedValues={values} onChange={setValues} clearable searchable footer={…} />

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

Inter

How to use

// @aisocratic/design/components/hover-card
<HoverCard><HoverCardTrigger href="#type">Inter</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 Inter.

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

A hand-built table

Hover a header to hide its column.


Eval night	Milan	2026-11-06	96
Robotics lab tour	Madrid	2026-10-21	12
Frontier Stack: Agents	New York	2026-10-02	0
Founders dinner	New York	2026-09-30	28

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

Stoa

Three fonts, clear purposes

Inter

Newsreader

JetBrains Mono

Reading, not scanning

What it covers

Article text

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

Breakdown donut

Where members heard of us

Breakdown split bar

Where members heard of us

Accordion

What is Stoa?

Which font belongs on cards?

Alert dialog

Calendar

Date picker

Radio group

Slider

Toggle

Toggle group

Native select

Multi-select filter

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

A hand-built table

Forms that are easy to fill in