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.
Loaders & Spinners
Animated, self-contained SVGs for transient loading states. Five concepts with dark and light variants, the official gradient, a static poster for every animated file under prefers-reduced-motion, plus GIF and WebP exports.
Motion: Orbit 1.2 s linear · E-assemble 1.8 s ease-in-out · Query bar 1.4 s · Dots 1.2 s with 120 ms stagger. Keep one loader per view, pair it with a text status, and keep the E upright.
Formats: the SVG is the resolution-independent source; WebP is the default for loaders (image semantics, native loop, alpha). GIF is a 256-color, 1-bit-alpha fallback. Pause or swap the animation when prefers-reduced-motion is set.
Reduced motion: the animated files carry the media query, but browsers do not consistently apply it inside an SVG loaded as <img>. Swap in the static poster with <picture>:
<picture>
<source media="(prefers-reduced-motion: reduce)" srcset="./loaders/static/01-orbit-static.svg">
<img src="./loaders/01-orbit.svg" width="48" height="48" alt="">
</picture>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.