Linwood Style

A small, customizable SCSS framework for Linwood web projects.

Install

pnpm add @linwooddev/style

@use "@linwooddev/style";

Typography

Heading level one

Heading level two

Heading level three

Paragraph text uses the configured font and colors. Links remain underlined so they are not identified by color alone.

Blockquotes use a simple border and italic text.

Inline code uses the elevation color.

Components

Buttons

Button link

Cards

Primary cardUse for an emphasized linked item.Secondary cardUse for a quieter linked item.

Filled cardCards can also contain static content.

Forms

Layout utilities

Rows, columns, gaps, flex sizing, spacing, and responsive container-query helpers are included.

.row

.gap-sm

.flex-*

This text is visible when the container is at least 768px wide.

Customize

Configure Sass variables before the stylesheet is evaluated:

@use "@linwooddev/style" with (
  $color-primary: #8b7cff,
  $color-background: #17171c,
  $border-radius: 0.75rem,
  $enable-default-styling: true
);

Runtime color tokens

--ls-primary
--ls-primary-text
--ls-background
--ls-background-text
--ls-elevation