Listing Form Style Guide

This page showcases all the form fields and UI components built for the 420Asset design system.

1. Text kind of fields

Basic input types for user data.

i
i
i
i
i

2. Fields with Prefix

Inputs with icons or symbols at the start.

@
$
link:
📧

3. Fields with Suffix

Inputs with units or icons at the end.

Done
sq ft
.com
@gmail.com

4. Fields with Dynamic Validation (Max 120)

Fields with character counters and length limits.

0 / 120
0 / 10
0 / 50
0 / 30
0 / 500

5. Selection Fields

Single and multiple choice dropdowns.

Select Multiple Options...
Select Options...

6. Checkbox & Radio

Standard and button-style selections.

7. Range Component

Interactive range selection elements.

0% 50% 100%
$1,000 $4,000

8. Image Upload

Live progress and gallery management.

i

Drop files here or click to upload

Support for single or bulk uploads. Strictly PNG, JPG, WEBP and GIF files only.

0%

Uploading files...

Selected Files

✓

Upload Successful!

Your files have been uploaded successfully

DESIGN SYSTEM V1.0

Style Guidelines

The MeritGrid design system — built for editorial confidence, authority, and approachability.

01 — Color Palette

Primary — Teal Family

Teal 50 #E3F2F0
Teal 100 #DFF1EE
Teal 500 (Brand) #0E9187
Teal 900 #07433D

Accents & Neutrals

Orange 500 #E89420
Red 500 #E94B3C
Ink (Text) #0A1F23
Cream (BG) #F8F4EB

02 — Typography

Display / H1 64/67 · -0.02em
Fraunces 600
The infrastructure behind coaching.
Section / H2 48/50 · -0.02em
Fraunces 600
Six services. One partner.
Body Large 17/28 · normal
Manrope 400
We author, design, and ship ready-to-deploy study material, mock tests, and daily content — published entirely under your brand.
Mono / Metadata 13/20 · normal
JetBrains Mono 500
v1.0.0 · 240 PAGES · EN + हिन्दी · 2.4 MB

03 — Spacing & Radius

Vertical Scale

16px — Default gap
32px — Large padding
80px — Section padding

Border Radius

MD / 12px
XL / 24px

04 — Signature Surface

SIGNATURE SURFACE

Let's build the infrastructure.