EasySQL Brand Kit
Logos, typography, color palettes, and official digital assets for EasySQL. Built with precision for interfaces, documentation, and partner integrations.
Official Palette
Click any color card to copy the HEX code to your clipboard.
:root {
--easysql-orange: #F97316;
--easysql-pink: #F472B6;
--easysql-gradient: linear-gradient(135deg, #F97316 0%, #F472B6 100%);
--easysql-bg-dark: #0F2B3D;
--easysql-bg-deep: #0B1E2B;
--easysql-text-dark: #F1F5F9;
--easysql-text-light: #0F172A;
}Border Radius System
Derived from the official 72×72 px monogram tile (rx=16px), establishing the ~22.2% squircle ratio for brand containers and a cohesive UI scale for applications.
SQL data types (VARCHAR, INT, FK), compact tooltips, tree view badges, sub-nodes.
Form inputs, select dropdowns, secondary action buttons, context menus, list selectors.
Primary buttons (CTAs), query editors, SQL code blocks, filter dialogs, inner card surfaces.
Main dashboard cards, modals, side-drawers. Directly mirrors the 16px curvature of the official monogram.
Hero feature panels, marketing callouts, elevated onboarding containers.
Status indicators (Connected, Synced), category tags, floating action chips, circular buttons.
:root {
--radius-xs: 4px; /* SQL type badges, tree nodes */
--radius-sm: 8px; /* Form inputs, select dropdowns, secondary buttons */
--radius-md: 12px; /* Primary CTAs, query editors, code blocks */
--radius-lg: 16px; /* Dashboard cards, modals (brand signature) */
--radius-xl: 24px; /* Hero feature panels, callouts */
--radius-full: 9999px; /* Status pills, chips */
--tile-ratio: 0.222; /* Squircle: rx = size * 0.222 */
}Official Logos
Available as outlined SVG and high-resolution PNG (1×, 2×, 3×). The wordmark pairs Space Grotesk ("Easy") with Geist ("SQL"); monochrome variants cover one-color reproduction.
Icons & Monogram
Multi-resolution ICO packages and standalone SVG icons for favicons, mobile apps, and social avatars. 16 px and 24 px use a dedicated small-size cut; 32 px and up use the standard icon.
Drop-in Web & App Assets
Pre-packaged conventional assets ready for direct deployment in HTML, PWAs, Android, and macOS.
<!-- EasySQL Favicons & Web Manifest -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Interactive Asset Tester
Test logo variations across custom background colors and inspect safe zones.
Brand Usage Guidelines
Preserve brand integrity by maintaining exact colors, padding, and proportions.
Do’s
- ✓ Use dark variations (01, 03, 05, 07) on dark blue, petroleum, and black backgrounds.
- ✓ Use light variations (02, 04, 06, 08) on light gray, white, and paper backgrounds.
- ✓ Keep "Easy" in Space Grotesk and "SQL" in Geist; "SQL" stays #F97316.
- ✓ Use the monochrome lockups for one-color, small, or light-background reproduction.
- ✓ Use the 16/24 px small icon cut below 32 px.
- ✓ Maintain minimum clear space equal to the height of the wordmark letters around the logo.
- ✓ Always spell the product name as EasySQL (CamelCase, no spaces).
Don’ts
- ✗ Do not stretch, skew, or distort the logo aspect ratio.
- ✗ Do not alter the orange-to-pink gradient (#F97316 → #F472B6).
- ✗ Do not add drop shadows, outer glows, or bevels to the monogram.
- ✗ Do not separate "Easy" and "SQL" with a dot, slash, or space.
- ✗ Do not invert the "Easy"/"SQL" colors or use the orange SQL at small sizes on white.
- ✗ Do not use the standard icon at 16/24 px.
- ✗ Do not render "Easy SQL" with a space or all-lowercase.