Design system and component library for the HYAcorp website. All classes use the sg- prefix for easy identification and consistent application across pages.
Body Large (sg-body-lg) — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Body (sg-body) — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Body Small (sg-body-sm) — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Caption (sg-caption) — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Tiny (sg-tiny) — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
sg-color-black — Primary text color
sg-color-dark — Dark text color
sg-color-grey — Secondary text color
sg-color-muted — Muted text color
sg-bg-black
sg-bg-dark
sg-bg-grey
sg-bg-light
sg-bg-white
sg-container-lg (1400px) — Full-width content areas
sg-container-md (940px) — Standard content areas
sg-container-sm (720px) — Narrow content areas, text-heavy pages
sg-section-lg — 120px top/bottom padding (hero, major sections)
sg-section-md — 80px top/bottom padding (standard sections)
sg-section-sm — 40px top/bottom padding (compact sections)
2-Column Grid (sg-grid-2)
Column 1
Column 2
3-Column Grid (sg-grid-3)
Column 1
Column 2
Column 3
Enter first name
Enter last name
Enter email address
Enter your message
Light (300) — sg-weight-light
Regular (400) — sg-weight-regular
Medium (500) — sg-weight-medium
Semibold (600) — sg-weight-semibold
Bold (700) — sg-weight-bold
Left aligned text — sg-text-left
Center aligned text — sg-text-center
Right aligned text — sg-text-right
sg-spacer-lg (80px) • sg-spacer-md (40px) • sg-spacer-sm (20px)
sg-flex-center — Centers children horizontally and vertically
sg-flex-between — Distributes children with space between
Typography: sg-display, sg-h1, sg-h2, sg-h3, sg-h4, sg-h5, sg-h6, sg-body-lg, sg-body, sg-body-sm, sg-caption, sg-tiny
Colors: sg-color-black, sg-color-dark, sg-color-grey, sg-color-muted, sg-color-light, sg-color-white
Backgrounds: sg-bg-black, sg-bg-dark, sg-bg-grey, sg-bg-light, sg-bg-white
Buttons: sg-btn-primary, sg-btn-secondary, sg-btn-ghost
Layout: sg-page-wrapper, sg-container-lg, sg-container-md, sg-container-sm, sg-content-wrapper, sg-section-full, sg-grid-2, sg-grid-3, sg-grid-4, sg-flex-col, sg-flex-center, sg-flex-between
Spacing: sg-section-lg, sg-section-md, sg-section-sm, sg-spacer-lg, sg-spacer-md, sg-spacer-sm, sg-mt-0, sg-mb-0, sg-mb-sm, sg-mb-md, sg-mb-lg, sg-mb-xl, sg-pt-0, sg-pb-0, sg-gap-sm, sg-gap-md, sg-gap-lg
Utilities: sg-weight-light, sg-weight-regular, sg-weight-medium, sg-weight-semibold, sg-weight-bold, sg-text-center, sg-text-left, sg-text-right, sg-w-full, sg-w-half, sg-relative, sg-overflow-hidden, sg-img-cover, sg-img-contain
Components: sg-card, sg-card-image, sg-input, sg-label, sg-textarea, sg-nav, sg-nav-link, sg-footer, sg-footer-link, sg-divider