SGSS Members

Brand Colors

Full color palette based on SGSS logo. Rich navy primary, warm gold accent, Stone neutrals.

Navy (Primary)
50
100
200
300
400
500
600
700
Base
#162548
Dark
900
Gold (Accent)
50
100
200
300
Light
Base
#D4952C
Dark
700
800
900
Stone (Warm Neutrals)
50
100
200
300
400
500
600
700
800
900
Status
Success
#047857
Success BG
Warning
#D97706
Warning BG
Error
#DC2626
Error BG

Logos

Brand logos in different formats for various use cases.

Favicon
Favicon
/favicon.ico
Icon Logo
Icon
/logo-icon.webp
Tall Logo
Tall
/logo-tall.webp
Wide Logo
Wide
/logo-wide.webp

Typography

Plus Jakarta Sans for headings, Inter for body text. Uses clamp() for fluid responsive sizing.

Display Heading
.text-display — clamp(2rem, 5vw, 3.5rem)

Page Title Heading

h1 — clamp(1.75rem, 4vw, 2.5rem)

Section Heading

h2 — clamp(1.25rem, 3vw, 1.75rem)

Subsection Heading

h3 — clamp(1.125rem, 2.5vw, 1.375rem)

Minor Heading

h4 — clamp(1rem, 2vw, 1.125rem)

Body text at 16px minimum for accessibility. The quick brown fox jumps over the lazy dog. This sentence demonstrates how body text flows across multiple lines, ensuring readability for all users including those with visual impairments. Proper line-height (1.5) and adequate contrast are essential for comfortable reading.

body — 16px / 1.5 line-height

Large body text for introductions or callouts. Sri Guru Singh Sabha Gurdwara welcomes all members to join our community and participate in seva.

.text-large — clamp(1.125rem, 2vw, 1.25rem)
.label — 14px / 600 weight
Hint text provides additional context and guidance for form fields or UI elements.
.hint — 14px / muted color
Error message indicating validation failure or system error.
.error — 14px / error color

Lists

Ordered and unordered lists with consistent styling. Uses CSS counters for numbered lists.

Unordered List
  • First item in the list
  • Second item with more content
  • Third item to show the pattern
Ordered List
  1. First step in the process
  2. Second step with details
  3. Third step to complete
Declaration List (styled)
  1. I have full and firm faith in the ten Gurus.
  2. I undertake to abide by the Constitution.
  3. The information given above is true and correct.

Spacing Scale

4px base unit system for consistent rhythm. Use CSS variables for all spacing.

--space-1
4px
Hairline, icon gaps
--space-2
8px
Tight, inline elements
--space-3
12px
Compact, form gaps
--space-4
16px
Default, standard padding
--space-5
20px
Comfortable, card padding
--space-6
24px
Relaxed, section padding
--space-8
32px
Spacious, between sections
--space-10
40px
Major section breaks
--space-12
48px
Page sections
--space-16
64px
Hero spacing

Buttons

Button variants ordered by emphasis. Combine with size and icon modifiers.

Variants (high → low emphasis)
Sizes
With Icons (.btn-icon)
Disabled

Form Elements

High contrast inputs with 2px borders. 16px font prevents iOS zoom.

Upload images, documents, etc.

Cards

Card containers for content grouping.

Basic card with .card class

PageCard Component

Content inside PageCard with title and action slot

Pills / Tags

Selectable pill buttons for filtering. Horizontally scrollable on mobile.

Tabs

Tab navigation for switching content.

Tab content goes here

Grid Layouts

Responsive grid utilities for columns.

.row-2 (2 columns)
Column 1
Column 2
.row-3 (3 columns)
Col 1
Col 2
Col 3
.row-4 (4 columns)
1
2
3
4

Status Badges

Colored badges for member status.

PENDINGACTIVEINACTIVEDECEASED

Member Header

Persistent header showing member identity across all tabs.

HS
Mr Harpreet Singh
✉️harpreet@example.com
07700 900123

List Items

Clickable list items with hover state.

Interest Items

Checkbox items with active state styling.

Radio Groups

Radio button selection pattern.