# CeylonNikah design system

> CeylonNikah design system measured from ceylonnikah.lk: Bricolage Grotesque font, #83A79D primary, 20 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/ceylonnikah.lk/

CeylonNikah’s website (ceylonnikah.lk) uses the Bricolage Grotesque font and #83A79D as its main color on a white background. Measured by Sitepeel on November 7, 2026.

## What font does CeylonNikah use?

CeylonNikah uses Bricolage Grotesque (weights 700 and 900) and Plus Jakarta Sans (weights 400, 600 and 700) on ceylonnikah.lk. Page titles are 48px at weight 900 (30px on phones) and body text is 14px. Measured on November 7, 2026.

- Bricolage Grotesque (weights 700, 900)
- Plus Jakarta Sans (weights 400, 600, 700)
- ui-monospace (weights 700)

## CeylonNikah colors: palette and hex codes

CeylonNikah’s main colors are #FFFFFF (white) for the background, #1E293B (deep blue) for text and #83A79D (teal) as the main accent, with #6EE7B7 (teal) and #5EEAD4 (teal) as other accents. Measured on November 7, 2026.

- #FFFFFF: white
- #1E293B: deep blue
- #0F172A: deep blue
- #334155: dark blue
- #475569: dark blue
- #F0FDFA: snow
- #F8FAFC: snow
- #A7F3D0: light teal

## What is CeylonNikah built with?

CeylonNikah’s website (ceylonnikah.lk) is built with Next.js, React, Radix UI, Tailwind CSS and Cloudflare. Measured on November 7, 2026.

- Hosting & CDN: Cloudflare
- JavaScript framework: Next.js 15.4.11, React 19.2.0-canary-97cdd5d3-2
- UI & CSS: Radix UI, Tailwind CSS 3.x
- Fonts & icons: Google Fonts, Lucide

## Questions and answers

### What font does CeylonNikah use?

CeylonNikah’s website uses Bricolage Grotesque (weights 700 and 900) and Plus Jakarta Sans (weights 400, 600 and 700). Page titles are 48px at weight 900 (30px on phones) and body text is 14px. Measured on November 7, 2026.

### What are the CeylonNikah colors and hex codes?

On ceylonnikah.lk: #FFFFFF (white) for the background, #1E293B (deep blue) for text and #83A79D (teal) as the main accent, with #6EE7B7 (teal) and #5EEAD4 (teal) as other accents. The color palette above lists all 20 colors with their hex codes and where each one is used.

### What is the CeylonNikah design system?

The design system on this page is ceylonnikah.lk’s, as measured on November 7, 2026: Bricolage Grotesque type, #83A79D as the main color and 12px corners, written down as a DESIGN.md. It is not CeylonNikah’s own documentation.

### What is CeylonNikah built with?

CeylonNikah’s website (ceylonnikah.lk) is built with Next.js, React, Radix UI, Tailwind CSS and Cloudflare. The full tech stack Sitepeel found: Cloudflare, Next.js, React, Radix UI, Tailwind CSS, Google Fonts and Lucide. Measured on November 7, 2026.

### What is the CeylonNikah DESIGN.md?

A plain-text file with CeylonNikah’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this CeylonNikah’s official design system?

No. Sitepeel measured it from ceylonnikah.lk’s public page on November 7, 2026. It is an independent analysis, not made or approved by CeylonNikah.

### Can I use CeylonNikah’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy CeylonNikah’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/ceylonnikah.lk/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with CeylonNikah.

## The DESIGN.md file

```markdown
---
version: alpha
name: CeylonNikah
description: "Light interface measured from ceylonnikah.lk: Bricolage Grotesque type with Plus Jakarta Sans, teal accents, tonal surfaces and pill-shaped controls."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#1E293B"
  on-background: "#1E293B"
  on-surface-strong: "#0F172A"
  on-surface-variant: "#334155"
  on-surface-muted: "#475569"
  surface-container-low: "#FFFFFFE6"
  surface-container: "#FFFFFFF2"
  surface-container-high: "#F0FDFA"
  surface-container-highest: "#F8FAFC"
  overlay: "#064E3B80"
  overlay-strong: "#FFF1F2CC"
  outline: "#E2E8F0CC"
  outline-variant: "#A7F3D0"
  primary: "#83A79D"
  on-primary: "#D1FAE5"
  secondary: "#6EE7B7"
  tertiary: "#5EEAD4"
  success: "#059669"
  error: "#E11D48"
  warning: "#FCD34D"
typography:
  headline-display:
    fontFamily: Bricolage Grotesque
    fontSize: 48px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: Bricolage Grotesque
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.11
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  body-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.63
  caption:
    fontFamily: Plus Jakarta Sans
    fontSize: 10.5px
    fontWeight: 400
    lineHeight: 1.63
  label-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
  label-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
  code:
    fontFamily: ui-monospace
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0.025em
  headline-display-mobile:
    fontFamily: Bricolage Grotesque
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.25
    letterSpacing: -0.025em
  headline-lg-mobile:
    fontFamily: Bricolage Grotesque
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.33
rounded:
  sm: 12px
  md: 16px
  lg: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 32px
  xl: 40px
  gutter: 24px
  section: 80px
  margin: 32px
  container: 1280px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
    height: 44px
  button-primary-hover:
    backgroundColor: "#047857CC"
    textColor: "{colors.background}"
  button-secondary:
    textColor: "{colors.background}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 0px
    height: 44px
  button-outline:
    backgroundColor: "#D1FAE5E6"
    textColor: "#065F46"
    rounded: "{rounded.full}"
    padding: 4px 10px
    height: 25px
  button-ghost:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 10px
---

# CeylonNikah Design System

## Overview

CeylonNikah describes itself as: “Premium Muslim Matrimonial Platform in Sri Lanka.” The interface is light, built on **White (#FFFFFF)** with **Deep Blue (#1E293B)** text, and **Teal (#83A79D)** as the main accent.

Type is set in **Bricolage Grotesque** and **Plus Jakarta Sans**, with **ui-monospace** for code. Headlines run large with tight negative tracking; body text is 14px. Depth comes from soft drop shadows. Controls are pill-shaped.

Measured from [ceylonnikah.lk](https://ceylonnikah.lk/) on November 7, 2026 at 1440×900 and 390×844 from 358 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 20 roles, plus gradient stops #FEF3C7E6, #FBBF24, #6EE7B7, #99F6E4.

- **White (#FFFFFF):** Page background, seen 8 times. Token `background`, CSS `--tw-ring-offset-color`.
- **Deep Blue (#1E293B):** Primary text and headings, seen 10 times. Token `on-surface`.
- **Deep Blue (#0F172A):** Headings and emphasis, seen 19 times. Token `on-surface-strong`.
- **Dark Blue (#334155):** Secondary text, seen 11 times. Token `on-surface-variant`.
- **Dark Blue (#475569):** Muted text and metadata, seen 11 times. Token `on-surface-muted`.
- **White 90% (#FFFFFFE6):** Raised areas one step from the page, seen 6 times. Token `surface-container-low`.
- **White 95% (#FFFFFFF2):** Cards and panels, seen 3 times. Token `surface-container`.
- **Snow (#F0FDFA):** Hover and pressed fills, seen 5 times. Token `surface-container-high`.
- **Snow (#F8FAFC):** Highest raised elements, seen 7 times. Token `surface-container-highest`.
- **Deep Teal 50% (#064E3B80):** Translucent fill for cards and controls, seen 6 times. Token `overlay`.
- **Warm Snow 80% (#FFF1F2CC):** Stronger translucent fill, seen 3 times. Token `overlay-strong`.
- **Cool Mist 80% (#E2E8F0CC):** Borders and dividers, seen 11 times. Token `outline`.
- **Light Teal (#A7F3D0):** Secondary dividers, seen 9 times. Token `outline-variant`.
- **Teal (#83A79D):** Primary buttons and calls to action, seen 6 times. Token `primary`.
- **Pale Green (#D1FAE5):** Text and icons on primary. Token `on-primary`.
- **Teal (#6EE7B7):** Accent in text, fills and borders, seen 18 times. Token `secondary`.
- **Teal (#5EEAD4):** Accent in text, fills and borders, seen 10 times. Token `tertiary`.
- **Dark Teal (#059669):** Success and positive states, seen 9 times. Token `success`.
- **Red (#E11D48):** Errors and destructive states, seen 5 times. Token `error`.
- **Amber (#FCD34D):** Warnings and highlights, seen 5 times. Token `warning`.

## Typography

**Bricolage Grotesque**, **Plus Jakarta Sans** and **ui-monospace** (monospace) share the interface. Fallback stack: `Bricolage Grotesque, Plus Jakarta Sans, system-ui, -apple-system`.

- **headline-display:** Bricolage Grotesque 48px at weight 900, line height 1, tracking -0.025em (30px on mobile). Page title (h1).
- **headline-lg:** Bricolage Grotesque 36px at weight 700, line height 1.11 (24px on mobile). Section headings (h2).
- **body-md:** Plus Jakarta Sans 14px at weight 400, line height 1.43. Body text.
- **body-sm:** Plus Jakarta Sans 12px at weight 400, line height 1.63. Secondary and small text.
- **caption:** Plus Jakarta Sans 10.5px at weight 400, line height 1.63. Captions and fine print.
- **label-lg:** Plus Jakarta Sans 16px at weight 400, line height 1.5. Large buttons and tabs.
- **label-md:** Plus Jakarta Sans 14px at weight 700, line height 1.43. Buttons, navigation and labels.
- **label-sm:** Plus Jakarta Sans 12px at weight 600, line height 1.33. Small labels and badges.
- **code:** ui-monospace 14px at weight 700, line height 1.43, tracking 0.025em. Code and technical values.

## Layout

Spacing does not follow a strict grid: 56% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 4px, sm 8px, md 10px, lg 32px, xl 40px.
- **Sections:** 80px vertical padding between major sections.
- **Gaps:** 24px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1280px.
- **Page margin:** 32px on each side of full-width sections.
- **Breakpoints:** 600px, 640px, 768px, 1024px, 1280px, 1400px, 1536px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(6, 78, 59, 0.2) 0px 10px 15px -3px, rgba(6, 78, 59, 0.2) 0px 4px 6px -4px`

Hairline rings and inset highlights also appear: `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(52, 211, 153, 0.3) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`.

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **sm (12px):** 220 elements.
- **full (9999px):** 160 elements.
- **md (16px):** 32 elements.
- **lg (24px):** 28 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Colombo”):** #064E3B80 fill, #D1FAE5 text, 12px/600, 12px radius, padding 8px 12px, border 1px solid #10B98133.
- **button-primary-hover:** background #047857CC, text #FFFFFF on hover.
- **button-secondary (“Instant Auto-Fill & Register”):** transparent fill, #FFFFFF text, 14px/700, 16px radius, padding 12px 0px, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(6, 78, 59, 0.2) 0px 10px 15px -3px, rgba(6, 78, 59, 0.2) 0px 4px 6px -4px`.
- **button-outline (“95%”):** #D1FAE5E6 fill, #065F46 text, 10px/900, 9999px radius, padding 4px 10px, border 1px solid #6EE7B7.
- **button-ghost (“සිංහල”):** transparent fill, #334155 text, 12px/700, 12px radius, padding 4px 10px.

## Do's and Don'ts

- Do use #FFFFFF for the page and lift surfaces in small steps: #FFFFFFE6, #FFFFFFF2, #F0FDFA, #F8FAFC.
- Do keep text in 4 levels: #1E293B, #0F172A, #334155, #475569.
- Do reserve #83A79D for primary actions and key highlights.
- Do set headlines in Bricolage Grotesque with tight tracking (-0.025em).
- Do reuse the measured spacing steps (8px, 10px, 32px).
- Do make buttons and chips fully rounded (9999px); most other elements use 12px corners.
- Don't introduce new font families beyond Bricolage Grotesque, Plus Jakarta Sans and ui-monospace.
- Don't use #83A79D for large backgrounds or body text.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.15s, 0.3s, 0.2s. Longer ambient animations run 1s, 2s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `cubic-bezier(0, 0, 0.2, 1)`, `cubic-bezier(0.4, 0, 0.6, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/ceylonnikah.lk/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```