Sakeenah Design System

Shared design tokens, brand assets, fonts, and component layout guidelines for the Sakeenah digital wedding invitation platform.

---

🎨 Brand Guidelines

Brand Identity

• Primary Accent: rose-500 (#f43f5e) — representing warmth, romance, and celebration.
• Success: emerald-500 (#10b981) — used for confirmations, successful states, and completion prompts.
• Neutrals: stone palette (warm stone tones) — used for typography, borders, and structured UI components.

Background Hierarchy

• App/Dashboard: #fdfbf7 (warm cream) — creates a welcoming workspace.
• Invitation Canvas: #ffffff (pure white) — acts as a clean, blank canvas for invitation layouts.
• Card Elements: #ffffff (white).
• Muted Surfaces: #f5f5f4 (stone-100).

Typography

• Sans-Serif (UI/Copy): Outfit — modern, friendly, geometric, highly legible at small sizes.
• Serif (Brand/Headings): Instrument Serif — elegant, classical, and romantic.

---

📐 Design Tokens

All design tokens are mapped to raw hex CSS variables (aligned with Tailwind CSS v4 and shadcn v4).

1. Spacing & Padding

We use a 4px grid (0.25rem) for all layouts:

• var(--space-2) (8px): Tight element spacing (labels to inputs).
• var(--space-4) (16px): Standard gap/margin for components.
• var(--space-6) (24px): Default inner padding for mobile cards and panels.
• var(--space-8) (32px): Expanded padding for desktop layouts (p-6 md:p-8).

2. Corner Radii (Border Radius)

Rounded corners give Sakeenah a friendly, organic, and modern character:

• var(--radius-sm) (6px): Small badges and form helper states.
• var(--radius-md) (8px): Buttons, inputs, alert callouts.
• var(--radius-lg) (12px): Brand mark boxes, navigation indicators.
• var(--radius-xl) (16px): Dropdown menus, small modal sheets.
• var(--radius-2xl) (20px): Navigation panels, secondary buttons.
• var(--radius-3xl) (24px): Primary cards, main dashboard tables, dialog modals.
• var(--radius-full) (9999px): Pill buttons, tags, avatars, progress tracks.

3. Shadows

Elevations structure the visual hierarchy over the cream background:

• var(--shadow-sm): Subtle button elevations.
• var(--shadow-card): 0 2px 12px -4px rgba(28,25,23,0.08) — default container elevation.
• var(--shadow-lg): Hover states for cards, wizard progress bars.
• var(--shadow-xl): Modals and dropdown popovers.
• var(--shadow-rose): Interactive active indicators (e.g. brand marks).

---

💻 Technical Usage

Stylesheet Integration

Import tailwindcss and reference the tokens file in your CSS stylesheet:

@import "tailwindcss";
@import "./tokens/theme.css";

Reference Files

• tokens/theme.css — Global CSS variables for raw styling.
• tokens/colors.json — Color palette reference (brand, semantic, background, foreground, borders, surfaces).
• tokens/typography.json — Font declarations, weight scales, spacing, radii, and shadows mapping.
• tokens/components.json — Pre-designed layout specs for Cards, Tables, Buttons, Badges, Dropdowns, and Wizard components.

Fonts Setup

Copy the following snippet into your HTML <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

---

📁 Assets Directory

• assets/favicon.svg — 652B white heart on rose-500 rounded square.
• assets/logo.png — 512x512 PNG representation of the brand emblem.