Electronics components storefront · v1
Brand foundations for logo design
Everything a designer needs to build a logo that sits naturally inside the product: the exact palette, the type, and the shape & elevation language. This page is rendered in the system it documents — the mark, colors, radii, and shadows you see are the real tokens.
The store sells electronics components and modules — the working headline is “Circuits & modules for your next build.” It serves builders and makers in Bangladesh, prices in Taka (৳), and pays cash on delivery, nationwide. The brand name is not yet finalized (currently “Store”).
The rounded-square chip glyph in the header is a starting sketch built from these tokens — a reference point, not the final answer.
Blue primary on cool, near-neutral surfaces. Neutrals carry a faint cool bias rather than pure grey. Values are authored in OKLCH (source of truth); hex is an approximation for tools that need it. Each swatch shows the light and dark value side by side.
Primary
Brand blue. Buttons, links, focus, active state.
Accent
Tinted blue surface / hover wash. Deep blue in dark.
Background
Page ground. Cool off-white / near-black.
Card / Surface
Raised surfaces: cards, sheets, menus.
Foreground
Primary text / ink.
Muted foreground
Secondary text, captions, placeholders.
Secondary / Muted
Quiet fills: chips, hovered rows, inputs.
Border / Input
Hairline dividers and control outlines.
Success
Free shipping, in-stock, confirmations.
Warning
Low stock, pending, caution.
Destructive
Errors, delete, remove from cart.
Info
Neutral notices — reuses the brand blue.
One family, Inter, does display and text — loaded via next/font. Tight negative tracking on large sizes; generous line-height in body. Digits use tabular figures wherever prices align.
Inter
| Role | Size | Weight | Tracking | Specimen |
|---|---|---|---|---|
| Display | 40–46px | 700 | -0.03em | Your next build |
| H1 / Page | 24px | 600 | -0.02em | All Products |
| H2 / Section | 20px | 600 | -0.02em | New arrivals |
| Body | 15–16px | 400 | 0 | Pay cash on delivery, nationwide. |
| Label | 13–14px | 500 | 0 | Add to cart |
| Caption / Meta | 12px | 500 | 0.02em | 48 products |
| Price | 14px | 600 | tabular | ৳3,500.00 |
Tight, calc-based scale off a 0.375rem (6px) base. Deliberately restrained — corners are softened just enough to feel finished, never rounded enough to feel playful. This is the single most important cue for the logo's corner treatment.
Shadows are subtle and tight — a soft 10%-black wash, not a dramatic drop. Depth comes from layering surfaces, not heavy shadow.
Copy-ready CSS custom properties (light theme). Full source: src/app/(frontend)/globals.css.
/* Brand */ --primary: oklch(0.6231 0.188 259.8145); /* ≈ #3B82F6 */ --accent: oklch(0.9514 0.025 236.8242); /* ≈ #E7F0FD */ --ring: oklch(0.6231 0.188 259.8145); /* Neutrals */ --background: oklch(0.9846 0.0017 247.8389); /* ≈ #FAFAFB */ --card: oklch(1 0 0); /* #FFFFFF */ --foreground: oklch(0.3211 0 0); /* ≈ #303030 */ --muted-foreground:oklch(0.551 0.0234 264.3637); /* ≈ #6B7280 */ --border: oklch(0.9276 0.0058 264.5313); /* ≈ #E5E7EB */ /* Shape & elevation */ --radius: 0.375rem; /* 6px base */ --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / .1), 0 1px 2px -1px hsl(0 0% 0% / .1); /* Type */ --font-sans: "Inter", system-ui, sans-serif;