Developer Tools

Neon

neon.tech13 colors5 componentsInterMulti-page · 12 screens

The backend for apps and agents. Build with Lakebase Postgres, Auth, Functions, Storage, and an AI Gateway: instant, branchable, serverless.

Remix Visit

Remix

Visit

12 screenshots captured· neon.tech

1 / 12 · Neon — Postgres backends for apps and agents · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from neon.tech

Primary

#FFFFFF

Primary CTA, brand accent, active state; Headings / primary text

#34D59A

Brand hue used alongside the achromatic primary

#303236

Accent / decorative

#18191B

Accent / decorative

#648DFF

Accent / decorative

Neutral

#000000

Default page background; label colour on brand surfaces

#CDDFD7

Card / panel background

#E4E5E7

Body copy

#D7D8DB

Captions, secondary text

#C9CBCF

Tertiary / placeholder text

#242628

1px borders and dividers

#AFB1B6

Neutral

#94979E

Neutral

Typography · Inter

body15px · 400 · 20.625px

body16px · 400 · 20px

body13px · 400 · 17.875px

list-item16px · 400 · 24px

nav-link13px · 400 · 16.25px

body18px · 500 · 18px

body16px · 400 · 22px

body18px · 400 · 22.5px

caption10px · 500 · 10px

body14px · 400 · 14px

body18px · 400 · 27px

caption12px · 600 · 12px

link15px · 400 · 15px

button15px · 400 · 22.5px

body20px · 500 · 27.5px

body14px · 500 · 14px

body24px · 500 · 24px

body20px · 400 · 25px

body14px · 400 · 19.25px

h148px · 500 · 54px

h228px · 500 · 35px

h320px · 400 · 27.5px

body18px · 500 · 27px

body16px · 500 · 16px

body18px · 500 · 24.75px

h156px · 400 · 63px

h272px · 400 · 72px

button16px · 500 · 16px

quote24px · 400 · 36px

display44px · 400 · 49.5px

heading36px · 400 · 40.5px

display52px · 400 · 58.5px

display64px · 400 · 64px

display98px · 400 · 98px

heading32px · 400 · 40px

heading28px · 400 · 35px

display80px · 400 · 80px

body15px · 400 · 15px

h160px · 400 · 67.5px

h248px · 400 · 54px

h324px · 400 · 33px

h428px · 400 · 28px

button20px · 500 · 27.5px

display44px · 400 · 49.5px

body14px · 400 · 20px

body16px · 700 · 24px

heading18px · 600 · 28px

body14px · 300 · 19.25px

heading24px · 400 · 33px

body18px · 500 · 24.75px

heading20px · 400 · 27.5px

label14px · 400 · 20px

input18px · 400 · 27px

caption15.75px · 400 · 22.5px

button16px · 500 · 16px

heading24px · 500 · 33px

caption18px · 400 · 27px

body18px · 700 · 27px

h140px · 500 · 50px

h226px · 500 · 32.5px

h318px · 500 · 25px

link14px · 400 · 17.5px

body16px · 400 · 22px

body15px · 500 · 20.625px

heading18px · 500 · 25px

button14px · 500 · 14px

body15px · 400 · 20.625px

body14px · 400 · 20px

button15px · 500 · 15px

h148px · 400 · 54px

h424px · 500 · 30px

body20px · 400 · 30px

display64px · 400 · 64px

heading32px · 400 · 40px

body16px · 500 · 16px

display40px · 400 · 45px

Typography · GeistMono

code14px · 400 · 16.8px

code16px · 400 · 24px

code12px · 500 · 16.5px

h352px · 400 · 52px

code52px · 400 · 63px

code128px · 400 · 128px

code20px · 400 · 22.5px

code16px · 600 · 24px

code14px · 500 · 14px

quote20px · 400 · 27.5px

h413px · 500 · 13px

code14px · 400 · 30.8px

Spacing

8px

20px

16px

32px

12px

24px

4px

28px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.4) 0px 8px 20px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.5) 0px 4px 10px 0px, rgba(0, 0, 0, 0.5) 0px 4px 30px 0px

rgba(255, 255, 255, 0.5) 0px 0px 1px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.5) 0px 14px 20px 0px

Components · 5

Remixes of Neon

Latest remixes

No public remixes yet. Be the first to make one.

Remix it