Dashboard & Web App Template

Overview

Falcon is a dense, data-first admin template for SaaS dashboards, CRM, analytics, LMS and support desks. Its aesthetic movement is Soft Corporate Flat: a pale blue-grey canvas (#edf2f9), white elevated cards with 6px corners and a single saturated accent, Falcon Blue (#2c7be5), that carries every call to action. The emotional response is calm competence; the interface reads as a trustworthy control panel rather than a marketing page.

The voice is plain, operational and short. Labels are one or two words ("Weekly Sales", "Show all projects", "Working Time"), metrics are led by large numerals ("$47K", "58.4K") and deltas are shown as tiny pills. Example sentence: "Weekly sales up 3.5% — 4 projects need attention."

Colors

Primary (#2c7be5) is the Falcon Blue used for primary CTA pills, active navigation links ("Default" in the sidebar), chart strokes and the brand wordmark. Secondary (#748194) is a muted slate for helper text and inactive icons. Tertiary (#00d27a) signals positive deltas and "New" badges on a #d9f8eb tint.

The surface stack is cool and layered: the page sits on #edf2f9 (surface-container), cards sit on #ffffff (surface-container-lowest), and table headers or hover rows step to #f9fafd. Body text is #5e6e82 on the canvas and #344050 for headings and emphasized values. Never use pure black; the darkest neutral in use is #0b1727 for the dark sidebar variant.

Typography

The type system pairs Poppins for display, headings and labels with Open Sans for body copy. Poppins at weight 500 gives metric numerals and card titles a geometric, friendly voice, while Open Sans 400 at 16px/24px keeps paragraphs legible in dense tables. Use weight 500 for emphasis and avoid weights above 600 outside the 36px display metric. Labels on pills use 12px Poppins 500 with 18px line height; apply letter-spacing 0.02em only on uppercase sidebar section labels such as "CUSTOMIZE".

Layout

The grid is fluid up to a 1480px container-max with a 12-column system and a 24px gutter. Dashboard cards are laid out in 2-column rows (for example Weekly Sales beside Total Order) with lg (20px) internal padding and 24px between cards. The white-space philosophy favors tight vertical rhythm inside cards and generous separation between rows: use md (16px) between list rows and xl (48px) between major dashboard sections.

Elevation & Depth

Depth is conveyed by subtle shadows rather than blur. Resting cards use 0 0.125rem 0.25rem rgba(0,0,0,0.075); raised dropdowns and hover states use 0 7px 14px 0 rgba(65,69,88,0.1), 0 3px 6px 0 rgba(0,0,0,0.07); modals use 0 1rem 4rem rgba(0,0,0,0.175). Cards are otherwise separated by the 1px light border of the canvas colour rather than heavy outlines.

Shapes

Shape philosophy: Soft-Technical. Cards and modals use 6px (md), input fields use 4px (sm), and primary CTAs and status badges use fully rounded 9999px pills. The 16px radius (lg) is reserved for large spot panels and the customizer drawer. The 50% radius is used only for avatars and the circular market-share donut.

Components

Action Elements The primary CTA is a 24px-high blue pill with 3px 12px padding and 12px Poppins 500 text. Hover swaps the background to primary-fixed-dim (#abcaf5) over a 150ms ease transition. Secondary actions such as "Table view" are white ghost controls on the canvas with a 1px #d8e2ef border.

Containers & Surfaces Cards are #ffffff on the #edf2f9 canvas with a 6px radius and 20px padding. Card hover lifts the surface to #f9fafd and applies the md shadow over 200ms. Running-projects rows divide with a 1px #edf2f9 hairline and step to surface-container on hover.

Inputs & Interaction Search and select fields use a 1px #d8e2ef border, 4px radius and 5px 16px padding. On focus the border shifts to primary (#2c7be5) with a 0 0 0 0.2rem rgba(44,123,229,0.25) focus ring. Badges

Do's and Don'ts

**Do**

• Use Falcon Blue (#2c7be5) only for interactive or active elements so the accent keeps its signal value.
• Keep cards on #ffffff with a 6px radius and 20px internal padding for consistent dashboard density.
• Pair big Poppins 500 metrics with small colored delta pills to communicate change at a glance.
• Use the cool slate neutrals (#5e6e82, #344050) rather than pure grey or black for text.

**Don't**

• Don't introduce new accent hues beyond the Falcon palette for charts; reuse blue, green, red and orange.
• Don't use radii above 16px on data cards; large rounding breaks the dense admin rhythm.
• Don't stack heavy shadows; resting cards should rely on the 0.075 alpha shadow alone.
• Don't set body copy in Poppins; reserve it for headings, labels and metrics.