SK PRO Framework Reference.
Fluid Text
text-xs: Extra small text size with line height (12-14px).
text-s: Small text size with line height (14-16px).
text-m: Medium text size with line height (16-18px).
text-l: Large text size with line height (18-20px).
text-xl: Extra large text size with line height (20-24px).
text-2xl: 2x large text size with line height (24-32px).
text-3xl: 3x large text size with line height (32-40px).
text-4xl: 4x large text size with line height (40-48px).
Fluid Headings
sk-heading-9xl: Hero display headingÂ
sk-heading-8xl: Large display headingÂ
sk-heading-7xl: Section headerÂ
sk-heading-6xl: Page titleÂ
sk-heading-5xl: Main headingÂ
sk-heading-4xl: H1-equivalentÂ
sk-heading-3xl: H2-equivalent headingÂ
sk-heading-2xl: H3-equivalentÂ
sk-heading-xl: H4-equivalentÂ
sk-heading-l: H5-equivalentÂ
sk-heading-m: H6-equivalentÂ
sk-heading-s: Small headingÂ
Font Weights
Text Other
text-uppercase: Uppercase text transform.
text-lowercase: Lowercase text transform.
text-capitalize: Capitalize text transform.
text-italic: Italic font style.
text-strike: Strikethrough text decoration.
text-decoration-none: No text decoration.
tracking-wide: Wide letter spacing (0.1em).
tracking-wider: Wider letter spacing (0.15em).
tracking-tight: Tight letter spacing (-0.02em).
text-left: Left text alignment.
text-center: Center text alignment.
text-right: Right text alignment.
text-justify: Justify text alignment.
accent-text: Use accent font family (Montserrat).
Text Colors
text-pri-50 to text-pri-900: Primary color shades for text (light to dark).
text-acc-50 to text-acc-900: Accent color shades for text (light to dark).
text-gray-50 to text-gray-900: Gray shades for text (light to dark).
Buttons
button-pri: Primary button (solid primary color).
button-acc: Accent button (solid accent color).
button-outline-pri: Primary outline button.
button-outline-acc: Accent outline button.
button-outline: Generic outline button.
button-ghost: Ghost button (transparent).
button-text: Text-only button.
button-link: Link-style button.
Background Colors
bg-pri-50 to bg-pri-900: Primary color shades for background (light to dark).
bg-acc-50 to bg-acc-900: Accent color shades for background (light to dark).
bg-gray-50 to bg-gray-900: Gray shades for background (light to dark).
bg-error: Error semantic background color.
bg-info: Info semantic background color.
bg-success: Success semantic background color.
bg-warning: Warning semantic background color.
Spacing Gap
gap-0: No gap between elements.
gap-xs: Extra small gap.
gap-s: Small gap.
gap-m: Medium gap.
gap-l: Large gap.
gap-xl: Extra large gap.
Margins
m-0: No margin.
m-xs: Extra small margin (all sides).
m-s: Small margin (all sides).
m-m: Medium margin (all sides).
m-l: Large margin (all sides).
m-xl: Extra large margin (all sides).
mt-0 / mb-0 / ml-0 / mr-0: No margin (top/bottom/left/right).
mt-xs to mt-xl: Margin top (extra small to extra large).
mb-xs to mb-xl: Margin bottom (extra small to extra large).
ml-xs to ml-xl: Margin left (extra small to extra large).
mr-xs to mr-xl: Margin right (extra small to extra large).
Padding
p-0: No padding.
p-xs: Extra small padding (all sides).
p-s: Small padding (all sides).
p-m: Medium padding (all sides).
p-l: Large padding (all sides).
p-xl: Extra large padding (all sides).
pt-0 / pb-0 / pl-0 / pr-0: No padding (top/bottom/left/right).
pt-xs to pt-xl: Padding top (extra small to extra large).
pb-xs to pb-xl: Padding bottom (extra small to extra large).
pl-xs to pl-xl: Padding left (extra small to extra large).
pr-xs to pr-xl: Padding right (extra small to extra large).
no-padding: No padding (legacy).
pad-xs to pad-xl: Padding (extra small to extra large, legacy).
Sections
sec-s: Small section padding.
sec-m: Medium section padding.
sec-l: Large section padding.
sec-hero: Hero section padding.
Positioning
static: Static positioning.
fixed: Fixed positioning.
absolute: Absolute positioning.
relative: Relative positioning.
sticky: Sticky positioning.
top-0 / right-0 / bottom-0 / left-0: Position at 0 (top/right/bottom/left).
top-auto / right-auto / bottom-auto / left-auto: Auto position (top/right/bottom/left).
z-0 to z-50: Z-index layers (0 to 50).
z-auto: Auto z-index.
Borders
border-0: No border width.
border: 1px border width.
border-2: 2px border width.
border-4: 4px border width.
border-8: 8px border width.
border-solid: Solid border style.
border-dashed: Dashed border style.
border-dotted: Dotted border style.
border-double: Double border style.
border-none: No border style.
rounded-none: No border radius.
Boarder Radius
rounded-xs to rounded-xl: Border radius (extra small to extra large).
Shadows
Hover
Grid
grid-auto: Auto-fit grid layout.
grid-bento: Bento grid layout (auto-fit with fixed rows).
bento-item: Bento grid item base.
bento-lg: Large bento item (2x2 span).
bento-wide: Wide bento item (2-column span).
bento-tall: Tall bento item (2-row span).
bento-full: Full-width bento item (full column, 2-row span).
container: Centered container with max-width and padding.
Transparent Glass
glass: Glassmorphism effect (blurred transparent background).