Buttons

Button variants and states

Primary Buttons
Secondary Buttons
Icon Buttons
Button Group

Cards

Card layouts and variants

Standard Card
Card Title

This is a standard card with a title and content. Use this for grouping related information.

Secondary text or additional information goes here.

Verse Card

Genesis 1:1

בְרֵאשִׁית בָּרָא אֱלֹהִים אֵת הַשָּׁמַיִם וְאֵת הָאָרֶץ

In the beginning, God created the heavens and the earth.

Color System

Light theme color palette

Primary Colors
--ds-bg
#ffffff
--ds-fg
#333333
--ds-bg-secondary
#f8f9fa
--ds-fg-muted
#6c757d
--ds-bg-tertiary
#e9ecef
--ds-border
#dee2e6
Accent & Semantic
--ds-accent
#0d6efd
--ds-accent-hover
#0b5ed7
--ds-success
#198754
--ds-danger
#dc3545
--ds-warning
#ffc107
--ds-info
#0dcaf0

Typography

Font sizes, weights, and styles

Heading Hierarchy

Heading 1 (32px / 2rem)

Heading 2 (24px / 1.5rem)

Heading 3 (20px / 1.25rem)

Heading 4 (18px / 1.125rem)

Heading 5 (16px / 1rem)
Heading 6 (14px / 0.875rem)
Body Text Variants
Body (Base) This is base body text at 16px with normal line height. Use for standard paragraphs.
Small This is small text at 14px. Use for secondary information and labels.
Muted

This is muted text at 14px. Use for disabled or less important content.

Code const token = var(--ds-accent)
Hebrew Text

בְרֵאשִׁית בָּרָא אֱלֹהִים אֵת הַשָּׁמַיִם וְאֵת הָאָרֶץ

Magalith Tanach Pro font, 1.3rem size for clarity with diacritics

Spacing Scale

Margin and padding scale

8px
12px
20px
32px
48px

Form Elements

Input fields, selects, and checkboxes

Alerts

Alert messages and notifications

Badges

Small status and label badges

Default Primary Success Danger Warning Info

Tables

Data table display

Column 1 Column 2 Column 3
Data 1.1 Data 1.2 Data 1.3
Data 2.1 Data 2.2 Data 2.3
Data 3.1 Data 3.2 Data 3.3

Modals

Modal dialog preview

Modal Title

This is the modal body content. It can contain any HTML elements.

You can add form inputs, buttons, text, or any other content here.

Icons

Bootstrap icons (common examples)