Intent design system


Color

Our palette pairs a warm neutral foundation with a focused citrus accent. Semantic tokens connect those foundation colors to their purpose in the interface.

Core

Yellow 200--color-yellow-200
#C0CC54
Yellow 300--color-yellow-300
#D3DE5D
Yellow 500 - Primary--color-yellow-500
#DDEC61
Yellow 700--color-yellow-700
#FEF99D
Yellow 800--color-yellow-800
#FFFFC7
Yellow 900--color-yellow-900
#FCFCF9
Black--color-black
#080808
Grey 50--color-grey-50
#161616
Grey 100--color-grey-100
#1A1A19
Grey 200--color-grey-200
#272727
Grey 300--color-grey-300
#3D3D3C
Grey 400--color-grey-400
#525250
Grey 500--color-grey-500
#8C8C89
Grey 600--color-grey-600
#BABAB7
Grey 700--color-grey-700
#CFCFCD
Grey 750--color-grey-750
#D9D9D9
Grey 800--color-grey-800
#E1E1DE
Grey 850--color-grey-850
#E5E5E5
Grey 900--color-grey-900
#F0F0EB
White--color-white
#FFFFFF

Secondary

Moss 400--color-moss-400
#717453
Moss 500--color-moss-500
#979A73
Orange 500--color-orange-500
#FAA755
Red 500--color-red-500
#E87F39

Gradients

Work in progress gradients, used for subtle backgrounds and surfaces, and complimentary to flat colors. Don't overuse.

Light Grey To Yellow
Medium Grey to Yellow
Grey To Yellow
Yellow Wash
Yellow To Grey
Light Yellows

Typography

ABC Arizona Mix gives headlines their expressive shape, while Inter keeps interface and supporting copy direct and readable.

ABC Arizona Mix

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()

Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()

H1ABC Arizona Mix 38090px / .95

Large-scale agent coordination.

H2ABC Arizona Mix 40060px / 1

Large-scale agent coordination.

H3ABC Arizona Mix 40048px / .95

Large-scale agent coordination.

H4ABC Arizona Mix 40026px / 1

Large-scale agent coordination.

Feature bodyInter 40016px / 1.3

Large-scale agent coordination.

BodyInter 40032px / 1.3

Large-scale agent coordination.

BaseInter 40018px / 1.3

Large-scale agent coordination.

LabelAeonik Mono 40014px / 1.1

Large-scale agent coordination.

Iconography

Functional icons are derived from the language of the mark: rounded corners with flat caps. They are set in a 192px grid at 16px thickness, meaning at 16x16px they use a 1.33px thickness. At 12x12px, stroke thickness isn't scaled down, rather forms are reduced and simplified.

Add
Agent General 1
Agent General 2
Agent General 3
Agent General 4
Agent Special 1
Agent Special 3
Agent Special 4
Agent Special 5
Agent Special 6
Agent Special 7
Agent Special 8
Agents
App Window
Apple
Archive
Arrow Down
Arrow Left
Arrow Right
Arrow Up
Attention Circle
Audio
Audio Mute
Battery 1 Bar
Battery 2 Bars
Battery Empty
Battery Full
Brightness Dim
Brightness Full
Brightness Rise
Browser
Check
Check Circle
Chevron Down
Chevron Left
Chevron Right
Chevron Up
Circular
Clockwise Arrow
Close
Close Circle
Code
Collapse Left
Collapse Right
Command
Connection
Copy
Counter Clockwise Arrow
Dandelion
Delegating
Delete
Device 1
Device 2
Device 3
Device 4
Device 5
Display Edit
Download
Download File
Edit
Enter
Expand
Expand 2
External
External 2
Eye
File
File List
Flower Burst
Folder
Folders
Full List
Gemini
Git
Git Branch
Git Diff
Git Fork
Git Merge
Git Pr
Github
Globe
Globe Small
Grok
History Circle 3
History Circle 4
Hold
Home
Home Small
Info Circle
Input 1
Input 2
List
Live Audio
Lock Closed
Lock Open
Lock Open 2
Login
Logout
Map Pin
Menu
Menu Quad
Message
Message Check
Message Dashed
Message Dot
Message Heart
Message List
Message More
Message Off
Message X
More
Mouse 1
Mouse 2
Night
Notification
Openai
Panel Horizontal
Panel Vertical
Paperclip
Pause
Pause Small
Pin
Play
Play Fill
Play Fill Small
Play Small
Press To Hold
Qr Code
Question Circle
Redo
Save
Screen
Screen Recording Start
Screen Recording Stop
Search
Selection Text
Settings
Settings 2
Settings 3
Spaces
Speedometer Extra High
Speedometer High
Speedometer Low
Speedometer Max
Speedometer Medium
Stop
Stop Fill
Stop Small
Submit
Tabs
Terminal
Thinking
Toggle
Toggle Square
Truck One
Undo
Upload
Waiting
Wallet
Windows
Zoom

Foundations

Corner radii, margins, control sizes, and elevation. These are the measurements every surface, control, and layout in the system is built from. Corner radii and margins are tokens in global.css and wired through the components; sizes and elevation are still set per component.

Corner radii

XS--radius-xs
5px
S--radius-s
10px
M--radius-m
15px
L--radius-l
20px
XL--radius-xl
25px
2XL--radius-2xl
45px

Margins

5px--space-5
5px
10px--space-10
10px
15px--space-15
15px
20px--space-20
20px
25px--space-25
25px
40px--space-40
40px
60px--space-60
60px
80px--space-80
80px

Sizes (buttons)

XSno token yet
35px
Sno token yet
40px
Lno token yet
60px
XL — circular onlyno token yet
90px

Elevation

Drop shadowno token yet
Y10, blur 20

Components

Reusable interface pieces currently available in the Astro site. Detailed component layouts and usage guidance will follow.

Buttons

Color
Size
Variant
State
Tooltip

Dropdown

Color
Size
List
Item icon
Margin
Position
State

Model switcher

Color
Models

Tabs

Color
Size
Variant
Amount

Combo Button

Variant
Size
Color
Amount
State

Switch

Size
Color

Slider

Color
Label
Size
Handle
Editable value
Property

Checkbox

Size
State

Form field

Color
Size
State
Icon

Tooltip

Variant
Placement

Context menu

List
Item icon

Side navigation

List
Color
Width
Eyebrow