Back to home

SWIL-Designed System

Brand Guidelines

Logo usage, colour palettes, typography, and spacing standards for SWIL Software and product brands — for partners, media, and internal teams.

Figma design systemRequest brand assets

SWIL-Designed System

Brand colours

Product primaries with hover and light companions, plus shared neutrals and status tokens from the Figma design system. Use CSS variables in code where noted.

Product palettes

Each SWIL product has a dedicated primary, hover, and light variant.

SWIL Unify

  • Primary#196FE0
  • Hover#155DC1
  • Light#E6F0FD

SwilERP

  • Primary#196FE0
  • Hover#155DC1
  • Light#E6F0FD

Mart (B2B)

  • Primary#D32F2F
  • Hover#B71C1C
  • Light#FEF8F8

POS

  • Primary#EB1E63
  • Hover#C2185B
  • Light#FEF6F9

SwilAdmin

  • Primary#287E98
  • Hover#1E6B83
  • Light#F0FDFF

SwilBA

  • Primary#5B4A4E
  • Hover#4D3F42
  • Light#F7F6F6

Sort

  • Primary#008080
  • Hover#006666
  • Light#F0FFFE

Backgrounds

Background Primary

#FFFFFF

Page background

Background Secondary

#F9FAFB

Cards, panels

Background Tertiary

#F3F4F6

Inputs, disabled

Background Dark

#152A42

Header, footer, dark sections

Background Dark Elevated

#1C3552

Dark blocks, nav dropdowns

Section Alt

#F8FAFC

Alternate sections

Text colours

Text Primary

#0B1D36

Headings, body

Text Secondary

#4B5563

Subheadings

Text Tertiary

#6B7280

Secondary content

Text Muted

#9CA3AF

Captions, hints

Text on Dark

#F8FAFC

Text on dark backgrounds

Text on Dark Muted

#94A3B8

Muted text on dark

Border colours

Border Primary

#E5E7EB

Borders, dividers

Border Secondary

#D1D5DB

Stronger borders

Border Light

#F3F4F6

Subtle borders

Status colours

Success

#10B981

Success states, confirmations

Success Light

#D1FAE5

Success backgrounds

Warning

#F59E0B

Warnings, alerts

Warning Light

#FEF3C7

Warning backgrounds

Error

#EF4444

Errors, destructive

Error Light

#FEE2E2

Error backgrounds

Info

#3B82F6

Info, links

Info Light

#DBEAFE

Info backgrounds

Typography

Type scale

Inter is the single type family for SWIL products. Use the scale below for headings, body copy, controls, and utility text.

Font family

Inter

Use Inter consistently across the application. Avoid mixing different font families.

"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Type scale

Responsive sizes mirror production UI — mobile and desktop values are noted where they differ.

  • H1

    Size18px (mobile) / 20px (desktop)Weight600Leading1.2

    Design system documentation

    Page titles, main headings, hero text

  • H2

    Size16px (mobile) / 18px (desktop)Weight500Leading1.2

    Typography guidelines

    Section headings, card titles

  • Body

    Size14pxWeight400Leading1.5

    This is the standard body text used throughout the application for readable content and descriptions.

    Paragraphs, descriptions, general content

  • Small

    Size12pxWeight500Leading1.4

    Helper text or caption

    Labels, captions, metadata, helper text

  • Button

    Size14pxWeight500Leading1.2

    Click here

    Button labels, CTAs

  • Subtle

    Size12pxWeight400Leading1.4

    Last updated 2 hours ago

    Timestamps, secondary info, placeholders

  • Error

    Size12pxWeight500Leading1.4

    This field is required

    Error messages, validation feedback

Logo usage

Logo guidelines

Use approved SWIL marks from the branding CDN. Keep proportions, clear space, and background contrast consistent across web, print, and partner materials.

Approved marks

Download production-ready SVGs from the brand team or use the paths referenced in code (`@/lib/brand-logos`).

  • Horizontal lockup

    Primary wordmark for headers, decks, and partner pages.

  • Icon mark

    Compact globe + SW mark for favicons, avatars, and tight UI.

  • Square mark

    Balanced lockup for app icons, social avatars, and square frames.

Request logo files

Approved backgrounds

White, light neutral, and brand primary are safe defaults for the full-colour lockup.

  • White

    #FFFFFF

  • Light neutral

    #F8FAFC

  • Brand primary

    #196FE0

Clear space

Leave a buffer around the logo at least equal to the cap height of the "S" in SWIL — no text, icons, or edges inside that zone.

Usage rules

Quick reference for partners and internal teams preparing co-branded or marketing assets.

Do

  • Use the official SWIL logo from approved assets only
  • Maintain clear space around the logo—minimum equal to the height of the "S" in SWIL
  • Use the logo on approved backgrounds (white, light gray, brand primary)
  • Contact our brand team for media and partner asset requests

Don't

  • Do not alter colors, proportions, or add effects to the logo
  • Do not stretch, skew, or rotate the logo
  • Do not place the logo on busy backgrounds or low-contrast surfaces
  • Do not create custom logos or wordmarks without approval

Layout

Spacing & radius

Spacing and corner radii follow a 4px grid so components align across SWIL products, forms, and marketing layouts.

4px base unit

All spacing tokens are multiples of 4px (4, 8, 12 … 40). Use the scale instead of arbitrary pixel values.

Spacing scale

From tight inline gaps to section padding — pair token names with rem/px utilities in your design tooling.

  • xs

    Size4px

    Tight spacing

  • sm

    Size8px

    Inline gaps

  • md

    Size12px

    Form padding

  • lg

    Size16px

    Card padding

  • xl

    Size20px

    Section gaps

  • 2xl

    Size24px

    Block spacing

  • 3xl

    Size32px

    Large sections

  • 4xl

    Size40px

    Hero padding

Border radius

Corner radii for inputs, buttons, cards, and pills. Use `full` for circular avatars and capsule CTAs.

  • sm

    Radius4px

    Inputs, badges

  • md

    Radius6px

    Buttons

  • lg

    Radius8px

    Cards

  • xl

    Radius12px

    Panels

  • 2xl

    Radius16px

    Modals

  • full

    Radiusfull

    Pills, avatars

Assets

Need brand assets?

Partners, media, and internal teams can request production-ready files. Include your use case and deadline so we can route your request quickly.

What you can request

Typical deliverables from the SWIL brand team — all subject to approval for external use.

  • Logo files

    Corporate horizontal lockup, icon mark, and square variants (SVG).

  • Product brand marks

    SwilERP, SwilMart, Unisolve, and other product wordmarks with light/dark themes.

  • Co-brand & partner kits

    Templates for decks, events, and co-marketed campaigns.

  • Product imagery

    Approved screenshots and hero visuals for press or partner pages.

Brand team

Email us with the asset type, intended channel, and delivery date.

brand@swindia.comEmail brand team

We usually respond within two business days.

Self-serve resources