Skip to content

UI.md

Latest commit

 

History

History
105 lines (73 loc) · 2.7 KB

UI.md

File metadata and controls

105 lines (73 loc) · 2.7 KB
Raw

UI Styling Prompt (Inspired by Screenshots)

Design a clean, professional maritime dashboard UI inspired by premium finance/project dashboards. The aesthetic must follow a modern minimal green–white theme with structured spacing, rounded elements, and subtle depth.

Overall Style

  • Light, clean, minimal interface

  • Primary color palette:

    • Deep Green: #033E29
    • Emerald: #0A8A46
    • Mint Green: #C6F0D8
    • Neutral White: #FFFFFF
    • Soft Gray: #F5F7F9, #E1E4E8
    • Text Black: #1A1D1F, #3B3F43

  • Fonts: Inter / SF Pro / Poppins (clean sans-serif)

  • Layout: Card-based, plenty of whitespace, clear grids

  • Spacing & radius:

    • Border-radius: 16px default, 24px for large cards
    • Spacing scale: 8 / 12 / 16 / 24 / 32px

Color & Gradients

  • Use green gradients as highlights, not everywhere

  • Gradient style example:

    linear-gradient(135deg, #0A8A46 0%, #033E29 100%)

  • Controls and primary cards use soft green-to-deep-green gradients

  • Background stays white / very light gray

  • Hover states: slightly darker tint + soft shadow

Component Style

Cards

  • Soft shadow: 0px 4px 12px rgba(0,0,0,0.06)
  • Subtle border: 1px solid #E6E6E6
  • Clean top header, numbers bold, small icon label

Buttons

  • Primary button: Green gradient, white text
  • Secondary: White background, gray border, green text
  • Icons inside rounded pills where relevant

Sidebar

  • Vertical left sidebar, muted background
  • Active menu item: green pill highlight + subtle depth
  • Icons thin, minimal, line style

Top Bar

  • Search bar centered/left
  • User avatar top right
  • Light icons, no heavy lines

Charts & Data

  • Rounded bar charts, donut charts, smooth shapes
  • Use 2–3 tones of greens for data
  • Krit subtle animation on hover/active
  • Trend indicators with tiny arrows + colored tags

Tags & Badges

  • Status color system:

    • Success: soft green
    • Pending: yellow muted
    • Error/declined: warm red

  • Rounded pill style, 12px padding, 12px radius

Visual Mood

  • Clean, corporate, premium SaaS feel
  • Calm colors, soft interactions, luxury fintech vibe
  • Nothing noisy — clarity & elegance first

Special Maritime Touch

  • Add subtle marine/blue-gray accents where appropriate
  • Micro-textures like wave patterns only in hero/time-tracking blocks
  • Icons hinting ships, fuel, logistics, analytics

Motion

  • Smooth subtle micro-interactions
  • Soft fades + scale for hover
  • No dramatic animations

Goal

Transform the app into a polished, premium dashboard UI with: ✔ strategic green gradients ✔ card-first structure ✔ elegant typography ✔ minimal luxury feel ✔ marine-technology vibe