Brand Guidelines | Asvika Wear

Color Palette

Our color palette represents elegance, modernity, and femininity. These colors work together to create a cohesive brand identity across all touchpoints.

Rose

#b77a91

Primary brand color - elegant and modern

Rose Dark

#91596e

Deep accent for emphasis

Blush

#efe2dc

Light background and soft accents

Leaf Green

#4f9f25

Success and positive action

Ink Black

#100c0d

Primary text and strong contrast

White

#ffffff

Clean backgrounds and clarity

Typography

We use Inter, a modern and highly readable sans-serif typeface. All headings are set in weight 800 (Extra Bold) for maximum impact, while body text uses weight 400 for optimal readability.

Display Headline

48px • Weight 800 • Line height 1.08

Used for hero sections and major page titles

Large Heading

36px • Weight 800 • Line height 1.12

Used for section headers and key content

Heading Style

26px • Weight 800 • Line height 1.15

Used for card headings and subsections

Body Text - Regular

16px • Weight 400 • Line height 1.6

Used for paragraph text and descriptions

Subtitle / Caption Text

14px • Weight 600 • Line height 1.5

Used for subtitles and emphasised captions

Small Label

12px • Weight 700 • Uppercase

Used for labels, tags, and metadata

Font Family

Inter

Inter is a versatile, open-source sans-serif typeface designed for on-screen reading. It has excellent metrics and spacing, making it perfect for digital interfaces and web design. All text on Asvika Wear uses Inter in one of the following weights:

400 Regular - Standard text content font-weight: 400

500 Medium - Subtle emphasis font-weight: 500

600 Semibold - Strong emphasis font-weight: 600

700 Bold - Highlights and buttons font-weight: 700

800 Extra Bold - Headlines font-weight: 800

Component Examples

These components represent the core UI elements used throughout Asvika Wear's digital experience. They maintain consistency in style, spacing, and interaction patterns.

Primary Button

Used for main calls-to-action

Secondary Button

Used for alternative actions

Brand Badge

Bestseller

Used for tags and labels

Design Principles

Clean & Modern: Minimalist design with maximum clarity
Accessible: High contrast ratios and readable typography
Responsive: Beautiful on all devices and screen sizes
Consistent: Unified visual language across all touchpoints
Feminine & Strong: Elegant colors reflecting our customer base

Admin Panel Design

The Asvika Wear admin panel extends the brand identity into a functional management interface. Every component uses the same color tokens, typography scale, and spacing system as the public site.

Admin Colors

--rose / #b77a91 Primary accent, buttons, links

--rose-dark / #91596e Hover states, deep accents

--green / #4f9f25 Success, delivered, active toggle

--red / #e74c3c Danger, delete, low stock

--amber / #f39c12 Warning, pending, outstanding

Role Badges

Owner Full access — admin, settings, delete

Manager All operations: sales, inventory, reports, accounting — no delete

Standard Day-to-day: sales, kanban, inventory, customers, bills, expenses, reviews, bundles

Admin UI Components

Save

Primary buttons — rose background

Cancel

Ghost buttons — border only

Delete

Danger buttons — red accent

🆕 New ✅ Done

Status pills — click to advance

🔍

Search inputs — debounced, no button

Charts — sales trends, peak hours

Admin-specific CSS custom properties

--rose: #b77a91;       /* primary accent */
--rose-dark: #91596e;   /* hover state */
--green: #4f9f25;        /* success */
--red: #e74c3c;          /* danger */
--amber: #f39c12;        /* warning */
--ink: #100c0d;           /* text */
--line: #e0d6d4;          /* borders */
--soft: #f5f0ee;          /* subtle backgrounds */
--white: #ffffff;
--muted: #6b5f63;         /* secondary text */
--bg: #faf8f7;            /* admin body bg */