TblFlow

Overview

TblFlow is a no-code database platform that democratizes data infrastructure for teams by combining a familiar spreadsheet interface with the power of real PostgreSQL, autonomous AI agents, and semantic search. The brand aesthetic is "Technical Clarity with Gradient Optimism"—a modern, approachable interface that transforms complex database operations into conversational, visual workflows. The UI evokes confidence and capability through a vibrant indigo-to-cyan gradient backdrop (primary #4f46e5, secondary #0ea5e9, tertiary #7c3aed), clean typography, and purposeful white space. Users feel empowered to build, automate, and own their data without vendor lock-in.

The brand voice is direct, precise, and human-centered. TblFlow speaks in imperative, action-oriented language: "Ask it. Build it. Automate it. Own it." The vocabulary emphasizes autonomy (agents, ownership, self-hosted), transparency (real PostgreSQL, no proprietary format), and speed (from need to application in one conversation). Example sentence in brand voice: "Your data lives in standard PostgreSQL—query it from anywhere, export it anytime, own it forever."

Colors

The color system is built on a foundation of clean, accessible neutrals (surface #ffffff, on-surface #0f172a, outline #64748b) paired with three vibrant accent roles that drive interaction and emotion. Primary (#4f46e5, a saturated indigo) is the signature accent used on all call-to-action buttons, links, focus states, and brand-critical interactive elements—it communicates trust and technical sophistication. Secondary (#0ea5e9, a bright cyan) supports primary in gradients, highlights, and secondary CTAs, evoking clarity and forward momentum. Tertiary (#7c3aed, a vivid purple) is reserved for AI-specific UI elements, badges, and accent highlights that signal intelligent automation. Error (#dc2626) is used for destructive actions and validation states with high contrast against surfaces. Th

Typography

The typography system uses a single sans-serif family (ui-sans-serif, system-ui, Segoe UI, Roboto) across all scales, prioritizing legibility and modern minimalism over decorative variation. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; headline-lg (40px, 600 weight, -0.02em tracking) and headline-md (28px, 600 weight, -0.01em tracking) structure content hierarchy with tight letter-spacing that conveys precision. Body text (16px–18px, 400 weight, 24–28px line-height) is set with generous line-height (1.5–1.75) to ensure readability in dense product interfaces. Labels (12–14px, 500 weight) are used for UI controls, badges, and metadata with subtle letter-spacing (0.01em) to add visual separation in compact spaces. On small labels over busy back

Layout

The page layout uses a fluid, mobile-first grid with a maximum container width of 1280px, centered with auto margins. The spacing scale is semantic: unit (4px) for micro-adjustments, sm (12px) for compact component padding, md (24px) for standard section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The hero section uses full-width gradient backgrounds with centered content blocks (max-width: 640px) to focus attention on the value proposition. Cards and containers use rounded-lg (12px) for a modern, approachable feel that avoids sharp corners while maintaining visual clarity. Section rhythm alternates between full-width gradient backgrounds and white-background content blocks, creating visual breathing room and preventing c

Elevation & Depth

Depth is achieved through a restrained shadow system that reinforces hierarchy without visual heaviness. Level 1 (Base): flat surfaces with no shadow, used for primary content areas and the page background. Level 2 (Raised): cards and containers use elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)), creating subtle separation from the background while maintaining visual lightness. Level 3 (Elevated/Modals): modals, dropdowns, and floating elements use elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)), with a larger blur radius (24px) to convey distance and focus. Interactive elements (buttons, inputs)

Shapes

The shape philosophy is "Soft-Technical Minimalism"—rounded corners are used strategically to soften the precision of data-driven interfaces while maintaining visual clarity. Buttons use rounded-full (9999px) for a modern, pill-shaped appearance that feels approachable and clickable. Cards and containers use rounded-lg (12px), a moderate radius that balances friendliness with professionalism—sharp enough to feel structured, rounded enough to feel contemporary. Input fields and smaller UI elements use rounded-md (6px), a subtle radius that maintains visual hierarchy without drawing attention. T

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent height of 44px with padding 12px 24px. Primary buttons (button-primary) use background {colors.primary} (#4f46e5) with text {colors.on-primary} (#ffffff), rounded-full (9999px), and box-shadow 0 3px 8px rgba(79, 70, 229, 0.25). On hover, shift to #4338ca with shadow 0 4px 12px rgba(79, 70, 229, 0.35) and apply a 150ms cubic-bezier(0.4, 0, 0.2, 1) transition. On active/pressed, darken to #3730a3 and reduce shadow to 0 2px 4px rgba(79, 70, 229, 0.2). Secondary buttons (button-secondary) use transparent background with 1px solid {colors.outline} border, text {colors.primary}, and the same rounded-full radius. On hover, fill with {colors.surface-container-low} (#f1f5f9) and shift border to {colors.outline-va

Do's and Don'ts

**Do**

• Do use primary (#4f46e5) exclusively for call-to-action buttons and interactive focus states—it is the brand's signature accent and must remain visually distinct.
• Do maintain the 44px minimum button height and 12px 24px padding for all primary CTAs to ensure touch-friendly, accessible interaction targets.
• Do apply rounded-full (9999px) to all primary buttons and rounded-lg (12px) to all cards to reinforce the soft-technical aesthetic consistently.
• Do use the surface-container stack (surface-container-low, -high, -highest) for hover and active states rather than inventing new colors—this maintains system coherence.
• Do apply box-shadow transitions on hover (150ms cubic-bezier(0.4, 0, 0.2, 1)) to signal interactivity without jarring color shifts.
• Do preserve generous whitespace (minimum md/24px between sections) to emphasize clarity and prevent cognitive overload in data-heavy interfaces.

**Don't**

• Don't use secondary (#0ea5e9) or tertiary (#7c3aed) for primary CTAs—they are supporting accents and will dilute the brand's visual hierarchy.
• Don't apply shadows larger than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) on non-modal elements; excessive depth flattens the visual hierarchy.
• Don't use sharp corners (0px radius) on any interactive element—the brand aesthetic is soft-technical, not austere or cold.
• Don't hardcode colors inside component definitions; always use token references like {colors.primary} so the system remains maintainable and themeable.
• Don't reduce button height below 44px or padding below 12px 24px—accessibility and touch targets are non-negotiable.
• Don't mix rounded-full and rounded-lg on the same component type; consistency in shape language is critical to brand recognition.