Design System

Design System Reference

This page documents the building blocks of the Parul Plast website — colors, typography, buttons, icons, cards, shadows, border radius, spacing, focus states, motion, and form controls. It is a development-only reference page and is excluded from search indexing.

Colors

Brand Palette

Primary steel blue for trust and credibility, orange accent for actions and highlights. White backgrounds, light grey sections, dark text.

Brand (steel blue)

brand-50

#f0f5fa

brand-100

#dce8f3

brand-200

#bdd3e7

brand-300

#92b5d6

brand-400

#6190be

brand-500

#3f72a5

brand-600

#2d5b8e

brand-700

#244a74

brand-800

#203e61

brand-900

#1c3351

brand-950

#111f35

Accent (orange)

accent-100

#ffedd5

accent-300

#fdba74

accent-400

#fb923c

accent-500

#f97316

accent-600

#ea580c

accent-700

#c2410c

Typography

Inter — Professional Sans-Serif

Large headings with tight tracking, comfortable body spacing. Self-hosted variable font — no external font request.

Display / Hero · 48–56px · Font-bold · Tracking-tight

Precision Foam Components

Heading 2 · 30–36px · Font-bold

Manufacturing Capabilities

Heading 3 · 20–24px · Font-semibold

Die Cutting & Lamination

Body · 16–18px · Leading-relaxed

We manufacture automotive and industrial foam, EPDM rubber components, and protective packaging solutions — engineered to your drawing, delivered with ISO 9001:2015 quality and consistent on-time supply.

Eyebrow · 12px · Tracking 0.18em · Uppercase

ISO 9001:2015 Certified

Buttons

Action System

Primary for the main conversion, accent for secondary high-visibility actions, outline and ghost for quiet navigation.

Request Quote Request Quote Request Quote Request Quote Download Catalogue Learn More White (on dark)

Primary = bg-brand-800 → hover bg-brand-900 · Accent = bg-accent-600 → hover bg-accent-700

Images & Cards

Placeholder Image System

Every image slot uses a descriptive placeholder (factory-exterior.webp, die-cutting-machine.webp…) that drops out when the real photograph arrives — no layout changes needed.

Factory Exterior

16:9 — replace with real facility photo.

Die Cutting Machine

1:1 — replace with machine photo.

Quality Inspection

4:3 — replace with QC photo.

Forms

Form Controls

Base styles for the RFQ and contact forms. Labels, inputs, selects, textareas, and helper text share one consistent system.

Icons

Lucide Icon System

One icon family, one stroke language, four sizes. Icons inherit their color from surrounding text — no hardcoded fills.

Size Scale

Small

14–16px — inline with text, buttons, meta rows

Medium

18–20px — cards, chips, section bullets

Large

22–24px — feature and statistic icons

Display

40px — hero and spotlight icons

Color Rules

brand-600 — informational, on light accent-400 — highlights, on dark currentColor — inside filled buttons

Guidelines

Single family — Lucide via lucide-astro. No mixed icon sets or brand kits.
Stroke weight 2 by default; 2.5 for small CTA arrows so they stay crisp at 14–16px.
Align with text using inline-flex items-center gap-2.
Icons inherit currentColor — never hardcode fill or stroke colors.
Decorative icons are hidden from screen readers (Lucide default). Icon-only controls must add an aria-label.

Shadows

Elevation System

One family of soft, cool-tinted shadows. Cards rest at shadow-card, interactive cards lift one step on hover — nothing goes deeper.

shadow-sm

Tailwind default

Sticky header elevation on scroll. The quietest lift — for elements that sit slightly above the page without calling attention.

shadow-card

0 1px 2px rgb(16 24 40 / 0.04), 0 4px 12px rgb(16 24 40 / 0.06)

The standard card elevation — 45 uses across every section. Cards, panels, tables, image frames.

shadow-card-hover

0 2px 4px rgb(16 24 40 / 0.06), 0 12px 24px rgb(16 24 40 / 0.1)

Interactive cards lift to this level on hover (with -translate-y-1). Also used statically on the WhatsApp button and highlighted panels.

No shadow-lg or shadow-md anywhere — beyond the card family the site stays flat and relies on borders.

Border Radius

Corner Scale

Tight radii for controls, generous radii for content blocks — a consistent 6 → 16px ladder, plus full-round pills for badges and markers.

rounded-md · 6px

Small labels and chips — 6 uses

rounded-lg · 8px

Buttons and form inputs — 22 uses

rounded-xl · 12px

Cards, chips, icon tiles, swatches — 16 uses

rounded-2xl · 16px

Feature cards, large containers, image frames — 40 uses

rounded-full

Pills, badges, timeline markers, WhatsApp FAB — 21 uses

Spacing

Layout Rhythm

A small set of spacing steps repeated across the site. Sections, gaps and gutters stay in the same family on every page.

Section Spacing

Vertical padding of every <section> — bar height is proportional to the step.

py-10 → lg:py-14

tight CTA strips · 2

py-12 → lg:py-16

compact sections · 4

py-14 → lg:py-20

standard sections · 21

py-16 → lg:py-24

hero, intro, dark bands · 15

Gap Spacing

Grid and flex gaps — 4 and 6 for tight clusters, 8 for section grids, 10 for large layouts.

gap-4

gap-6

gap-8

gap-10

Container & Grid

Content is centered at 80rem with responsive gutters. Grids step from 1 to 2 to 3–4 columns as the viewport grows.

Content area — max-w-7xl (80rem), centered

container-site · mx-auto max-w-7xl px-4 sm:px-6 lg:px-8

1 column — mobile

2 columns — sm

3–4 columns — lg

gaps gap-5 · gap-6 · gap-8

Focus & Accessibility

Keyboard Focus States

Every interactive element shows a visible keyboard focus ring. Rings appear only for keyboard navigation — mouse clicks stay clean.

In Action — Tab Through

Use the Tab key to see each state live.

Button

Form input

Text link

Focusable link

Implementation

Global — all links and elements

{:focus-visible} { outline: 2px solid var(--color-brand-600); outline-offset: 2px; }

2px solid brand-600 (#2d5b8e) — 5.7:1 contrast on white · 2px offset keeps the ring clear of the element

Buttons

focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-600

Form inputs

focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20

Outlines are never removed — visible focus is a requirement, not a style.
:focus-visible keeps mouse clicks ring-free while keyboard users always see the ring.
Layout ships a skip-to-content link and fully keyboard-operable navigation and forms.

Motion & Animation

Subtle, Short, Consistent

The site moves little on purpose. Transitions run 200–500ms on color, shadow and transform only — the logo marquee is the single continuous animation.

Patterns

Pattern	Duration	Where
`transition-colors duration-200`	200ms · ease	Buttons, links, CTAs
`transition-all duration-300`	300ms · ease	Card lift — translate-y, border, shadow
`transition-transform duration-300`	300ms · ease	CTA arrow nudge
`transition-transform duration-500`	500ms · ease	Image zoom on card hover
`animate-marquee`	40s · linear · infinite	Client logo strip

Try It

Hover the card, the icon tile and the link below.

Card Lift

-translate-y-1 · shadow-card → shadow-card-hover · 300ms ease

Explore

Color, shadow and transform transitions only — nothing animates layout size.
The marquee disables itself under prefers-reduced-motion and wraps instead of scrolling.
No scroll-triggered, staggered or infinite animations.