Appsmith — design system & UI screens

Dev Tools · 1 screen · 9 sections · https://www.appsmith.com/

This is a low-code/no-code application development platform designed to help teams build custom apps and automate business workflows without writing code. The landing page uses a dark theme with purple accents and features a stacked layout: hero section with headline and CTA button at top, followed by repeating sections showcasing key features (Build, Customize, Deploy and maintain) with product screenshots, client logos section, and footer. The design emphasizes rapid development and visual builders through product imagery.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/appsmith.

Decoded design system

Appsmith's decoded design system: background #16122E, text #9999A9, accent #7441F7, link #16122E, primary #190F36; type scale h1 72px / h2 44px / body 18px; 8px spacing base; 4px base radius. The single interactive/action color is #FFFFFF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#16122E`
surface	`#1D1A35`
border	`#292640`
text	`#9999A9`
text_muted	`#67657A`
primary	`#190F36`
accent	`#7441F7`
link	`#16122E`
secondary	`#9999A9`
button_bg	`#FFFFFF`
button_text	`#7441F7`

Using these colors

Action color #FFFFFF — the single interactive color; only on things you click or must notice, never large fills.
primary #190F36, link #16122E are visually the same color (Δ14) — treat as one role (the action color).
accent #7441F7 — accent for emphasis — keep it rare on the page.
secondary #9999A9 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Red Hat Display
Body: Red Hat Display
h1: 72px
h2: 44px
body: 18px

Spacing

base unit: 8px
scale: 4px, 8px, 10px, 12px, 16px, 24px, 32px, 46px, 48px, 64px

Radii

base: 4px
button: 4px

Shadows (elevation)

subtle: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 22px 134px -2px
card: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(22, 18, 46) 0px 22px 134px -2px

Motion

Micro-interactions run at 300ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 300ms · 150ms · 1000ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · linear
animated properties: opacity, color, background-color, border-color

Native design tokens

Token	Value
`--font-red-hat-display`	`"__redHatDisplay_8edbd5","__redHatDisplay_Fallback_8edbd5"`
`--font-red-hat-mono`	`"__redHatMono_81d51a","__redHatMono_Fallback_81d51a"`
`--font-tenon`	`"__tenon_cebc3f","__tenon_Fallback_cebc3f"`

Button states (measured)

primary hover: background rgba(116, 65, 247, 0.1)
primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

container max-width: 1150px
nav: 68px sticky
common grid: 3 columns

Motion choreography (measured)

Scroll reveal: 20 elements rest at opacity 0, translateY(-20px), animate in over 0.3s cubic-bezier(0.4, 0, 0.2, 1).

Overlay recipe (measured)

dialog panel: #FFFFFF · radius 4px · enter 300ms linear

Responsive (measured)

breakpoints: 480px · 640px · 768px · 1024px · 1280px · 1536px
mobile (390px): hero 32px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Landing page for low-code development platform