UI Kit Tools for Designers: Buttons, Cards, Forms

Every web app contains roughly the same fifteen components. Buttons, inputs, selects, checkboxes, radios, cards, modals, tooltips, navigation, tabs, accordions, tables, alerts, spinners, badges. Once you have those fifteen, most interfaces are combinations of them. The value of a design system is not that it invents new components; it is that it makes the same fifteen consistent across hundreds of screens.

This guide walks through the UI components you need the most often, the browser-based generators that produce the CSS or HTML scaffolds for them, and the mature design systems worth studying as references. If you are building an interface from scratch and do not want to start with nothing, this is a starting point.

Buttons, the component that does the most work

A button is the most-clicked element in any interface and the one users judge an app by first. A well-designed button is clearly clickable, visually distinct from disabled state, keyboard accessible, touch-friendly, and affords the action it represents.

The properties that distinguish a good button from a bad one:

• Size. Minimum 44x44 CSS pixels for touch targets, per Apple's Human Interface Guidelines. This is the minimum finger-tap area.
• Padding. Horizontal padding should be generous — at least 16px for primary buttons. Text that touches the button edge looks cramped.
• States. Default, hover, active, focus, and disabled. Five visual states, and each one should be clearly different from the others. Focus especially — keyboard users rely on it.
• Hierarchy. One primary button per view. Secondary buttons are less prominent. Tertiary buttons look almost like plain text. Mixing hierarchies is how UIs become confusing.

Use CSS Button Generator to produce ready-to-paste CSS for a button with configurable colors, radius, shadow, and hover state. The generated CSS is a reasonable starting point for a custom button style; paste it into your component and tune from there.

Cards and layouts

Cards are the box with a shadow and a rounded corner that became the default way to group related content on a page. They appeared in Material Design around 2014 and every web app has used them since.

A card is three things at the CSS level: a background color, a border-radius, and a box-shadow. That is all. The rest is layout inside the card — padding, an image or icon, a title, a description, maybe buttons at the bottom.

The mistakes that make cards look amateur:

• Shadow too harsh. A 10px black shadow at 50% opacity reads as dirty. Modern card shadows are subtle: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.1). Layered soft shadows feel premium.
• Radius inconsistency. If your cards are 8px radius, your buttons inside them should not be 16px. Pick a radius scale and apply it consistently.
• Insufficient padding. Card content should breathe. 16px minimum, 24px for content-heavy cards.

Set a consistent radius with CSS Border Radius Generator and a layered soft shadow with CSS Box Shadow Generator. For more dramatic effects — clipped images, hero shapes — CSS Clip Path Generator lets you draw a polygon and outputs the corresponding clip-path value.

Forms and inputs

Forms are the UI element that is the hardest to get right and the most important to get right. Users fill them out reluctantly and abandon them at the first sign of friction. A form with bad layout, unclear labels, or no inline validation loses conversions that a good form would capture.

Principles that apply to every form:

• One column. Multi-column forms force the eye to zigzag. One column, top to bottom, is faster to fill.
• Labels above inputs. Not beside. Beside-labels are hard on mobile and slow the eye down on desktop.
• Placeholders are not labels. A placeholder disappears when the user types, so they forget what field they are filling in. Use both if you want placeholder hints, but never rely on a placeholder alone.
• Inline validation. Validate as the user leaves a field, not on submit. Tell them the problem when it is fresh, not twenty seconds later.
• Required vs optional. If most fields are required, mark the optional ones. If most are optional, mark the required ones. The minority gets the marker.
• Match keyboard to field type. type="email", type="tel", inputmode="numeric". On mobile these change the keyboard to the right one.

Scaffold a form structure with HTML Form Builder, which generates the HTML for a form with the labels, required fields, and input types configured. It is a starting point — you still need to style and wire it — but it saves the tedium of writing the markup by hand.

Effects: gradients, shadows, radius

Visual effects are where interfaces develop character. Used well, they make an app feel modern and distinct. Used badly, they make it look like a 2012 Windows theme.

Gradients. The difference between a boring background and a striking one is often a two-color linear gradient at 135 degrees. Subtle gradients (10% difference between start and end color) feel premium. Wild gradients (complementary colors) feel retro or playful. Generate quickly with CSS Gradient Generator.

Shadows. Layered soft shadows are the single biggest upgrade you can make over a default box-shadow: 0 4px 8px black. Multiple shadows with different offsets and blur simulate the way real shadows look in ambient lighting.

Radius. Sharp corners (0px) feel technical or brutalist. Fully rounded corners (9999px on a tall-enough element) feel friendly. Medium radius (8–16px) is the safe default for most UIs.

Animation. Subtle transitions (transform, opacity) make interactions feel responsive. Heavy animations make everything feel slow. Use CSS Animation Generator to explore named animations and get the keyframes as CSS. Keep durations under 300ms for UI animations; longer feels sluggish.

Reference design systems worth reading

You do not have to build a design system from scratch. The existing ones are well-documented and freely readable. Study them as references even if you do not adopt them literally.

• Material Design 3. Google's design language. Comprehensive, opinionated, well-documented. If you like its look, use it.
• Apple Human Interface Guidelines. The reference for native iOS, macOS, and the "feels like Apple" aesthetic on web.
• Tailwind CSS. Not a design system per se but a utility framework with opinionated defaults for color palettes, spacing, and sizes that many modern sites adopt.
• IBM Carbon. Enterprise-focused, dense, and extensively documented. A good reference for data-heavy interfaces.
• GitHub Primer. Readable source code and visual tokens for a system that has evolved gracefully for a decade.

Read their component documentation. Steal the spacing scales, the color palettes, the semantic token names. Even if you are writing custom CSS, these systems will save you hours of "what should the gap between buttons be" deliberation.

Adjacent tools worth bookmarking

Related tools that pair with UI kit work: Color Picker for exact brand hex values, Color Contrast Checker to confirm text passes WCAG before it ships, Matrix Rain Effect Generator for distinctive hero or motion-reference backgrounds, CSS Minifier to trim the stylesheet that ships to production, and CSS Transform Generator for the rotate/scale/skew values that make interactive states feel lively.

Related pillar guide

This cluster is part of the design track. For a broader reference on browser-based tools for designers and frontend developers, see The Complete Guide to Free Online Tools in 2026.

FAQ

Do I need Figma to design a UI?

No. Many developers design in the browser with CSS generators and live preview. Figma is essential for team handoffs and complex prototypes; it is optional for solo builds.

Should I use a component library like Material or build my own?

Use a library for the first version — getting to market fast matters more than pixel-perfect uniqueness. Build custom when you need a look the library cannot provide, and your traffic justifies the maintenance cost.

What makes a UI feel modern in 2026?

Generous whitespace, layered soft shadows, subtle gradients, medium-to-large border radius, one clear hierarchy per screen, and animations under 300ms. The exact values change across years but the principles are stable.

How many border-radius values should I have in my system?

Three to five. A small one for inputs (6px or 8px), a medium for cards (12px or 16px), a large for hero shapes (24px), and pill (9999px) for rounded buttons. More than that and the system feels inconsistent.

Is it okay to use a CSS framework like Tailwind for a design system?

Yes. Tailwind's default tokens are a reasonable design system for most projects. Customize the config to match your brand and you have a consistent, documented system with zero runtime cost.

Closing thought

The fastest way to a good-looking UI is not to invent every detail. It is to steal the principles from a mature system, use generators for the tedious CSS, and spend your design time on the parts that are actually about your product. The boring consistency is what separates a polished app from a collection of pages.