Meetgen

Overview

Meetgen is a mobile-first meeting intelligence platform that transforms audio and video calls into structured, actionable meeting schedules and agendas. It serves busy professionals and teams who need to extract maximum value from their meetings without manual note-taking. The design aesthetic is 'Warm Minimalism'—a contemporary approach that combines a dark, focused canvas (near-black #0e0e0e) with a vibrant, energetic accent color (warm orange #ff8c42) that signals action, urgency, and forward momentum. The UI evokes a sense of clarity and control: users feel empowered to manage their time and meetings with confidence, never overwhelmed by complexity.

The brand voice is direct, optimistic, and action-oriented. Meetgen speaks in short, declarative sentences that emphasize outcomes: 'Generate a meeting from your audio & video calls. Create fully briefed meeting schedule in your calendar. In zero seconds.' The vocabulary favors active verbs (generate, create, view, edit) and concrete nouns (schedule, attendees, agenda, insights). Tone is never corporate or stiff—it's conversational and encouraging, as if a trusted colleague is guiding you through a task. Example sentence: 'Join Meeting' or 'Edit Meeting' or 'View your generated meetings schedule.'

Colors

Meetgen's color system is built on a high-contrast, dark-first foundation that maximizes focus and reduces visual fatigue on mobile devices. The primary accent color is Warm Orange (#ff8c42), used exclusively for call-to-action buttons, active states, badges, and key interactive elements. This color appears frequently across the UI—on 'Get Started' buttons, selected calendar dates, meeting status indicators, and attendee badges—creating a consistent visual language that trains users to recognize interactive zones. Primary is paired with white (#ffffff) for maximum contrast and legibility at small sizes.

The secondary palette consists of light neutrals (#e9ecef, #d0d0d0, #f0f9fa) used for disabled states, hover backgrounds, and subtle container fills. These colors maintain the warm, approa

Typography

The type system uses a single, modern sans-serif family (Inter) across all scales, creating visual cohesion and reducing cognitive load. Display (56px, 700 weight) is reserved for hero headlines and major announcements; Headline-lg (32px, 700 weight) anchors screen titles like 'Ciao, Damir!' and 'Your Settings'; Headline-md (24px, 600 weight) breaks up dense content into scannable sections. Body-lg (18px, 400 weight) is used for descriptive text and longer-form content, while Body-md (16px, 400 weight) serves as the default for UI labels and list items. Label-md (14px, 600 weight) is applied to button text, badges, and form labels, ensuring they stand out as interactive. Label-sm (12px, 500 weight) is reserved for secondary metadata and timestamps. All headlines use negative letter-spacing

Layout

Meetgen uses a mobile-first, single-column layout with a maximum container width of 480px, optimized for portrait-orientation phones and small tablets. The grid is 4 columns, allowing flexible 1/4, 1/2, and full-width arrangements for cards, buttons, and input fields. Spacing follows a strict 8px unit system: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for full-page rhythm. The gutter (16px) is applied consistently to left and right edges of the viewport, creating breathing room without wasting space. Calendar grids use a 7-column layout (one per day of the week) with 8px padding between cells. Buttons are full-width (100% of their container) on mobile, ensuring thumb-friendly tap

Elevation & Depth

Depth in Meetgen is conveyed through a subtle shadow system and incremental background color shifts, avoiding harsh contrasts that would feel jarring on a dark canvas. Level 1 (Base) is the main surface at #0e0e0e with no shadow. Level 2 (Standard Cards) uses background-color: #1a1a1a with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift that separates content from the canvas. Level 3 (Elevated Modals & Dropdowns) uses background-color: #242424 with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), signaling modal importance and focus. Dropdown panels are rendered at Level 3 with a wh

Shapes

Meetgen employs a 'Soft-Technical' shape philosophy that balances approachability with modern precision. Buttons and primary CTAs use lg radius (1rem / 16px), creating rounded rectangles that feel friendly and tappable without appearing cartoonish. Cards and containers use xl radius (1.5rem / 24px), emphasizing the soft, welcoming aesthetic and differentiating them from buttons. Input fields and smaller interactive elements use DEFAULT radius (0.5rem / 8px), maintaining visual hierarchy while keeping the interface cohesive. Dropdown panels and popovers use DEFAULT radius (0.5rem / 8px) to sign

Components

Action Elements Buttons are the primary drivers of user action in Meetgen. Primary buttons (button-primary) use the warm orange (#ff8c42) background with white text, 48px height, 12px vertical padding, and lg radius (16px). On hover, the background darkens to #ff7a2a over 200ms, providing tactile feedback. On active/pressed, the background shifts to #ff6b1a, creating a three-state progression that feels responsive and intentional. Secondary buttons (button-secondary) use the light gray container (#e9ecef) with dark text, maintaining the same dimensions and radius. Ghost buttons (button-ghost) have a transparent background with a 1px primary-colored border and primary text, useful for destructive or low-priority actions. All buttons use label-md typography (14px, 600 weight) and are ful

Do's and Don'ts

**Do**

• Do use the primary orange (#ff8c42) exclusively for CTAs, active states, and key interactive elements—never dilute it with secondary uses.
• Do maintain 48px minimum height for all touch targets (buttons, list items, input fields) to ensure comfortable mobile interaction.
• Do apply the lg shadow (0 3px 8px rgba(0, 0, 0, 0.15)) consistently to all elevated surfaces to create predictable depth hierarchy.
• Do use label-md (14px, 600 weight) for all button and badge text to ensure legibility at small sizes and create visual consistency.
• Do apply 200ms ease-out transitions to all state changes (hover, focus, active) to provide smooth, responsive feedback without jank.
• Do use the full 8px spacing unit scale (xs, sm, md, lg, xl) to create rhythm and hierarchy—never use arbitrary pixel values.
• Do render dropdown panels at white (#ffffff) with full contrast to create clear visual separation from the dark UI canvas.

**Don't**

• Don't use the primary orange (#ff8c42) for body text, backgrounds, or non-interactive elements—reserve it exclusively for actions and states.
• Don't create buttons smaller than 48px in height or with less than 12px vertical padding, as this breaks mobile usability and accessibility.
• Don't apply shadows larger than lg (0 8px 24px rgba(0, 0, 0, 0.25)) to avoid creating visual noise and reducing perceived depth contrast.
• Don't mix font families or use system-ui, sans-serif fallbacks—always specify Inter as the primary typeface to maintain brand consistency.
• Don't use transitions longer than 200ms for state changes, as this creates perceived lag and reduces the feeling of responsiveness.
• Don't apply border-radius smaller than DEFAULT (8px) to buttons and primary interactive elements, as this makes them feel cramped and technical.
• Don't render modals or dropdowns with dark backgrounds—always use white or light containers to create clear visual hierarchy and focus.