← Brand Guidelines

Sooner Application Kit

The design system as code: every token and reusable component for Sooner's in-product screens, extracted faithfully from the live product. This is what we build the forms and app on.

See the system

The gallery renders every component on one page - buttons, inputs, choice cards, the fee ladder, the calc card, badges, progress, the marker-pen highlight, and the motion.

Open the component gallery →

The files

sooner-kit.css
Source of truth. All design tokens + every reusable visual component. In-product CTAs are pills; yellow is an accent only.
View
sooner-form-shell.css
Reusable multi-step form scaffolding: chrome, the centered/left-aligned column, the CTA reveal, and inline progressive disclosure. Load after the kit.
View

How to build with it

  1. Link the kit, then the shell: <link rel="stylesheet" href="sooner-kit.css"> then sooner-form-shell.css.
  2. Read the kit + skim the gallery once to learn the tokens and component class names.
  3. Build screens in HTML by composing kit classes - almost no CSS of your own.
  4. Need a new component that will recur? Add it to sooner-kit.css and the gallery - never inline it or fork a copy.

Brand non-negotiables: Manrope (in-product headings 700/800), yellow #E9FE0F accent only on a cream canvas, no ALL CAPS on buttons, no exclamation marks, no em dashes, "AED" not "Dh", no period after "Sooner".