Gonto Design System

Minimal expense tracking design

Back to Patterns

Form Patterns

Form patterns, input styles, validation states, and field composition guidelines.

Input Field Patterns

Borderless Bottom-Border Style

EUR

Input Field Specifications

Border StyleBottom border only (border-b)
Border Colorneutral-300 / neutral-700
Focus Borderneutral-950 / white
Hover Backgroundneutral-50 / neutral-900/30
Typographytext-base font-light
Label Styletext-xs uppercase tracking-widest
Transitionduration-300 (all properties)

Grid Layout Pattern

Grid Layout Specifications

Grid Patterngrid grid-cols-1 md:grid-cols-2
Gapgap-6 (1.5rem / 24px)
Mobile BehaviorSingle column stack on mobile
Use CaseDate + Amount, Name + Email pairs

Line Items Grid Pattern

Line Items Specifications

Grid Patterngrid-cols-12
Column DistributionName: 6, Qty: 2, Price: 2, Total: 2
Number Alignmenttext-right
Typographytext-xs font-light
Gapgap-2 (0.5rem / 8px)

Form Actions

Button Groups

Form Action Specifications

Layoutflex gap-3 justify-end
Primary ButtonInverted colors (bg-neutral-950)
Secondary ButtonText-only, no background
Paddingpx-6 py-3
Typographytext-sm font-light
Hover EffectPrimary: opacity-80, Secondary: opacity-60

Form Pattern Best Practices

Design Guidelines

  • •Use borderless inputs with bottom borders for a clean, minimal aesthetic
  • •Maintain consistent spacing between form fields (gap-6 or 1.5rem)
  • •Use uppercase tracking-widest labels for clear field identification
  • •Apply font-light typography throughout for visual consistency
  • •Group related fields using grid layouts (date + amount pairs)
  • •Use 12-column grids for line item tables with appropriate column spans
  • •Align numbers to the right for better readability in tabular data
  • •Place form actions at the bottom right with Cancel left, Save right
  • •Use inverted colors for primary actions to create visual hierarchy
  • •Include subtle hover states for better user feedback (bg transitions)

Accessibility Considerations

  • •Always pair inputs with descriptive label elements
  • •Use proper input types (date, number, email) for better keyboard support
  • •Ensure sufficient color contrast for focus states
  • •Provide clear visual feedback on focus with border color changes