Neural Design System Reference

Neural is an AI chat interface with a 25-step gray scale, blue-centric accent system, and dark-first design. This reference covers the marketing site, web app, and chat UI patterns.

Source: · Platform: Next.js · Theme: dark-first

Colors

Neural uses a comprehensive gray scale as its foundation, with a blue-centric accent system and color theme options for chat personalization. The default mode is dark.

Gray Scale

100

150

200

250

300

350

400

450

500

550

600

650

700

750

800

850

900

925

950

975

1000

Blue

100

200

300

400

500

600

700

800

900

950

Green

100

200

300

400

500

600

700

800

900

950

Red

100

200

300

400

500

600

700

800

900

950

Orange

100

200

300

400

500

600

700

800

900

950

Purple

100

200

300

400

500

600

700

800

900

950

Pink

100

200

300

400

500

600

700

800

900

950

Yellow

100

200

300

400

500

600

700

800

900

950

Chat Themes

Neural offers 7 color themes for user message bubbles. The default is "black" (neutral). Users can choose blue, green, purple, orange, pink, or yellow themes.

User Message Bubbles by Theme

Black (default)

Blue

Green

Purple

Orange

Pink

Yellow

Submit Button by Theme

Semantic Colors

Dark Mode (Default)

Token	Value
--bg-primary	#181818
--bg-secondary	#303030
--bg-tertiary	#414141
--bg-elevated-primary	#303030
--bg-scrim	#0d0d0d80
--text-primary	#fff
--text-secondary	#cdcdcd (gray-300)
--text-tertiary	#9b9b9b (gray-500)
--text-quaternary	#ffffff69
--text-error	#f93a37
--text-accent	#66b5ff (blue-200)
--icon-primary	#e8e8e8
--icon-secondary	#cdcdcd
--icon-tertiary	#afafaf
--border-default	#ffffff26
--border-light	#ffffff0d
--border-heavy	#ffffff33
--surface-hover	#ffffff26
--link	#7ab7ff
--main-surface-primary	#141414 (gray-950)
--main-surface-secondary	#171717 (gray-900)
--sidebar-surface	#2b2b2b
--message-surface	#eeeeee

Light Mode

Token	Value
--bg-primary	#ffffff
--bg-secondary	#f9f9f9
--text-primary	#0d0d0d
--text-secondary	#5d5d5d
--text-tertiary	#8f8f8f

Typography

Font Stacks

Name	Stack
--font-sans	ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif
--font-mono	ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
Marketing	"Neural Sans", sans-serif

App Type Scale

heading-app / 1.75rem / 500 / +0.024rem

What can I help with?

heading-2 / 1.5rem / 600 / -0.016rem

Chat history

heading-3 / 1.125rem / 600 / -0.028rem

Section Heading

body-regular / 1rem / 400 / -0.025rem

The quick brown fox jumps over the lazy dog. This is the primary body text used throughout the Neural interface for message content and general text.

body-small-regular / 0.875rem / 400 / -0.019rem

Smaller body text for secondary content and UI labels.

footnote-regular / 0.8125rem / 400 / -0.005rem

Footnote text for disclaimers, timestamps, and metadata.

footnote-medium / 0.8125rem / 500 / -0.005rem

Medium footnote for labels and small interactive elements.

monospace / 0.9375rem / 400 / -0.025rem

const greeting = "Hello, World!";

caption-regular / 0.75rem / 400 / -0.006rem

Caption text for small annotations.

Font Weights

Name	Value
extralight	200
light	300
normal	400
medium	500
semibold	600
bold	700
black	900

Spacing

Based on a 4px grid (Tailwind v4 default). Key layout dimensions below.

1 (4px)

2 (8px)

3 (12px)

4 (16px)

5 (20px)

6 (24px)

8 (32px)

10 (40px)

12 (48px)

16 (64px)

Layout Dimensions

Token	Value
--sidebar-width	260px
--header-height	52px
--composer-bar_width	768px
--composer-bar_height	52px
--thread-content-max-width	52rem (832px)
--user-chat-width	50%
--thread-component-gap	28px
--thread-turn-vertical-padding	1.25rem (20px)
--menu-item-height	44px
--icon-lg-size	22px
--scrollbar-width	10px
--tap-padding (pointer)	32px
--tap-padding (mobile)	44px

Border Radius

xs
2px

sm
4px

md
6px

lg
8px

xl
12px

2xl
16px

3xl
24px

4xl
32px

pill
full

Usage	Value
Pill buttons (CTA, voice)	9999px (full)
Composer input	28px
User message bubble	24px (3xl)
Cards, sheets, dropdowns	16px (2xl)
Code blocks	8px (lg)
Icon buttons, sidebar items	8px (lg)
Inline code	4px (sm)

Shadows

drop-xs

drop-sm

drop-md

drop-lg

shadow-lg

composer

Animation

Token	Value
--default-transition-duration	0.15s
--default-transition-timing-function	cubic-bezier(0.4, 0, 0.2, 1)
--spring-fast-duration	0.667s
--spring-common-duration	0.667s
--spring-bounce-duration	0.833s
--spring-slow-bounce-duration	1.167s
--easing-spring-elegant-duration	0.58171s
--ease-in	cubic-bezier(0.4, 0, 1, 1)
--ease-out	cubic-bezier(0, 0, 0.2, 1)
--ease-in-out	cubic-bezier(0.4, 0, 0.2, 1)
--cot-shimmer-duration	2s

Keyframe Animations

pulse
2s

spin
1s

hover
me

Breakpoints

Name	Value
md	48rem (768px)
lg	64rem (1024px)
xl	80rem (1280px)
2xl	96rem (1536px)

Buttons

Button Variants

Variant	Background	Color	Border	Radius	Height
Primary (dark fill)	#0d0d0d	#fff	transparent	9999px	36px
Secondary (light fill)	#fff	#0d0d0d	rgba(0,0,0,.15)	9999px	36px
Ghost / Outline	transparent	--gray-300	#ffffff26	9999px	36px
Danger	--red-500	#fff	none	9999px	36px
Accent (auth CTA)	--blue-400	#fff	none	9999px	48px
Icon button	transparent	inherit	none	8px	36px
Voice pill	--gray-100	#0d0d0d	none	9999px	auto

Inputs / Composer

Composer Bar (Light Mode)

Ask anything

🔎

🎤 Voice

Composer Bar (Dark Mode)

Ask anything

🎤 Voice

Property	Value
Max width	768px (--composer-bar_width)
Border radius	28px
Bg (light)	#fff with box-shadow
Bg (dark)	#2f2f2f with 1px #ffffff1a border
Placeholder	"Ask anything"
Font size	16px
Textarea padding	0 0 16px

Model Selector

Model Selector Dropdown

Sidebar

Property	Value
Width	260px
Bg (dark)	#171717
Bg (light)	#f9f9f9
Body text	#ededed
Section title	#f0f0f080
Icon color	#a4a4a4
Item border-radius	8px
Item padding	8px 12px
Hover bg	#ffffff1a
Sticky backdrop blur	14px
Rail width (collapsed)	calc(14 * 4px) = 56px
Top items	New chat, Search chats, Images, Apps, Deep research, Health

Code Blocks

Code Block (Dark Theme)

javascript

function greet(name) {
  // Say hello
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

greet("World"); // "Hello, World!"

Property	Value
Background	#0d0d0d (dark) / #171717
Header bg	#2f2f2f (gray-750)
Font family	--font-mono
Font size	0.9375rem (15px)
Line height	1.375rem (22px)
Border radius	8px
Text color	#e8e8e8
Keyword	#c678dd (purple)
String	#98c379 (green)
Function	#61afef (blue)
Comment	#5c6370 (gray)
Number	#d19a66 (orange)

File Icon Colors

PDF#ff928c

JPG#8ebaff

PNG#62e2cc

MP4#8ad56f

XLS#4aa647

ZIP#cacaca

Code#bebebe

Chat Interface - Light Mode

How do I center a div in CSS?

There are several ways to center a div in CSS. Here are the most common approaches:

1. Flexbox (recommended)

css

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Grid

css

.parent {
  display: grid;
  place-items: center;
}

Both approaches work well. Flexbox is generally preferred for one-dimensional layouts, while place-items: center is a nice shorthand for Grid.

Chat Interface - Dark Mode

Explain closures in JavaScript with a practical example

A closure is a function that has access to its outer (enclosing) function's variables, even after the outer function has returned.

Here is a practical example - a counter factory:

javascript

function createCounter(initialValue = 0) {
  let count = initialValue;

  return {
    increment: () => ++count,
    decrement: () => --count,
    getCount: () => count,
  };
}

const counter = createCounter(10);
counter.increment(); // 11
counter.increment(); // 12
counter.getCount();  // 12

The inner functions (increment, decrement, getCount) form closures over the count variable. Even though createCounter has finished executing, the returned methods still have access to count.

This pattern is useful for data encapsulation - the count variable is private and can only be modified through the exposed methods.

Auth / Login Page

Neural

Suggest fun activities

for a team-building day with remote employees

Get started

Try it first

Auth Page Notes: The login page uses a split-screen layout. The left panel cycles through colorful backgrounds (yellow, blue, green, pink, etc.) with animated prompt examples. Bold accent text uses orange (#e25507). The right panel has a white background with "Get started" heading and two large blue pill CTA buttons (background: #0285ff).

Interactive States

State	Primary Bg	Secondary Bg	Accent Bg
Default	#fff	transparent	#013566 (blue-800)
Hover	#fffc	#ffffff1a	#003f7a (blue-700)
Press	#ffffffe5	#ffffff0d	#004f99 (blue-600)
Inactive	#fff	transparent	#013566 (blue-800)
Selected	#fff	#ffffff1a	same as default

State	Primary Label	Secondary Label	Tertiary Label
Default	#0d0d0d	#f3f3f3	#cdcdcd
Hover	#0d0d0d	#ffffffe5	#cdcdcd
Press	#0d0d0d	#fffc	#cdcdcd

Focus

Token	Value
--interactive-border-focus	#fff
Focus outline width	1.5px
Focus outline offset	2.5px
Focus outline margin	4px (default), -4px (inset)

Responsive Patterns

Mobile (375px): Sidebar collapses to a slide-over drawer. Composer bar becomes full-width. Header simplifies. Touch targets increase to 44px minimum. The chat message max-width becomes 100%. Thread content margin reduces from 64px to 12px.

Tablet/Desktop Transition: At md breakpoint (768px), sidebar becomes visible. Composer bar constrains to 768px max-width. Thread content gets 64px (16 * 4px) side margins.

Pattern	Mobile	Desktop
Sidebar	Slide-over drawer	Fixed 260px
Touch targets	44px (--tap-padding-mobile)	32px (--tap-padding-pointer)
Icon buttons	40px x 40px	36px x 36px
Thread margin	12px (3 * spacing)	64px (16 * spacing)
Thread max-width	100%	52rem (832px)
Composer width	100%	768px max

Scrollbar

Property	Value
Width	10px
Track color	transparent
Thumb color	#ffffff1a
Thumb color (hover)	#ffffff33
Utility color	#ffffff33

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.theme.extend,
  },
};

// Also reuse designSystem.tailwind.componentRecipes for common surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Design System	`—`	`—`	`—`	`—`	`—`

Scope	Recipe	Class Pattern	Notes
Design System	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Design System	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Design System	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.