Hannah Senesh

# Design brief: the Hannah Senesh design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/02093827/hannahsenesh-org-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/02093827/hannahsenesh-org-featured.webp
- On DesignMunk: https://designmunk.com/hannah-senesh/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Hannah Senesh: Off-White Canvas with Blue and Gold CTAs

## Overview

Friendly and welcoming for a K–8 audience of families and prospective parents. The interface is light, warm, and photo-forward, with generous spacing and minimal ornamentation. Typography mixes a light, contemporary sans for headings with a classic serif for emphasis. Actions are clear and repeated, favoring tall, rounded buttons to encourage exploration and enrollment steps.

## Colors

- **primary (#000000):** Core ink for headlines, body text, and icons.
- **secondary (#0066ff):** Admissions-supporting blue for links, alternate CTAs, and interactive states.
- **tertiary (#ffcc1a):** Attention color for the primary CTA (Apply) and key notices.
- **neutral (#fffcf6):** Parchment background for pages and large sections.
- **surface (#fffcf6):** Default surface behind content blocks and navigation.
- **on-surface (#000000):** Text/controls that sit on the neutral surface.

## Typography

- Headline (lg/sm/xs) — Beausite, Light (300), set large with modest negative tracking for impact. Beausite is custom/self-hosted; agents should not attempt to fetch it. Substitutes with similar character: Space Grotesk Light (Google), Outfit Light (Google), IBM Plex Sans Light (Google).
- Headline-md — Times New Roman at 63px/1.21 for stat callouts and emphatic headings. If unavailable, substitute Georgia (system), Libre Baskerville (Google), or Source Serif 4 (Google).
- Body — Roboto 14px/1.44 (Google) for paragraphs, navigation, and labels. Use weights 300–500 as needed. Keep contrast high on the neutral surface (#FFFCF6).

## Layout

Spacing uses a roomy scale: 16, 24, 58, 96, 160px. Employ xs/sm for intra-component padding and gaps, md (58px) for vertical rhythm between stacked items (e.g., values list), and lg/xl for section paddings and hero whitespace. A simple single-column flow on mobile broadens to a centered content column with generous outer gutters on desktop. Grid can be 12 columns, but rely on the spacing tokens for vertical rhythm rather than a dense baseline.

## Elevation & Depth

Depth is minimal. Only the small shadow token is active—use it sparingly for overlay chips on photography or event cards. Most hierarchy comes from tonal contrast (white cards on the parchment surface), spacing, and crisp borders when necessary. Avoid mid/large shadows; tokens set them to none.

## Shapes

Rounded language is binary: 16px corners for cards and containers, and full (9999px) for pills and chips. Use the full radius for all primary/secondary buttons and compact callouts; reserve 16px for structured blocks like cards and list items. Shapes signal click targets and help maintain the school's friendly tone.

## Components

- Button Primary — 56px height, 8px × 24px padding, full radius, background {tertiary #FFCC1A}, text #222222. Use for the highest-priority action (Apply, Book a Tour).
- Button Secondary — 56px height, 8px × 24px padding, full radius, text #FFFFFF. Pair with high-contrast backgrounds; designers commonly place it over the secondary blue.
- Button Link — Text-only action with square corners; use for inline navigational links and low-friction actions.
- Card — White background, 16px radius, horizontal padding 24px; place on the parchment surface for separation with optional small shadow when floating.

Distinctive components on this page:

### Top Navigation
- Background: surface (#FFFCF6). Body text at 14px Roboto. Primary links sit centered; utility links (Support, Parent Portal) at the right. Spacing: sm (24px) paddings.

### Hero Photo with Dual CTAs
- Full-bleed classroom image. Overlaid chips: a white/neutral announcement and the primary yellow Apply pill. Headline uses headline-lg (104px, Beausite Light or Space Grotesk Light substitute) set across multiple short lines.

### Quick Links Row ("Looking for something?")
- Four concise links presented as button-links or pills depending on context. Use md (58px) gap between items on desktop; xs (16px) on mobile.

### Values Grid
- Each value uses headline-xs (23px) for the title, a short Hebrew subline, and body-md for copy. Stack with md (58px) spacing; place on the neutral surface.

### By-the-Numbers Stats
- Large numerals set in headline-md (Times New Roman 63px). Labels in Roboto 14px. Use lg (96px) vertical padding around the block to isolate it.

### Testimonial Callout
- Quote in body text with increased line-height; author line in body-md. Place within a white card (16px radius) on the parchment surface; optional small shadow.

### Events Teaser
- Compact card list with date badge and title (use headline-xs 23px). White card, 16px radius, small shadow for lift.

### Footer Directory
- Multi-column link list in Roboto 14px. Background: surface (#FFFCF6). Section titles can use headline-xs (23px) for subtle hierarchy.

## Do's and Don'ts

- Do use the parchment surface (#FFFCF6) as the default page background; reserve pure white for cards.
- Do set primary CTAs in sunflower (#FFCC1A) at 56px tall with full-radius pills.
- Do keep vertical rhythm generous—use 58px gaps between stacked items and 96–160px for section paddings.
- Don't introduce extra shadow styles; only the small shadow is permitted for overlays and select cards.
- Don't add new greys for borders; if a divider is needed, use #000000 at reduced opacity on the parchment surface.
- Don't square the corners of buttons or shrink CTA height; the pill silhouette is a key brand cue.

## Agent Prompt Guide

Quick color reference: text #000000, background #FFFCF6, border #000000, accents #0066FF (blue) and #FFCC1A (yellow).

1) Build the hero section
- Background: full-bleed image.
- Headline: 104px, weight 300, letter-spacing -0.03em; family Beausite (if unavailable: Space Grotesk Light). Color #000000.
- Primary CTA: 56px height, padding 8px 24px, radius 9999px, background #FFCC1A, text #222222.
- Secondary CTA: 56px height, padding 8px 24px, radius 9999px, text #FFFFFF on a #0066FF background banner or chip.

2) Create the Values grid
- Section background #FFFCF6 with 96px top/bottom padding.
- Each item: title 23px Beausite/Space Grotesk Light, body 14px Roboto 300. Gaps: 58px vertically, 24px horizontally. No shadows; 16px radius only if items are carded.

3) Style the By-the-Numbers row
- Numerals: 63px Times New Roman (or Libre Baskerville), weight 300, color #000000.
- Labels: 14px Roboto 300, color #000000.
- Layout: three columns on desktop with 58px gaps; 96px section padding; optional dividers as 1px #000000 at low opacity.

4) Events preview card
- Card: background #FFFFFF, radius 16px, padding 0 24px, small multi-layer shadow (use measured sm).
- Title: 23px Beausite/Space Grotesk Light, body 14px Roboto. Add a blue #0066FF link for "View All Events."

## Similar Brands

- Khan Academy — Blue-forward palette and friendly typography; Khan leans heavier on icons and illustrations, while Senesh is photo-first.
- Success Academy — Strong student photography with bold blue/orange accents; Success uses a louder geometric sans, Senesh opts for lighter-weight headings.
- DonorsChoose — Warm, school-centric visuals and approachable CTAs; more ecommerce-style card grids compared to Senesh's editorial flow.
- Prizmah (Center for Jewish Day Schools) — Conservative, community-led content; similar soft neutrals but with denser information architecture.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #0066ff;
  --color-tertiary: #ffcc1a;
  --color-neutral: #fffcf6;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 104px;
  --text-headline-lg-weight: 300;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 63px;
  --text-headline-md-weight: 300;
  --text-headline-md-leading: 1.21;
  --text-headline-sm-size: 38px;
  --text-headline-sm-weight: 300;
  --text-headline-sm-leading: 1.4;
  --text-headline-sm-tracking: -0.029em;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 300;
  --text-headline-xs-leading: 1.98;
  --text-headline-xs-tracking: -0.042em;
  --text-body-md-size: 14px;
  --text-body-md-weight: 300;
  --text-body-md-leading: 1.44;
  --font-beausite: "Beausite";
  --font-times-new-roman: "Times New Roman";
  --font-roboto: "Roboto";

  /* Rounded */
  --radius-sm: 16px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 16px;
  --spacing-sm: 24px;
  --spacing-md: 58px;
  --spacing-lg: 96px;
  --spacing-xl: 160px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #222222;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 8px 24px;
  --button-primary-height: 56px;
  --button-secondary-text-color: #ffffff;
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 8px 24px;
  --button-secondary-height: 56px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #ffffff;
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 0px 24px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #0066ff;
  --color-tertiary: #ffcc1a;
  --color-neutral: #fffcf6;
  --color-surface: #fffcf6;
  --color-on-surface: #000000;
  --font-headline-lg: "Beausite";
  --font-headline-md: "Times New Roman";
  --font-headline-sm: "Beausite";
  --font-headline-xs: "Beausite";
  --font-body-md: "Roboto";
  --text-headline-lg: 104px;
  --text-headline-md: 63px;
  --text-headline-sm: 38px;
  --text-headline-xs: 23px;
  --text-body-md: 14px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-sm: -0.029em;
  --tracking-headline-xs: -0.042em;
  --font-weight-headline-lg: 300;
  --font-weight-headline-md: 300;
  --font-weight-headline-sm: 300;
  --font-weight-headline-xs: 300;
  --font-weight-body-md: 300;
  --radius-sm: 16px;
  --radius-full: 9999px;
  --spacing-xs: 16px;
  --spacing-sm: 24px;
  --spacing-md: 58px;
  --spacing-lg: 96px;
  --spacing-xl: 160px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0.4,
                    1
                ],
                "hex": "#0066ff"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.8,
                    0.102
                ],
                "hex": "#ffcc1a"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.988,
                    0.965
                ],
                "hex": "#fffcf6"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.988,
                    0.965
                ],
                "hex": "#fffcf6"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 58,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 160,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Beausite",
                "fontSize": {
                    "value": 104,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Times New Roman",
                "fontSize": {
                    "value": 63,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Beausite",
                "fontSize": {
                    "value": 38,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": -0.029,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Beausite",
                "fontSize": {
                    "value": 23,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": -0.042,
                    "unit": "em"
                }
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Roboto",
                "fontSize": {
                    "value": 14,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Hannah Senesh**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

---
version: alpha
name: Hannah Senesh
description: Live with conviction—open, inclusive Jewish day school for K-8.
colors:
  primary: "#000000"
  secondary: "#0066ff"
  tertiary: "#ffcc1a"
  neutral: "#fffcf6"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Beausite
    fontSize: 104px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Times New Roman
    fontSize: 63px
    fontWeight: 300
    lineHeight: 1.21
  headline-sm:
    fontFamily: Beausite
    fontSize: 38px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: -0.029em
  headline-xs:
    fontFamily: Beausite
    fontSize: 23px
    fontWeight: 300
    lineHeight: 1.98
    letterSpacing: -0.042em
  body-md:
    fontFamily: Roboto
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.44
rounded:
  sm: 16px
  full: 9999px
spacing:
  xs: 16px
  sm: 24px
  md: 58px
  lg: 96px
  xl: 160px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#222222"
    rounded: "{rounded.full}"
    padding: 8px 24px
    height: 56px
  button-secondary:
    textColor: "#ffffff"
    rounded: "{rounded.full}"
    padding: 8px 24px
    height: 56px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#ffffff"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 0px 24px
---

# Hannah Senesh: Off-White Canvas with Blue and Gold CTAs

## Overview

Friendly and welcoming for a K–8 audience of families and prospective parents. The interface is light, warm, and photo-forward, with generous spacing and minimal ornamentation. Typography mixes a light, contemporary sans for headings with a classic serif for emphasis. Actions are clear and repeated, favoring tall, rounded buttons to encourage exploration and enrollment steps.

## Colors

- **primary (#000000):** Core ink for headlines, body text, and icons.
- **secondary (#0066ff):** Admissions-supporting blue for links, alternate CTAs, and interactive states.
- **tertiary (#ffcc1a):** Attention color for the primary CTA (Apply) and key notices.
- **neutral (#fffcf6):** Parchment background for pages and large sections.
- **surface (#fffcf6):** Default surface behind content blocks and navigation.
- **on-surface (#000000):** Text/controls that sit on the neutral surface.

## Typography

- Headline (lg/sm/xs) — Beausite, Light (300), set large with modest negative tracking for impact. Beausite is custom/self-hosted; agents should not attempt to fetch it. Substitutes with similar character: Space Grotesk Light (Google), Outfit Light (Google), IBM Plex Sans Light (Google).
- Headline-md — Times New Roman at 63px/1.21 for stat callouts and emphatic headings. If unavailable, substitute Georgia (system), Libre Baskerville (Google), or Source Serif 4 (Google).
- Body — Roboto 14px/1.44 (Google) for paragraphs, navigation, and labels. Use weights 300–500 as needed. Keep contrast high on the neutral surface (#FFFCF6).

## Layout

Spacing uses a roomy scale: 16, 24, 58, 96, 160px. Employ xs/sm for intra-component padding and gaps, md (58px) for vertical rhythm between stacked items (e.g., values list), and lg/xl for section paddings and hero whitespace. A simple single-column flow on mobile broadens to a centered content column with generous outer gutters on desktop. Grid can be 12 columns, but rely on the spacing tokens for vertical rhythm rather than a dense baseline.

## Elevation & Depth

Depth is minimal. Only the small shadow token is active—use it sparingly for overlay chips on photography or event cards. Most hierarchy comes from tonal contrast (white cards on the parchment surface), spacing, and crisp borders when necessary. Avoid mid/large shadows; tokens set them to none.

## Shapes

Rounded language is binary: 16px corners for cards and containers, and full (9999px) for pills and chips. Use the full radius for all primary/secondary buttons and compact callouts; reserve 16px for structured blocks like cards and list items. Shapes signal click targets and help maintain the school's friendly tone.

## Components

- Button Primary — 56px height, 8px × 24px padding, full radius, background {tertiary #FFCC1A}, text #222222. Use for the highest-priority action (Apply, Book a Tour).
- Button Secondary — 56px height, 8px × 24px padding, full radius, text #FFFFFF. Pair with high-contrast backgrounds; designers commonly place it over the secondary blue.
- Button Link — Text-only action with square corners; use for inline navigational links and low-friction actions.
- Card — White background, 16px radius, horizontal padding 24px; place on the parchment surface for separation with optional small shadow when floating.

Distinctive components on this page:

### Top Navigation
- Background: surface (#FFFCF6). Body text at 14px Roboto. Primary links sit centered; utility links (Support, Parent Portal) at the right. Spacing: sm (24px) paddings.

### Hero Photo with Dual CTAs
- Full-bleed classroom image. Overlaid chips: a white/neutral announcement and the primary yellow Apply pill. Headline uses headline-lg (104px, Beausite Light or Space Grotesk Light substitute) set across multiple short lines.

### Quick Links Row ("Looking for something?")
- Four concise links presented as button-links or pills depending on context. Use md (58px) gap between items on desktop; xs (16px) on mobile.

### Values Grid
- Each value uses headline-xs (23px) for the title, a short Hebrew subline, and body-md for copy. Stack with md (58px) spacing; place on the neutral surface.

### By-the-Numbers Stats
- Large numerals set in headline-md (Times New Roman 63px). Labels in Roboto 14px. Use lg (96px) vertical padding around the block to isolate it.

### Testimonial Callout
- Quote in body text with increased line-height; author line in body-md. Place within a white card (16px radius) on the parchment surface; optional small shadow.

### Events Teaser
- Compact card list with date badge and title (use headline-xs 23px). White card, 16px radius, small shadow for lift.

### Footer Directory
- Multi-column link list in Roboto 14px. Background: surface (#FFFCF6). Section titles can use headline-xs (23px) for subtle hierarchy.

## Do's and Don'ts

- Do use the parchment surface (#FFFCF6) as the default page background; reserve pure white for cards.
- Do set primary CTAs in sunflower (#FFCC1A) at 56px tall with full-radius pills.
- Do keep vertical rhythm generous—use 58px gaps between stacked items and 96–160px for section paddings.
- Don't introduce extra shadow styles; only the small shadow is permitted for overlays and select cards.
- Don't add new greys for borders; if a divider is needed, use #000000 at reduced opacity on the parchment surface.
- Don't square the corners of buttons or shrink CTA height; the pill silhouette is a key brand cue.

## Agent Prompt Guide

Quick color reference: text #000000, background #FFFCF6, border #000000, accents #0066FF (blue) and #FFCC1A (yellow).

1) Build the hero section
- Background: full-bleed image.
- Headline: 104px, weight 300, letter-spacing -0.03em; family Beausite (if unavailable: Space Grotesk Light). Color #000000.
- Primary CTA: 56px height, padding 8px 24px, radius 9999px, background #FFCC1A, text #222222.
- Secondary CTA: 56px height, padding 8px 24px, radius 9999px, text #FFFFFF on a #0066FF background banner or chip.

2) Create the Values grid
- Section background #FFFCF6 with 96px top/bottom padding.
- Each item: title 23px Beausite/Space Grotesk Light, body 14px Roboto 300. Gaps: 58px vertically, 24px horizontally. No shadows; 16px radius only if items are carded.

3) Style the By-the-Numbers row
- Numerals: 63px Times New Roman (or Libre Baskerville), weight 300, color #000000.
- Labels: 14px Roboto 300, color #000000.
- Layout: three columns on desktop with 58px gaps; 96px section padding; optional dividers as 1px #000000 at low opacity.

4) Events preview card
- Card: background #FFFFFF, radius 16px, padding 0 24px, small multi-layer shadow (use measured sm).
- Title: 23px Beausite/Space Grotesk Light, body 14px Roboto. Add a blue #0066FF link for "View All Events."

## Similar Brands

- Khan Academy — Blue-forward palette and friendly typography; Khan leans heavier on icons and illustrations, while Senesh is photo-first.
- Success Academy — Strong student photography with bold blue/orange accents; Success uses a louder geometric sans, Senesh opts for lighter-weight headings.
- DonorsChoose — Warm, school-centric visuals and approachable CTAs; more ecommerce-style card grids compared to Senesh's editorial flow.
- Prizmah (Center for Jewish Day Schools) — Conservative, community-led content; similar soft neutrals but with denser information architecture.

:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #0066ff;
  --color-tertiary: #ffcc1a;
  --color-neutral: #fffcf6;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 104px;
  --text-headline-lg-weight: 300;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 63px;
  --text-headline-md-weight: 300;
  --text-headline-md-leading: 1.21;
  --text-headline-sm-size: 38px;
  --text-headline-sm-weight: 300;
  --text-headline-sm-leading: 1.4;
  --text-headline-sm-tracking: -0.029em;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 300;
  --text-headline-xs-leading: 1.98;
  --text-headline-xs-tracking: -0.042em;
  --text-body-md-size: 14px;
  --text-body-md-weight: 300;
  --text-body-md-leading: 1.44;
  --font-beausite: "Beausite";
  --font-times-new-roman: "Times New Roman";
  --font-roboto: "Roboto";

  /* Rounded */
  --radius-sm: 16px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 16px;
  --spacing-sm: 24px;
  --spacing-md: 58px;
  --spacing-lg: 96px;
  --spacing-xl: 160px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #222222;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 8px 24px;
  --button-primary-height: 56px;
  --button-secondary-text-color: #ffffff;
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 8px 24px;
  --button-secondary-height: 56px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #ffffff;
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 0px 24px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Live with conviction—open, inclusive Jewish day school for K-8.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.4,
          1
        ],
        "hex": "#0066ff"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.8,
          0.102
        ],
        "hex": "#ffcc1a"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.988,
          0.965
        ],
        "hex": "#fffcf6"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.988,
          0.965
        ],
        "hex": "#fffcf6"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 58,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 96,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 160,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "full": {
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Beausite",
        "fontSize": {
          "value": 104,
          "unit": "px"
        },
        "fontWeight": 300,
        "letterSpacing": {
          "value": -0.03,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Times New Roman",
        "fontSize": {
          "value": 63,
          "unit": "px"
        },
        "fontWeight": 300
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Beausite",
        "fontSize": {
          "value": 38,
          "unit": "px"
        },
        "fontWeight": 300,
        "letterSpacing": {
          "value": -0.029,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Beausite",
        "fontSize": {
          "value": 23,
          "unit": "px"
        },
        "fontWeight": 300,
        "letterSpacing": {
          "value": -0.042,
          "unit": "em"
        }
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Roboto",
        "fontSize": {
          "value": 14,
          "unit": "px"
        },
        "fontWeight": 300
      }
    }
  }
}

@theme {
  --color-primary: #000000;
  --color-secondary: #0066ff;
  --color-tertiary: #ffcc1a;
  --color-neutral: #fffcf6;
  --color-surface: #fffcf6;
  --color-on-surface: #000000;
  --font-headline-lg: "Beausite";
  --font-headline-md: "Times New Roman";
  --font-headline-sm: "Beausite";
  --font-headline-xs: "Beausite";
  --font-body-md: "Roboto";
  --text-headline-lg: 104px;
  --text-headline-md: 63px;
  --text-headline-sm: 38px;
  --text-headline-xs: 23px;
  --text-body-md: 14px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-sm: -0.029em;
  --tracking-headline-xs: -0.042em;
  --font-weight-headline-lg: 300;
  --font-weight-headline-md: 300;
  --font-weight-headline-sm: 300;
  --font-weight-headline-xs: 300;
  --font-weight-body-md: 300;
  --radius-sm: 16px;
  --radius-full: 9999px;
  --spacing-xs: 16px;
  --spacing-sm: 24px;
  --spacing-md: 58px;
  --spacing-lg: 96px;
  --spacing-xl: 160px;
}