Bjerk Base Theme
GitHubNPMBase ThemeWeb Theme
Text styles
titleLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque ultricies, mollis leo quis, luctus magna.
titlenoboldLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque ultricies, mollis leo quis, luctus magna.
headingLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque ultricies, mollis leo quis, luctus magna.
subtitleLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque ultricies, mollis leo quis, luctus magna.
subtitleblackLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque ultricies, mollis leo quis, luctus magna.
standardLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque ultricies, mollis leo quis, luctus magna.
excerptLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque ultricies, mollis leo quis, luctus magna.
readmoreLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque ultricies, mollis leo quis, luctus magna.
contactLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque ultricies, mollis leo quis, luctus magna.
subsectionLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque ultricies, mollis leo quis, luctus magna.
Base styles

This is a whole paragraph of text, include code like this, as well as linked code & regular links. The paragraph ended up being 1 sentence, but now I guess it’s two.

Here’s a code block! No highlighting to be found.

Buttons
Disabled Buttons
Spacing
0
8
1
16
2
24
3
32
4
48
5
64
6
96
7
128
8
192
9
256
Forms
Badges
Colors
blue20
blue40
blue60
blue80
blue100
dark20
dark40
dark60
dark80
text
background
green40
green60
green80
accent
access
Type scale
48px
32px
28px
24px
20px
18px
16px
Theme Object
{
  "space": [
    8,
    16,
    24,
    32,
    48,
    64,
    96,
    128,
    192,
    256
  ],
  "sizes": {
    "container": 1500,
    "readable": 940
  },
  "colors": {
    "blue20": "#C9D1FF",
    "blue40": "#8FA1FF",
    "blue60": "#7087FF",
    "blue80": "#4B5CF0",
    "blue100": "#2A3BCC",
    "dark20": "#B7BCC6",
    "dark40": "#878F9F",
    "dark60": "#576379",
    "dark80": "#273653",
    "text": "#0F2040",
    "background": "#EDF9F1",
    "green40": "#D2FBE0",
    "green60": "#BCF9C6",
    "green80": "#A6F7AE",
    "accent": "#90F494",
    "access": "#4AD97B",
    "error": "#DC3B58",
    "warning": "#FFD464"
  },
  "fonts": {
    "body": "Sora, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif",
    "heading": "inherit",
    "monospace": "inherit"
  },
  "fontWeights": {
    "body": 400,
    "heading": 600
  },
  "fontSizes": [
    16,
    18,
    20,
    24,
    28,
    32,
    48
  ],
  "links": {
    "primary": {
      "color": "blue100",
      "fontWeight": "body",
      "textDecoration": "none",
      ":hover": {
        "textDecoration": "underline"
      },
      "fontSize": 1
    },
    "secondary": {
      "fontSize": [
        0,
        4
      ],
      "color": "blue100",
      "wordWrap": "break-word"
    },
    "nav": {
      "color": "dark100",
      "fontWeight": "body",
      "textDecoration": "none",
      ":hover": {
        "color": "blue100",
        "textDecoration": "underline"
      },
      "fontSize": 1
    },
    "emphasis": {
      "color": "blue100",
      "fontWeight": "body",
      "textDecoration": "none",
      ":hover": {
        "textDecoration": "underline"
      },
      "fontSize": [
        0,
        3
      ]
    },
    "socials": {
      "textDecoration": "none"
    },
    "mobileNav": {
      "color": "white",
      "textDecoration": "none",
      "fontSize": 5
    },
    "footerLink": {
      "color": "blue40",
      "fontSize": [
        0,
        2
      ],
      "textDecoration": "none",
      ":hover": {
        "textDecoration": "underline"
      }
    }
  },
  "text": {
    "title": {
      "fontWeight": "heading",
      "fontSize": [
        5,
        6
      ]
    },
    "titlenobold": {
      "fontWeight": "body",
      "fontSize": [
        5,
        6
      ]
    },
    "heading": {
      "fontWeight": "body",
      "fontSize": 1
    },
    "subtitle": {
      "color": "blue100",
      "fontWeight": "heading",
      "fontSize": [
        0,
        2
      ]
    },
    "subtitleblack": {
      "fontSize": 2,
      "fontWeight": "heading"
    },
    "standard": {
      "fontSize": [
        2,
        4
      ],
      "fontWeight": "body"
    },
    "excerpt": {
      "fontWeight": "body",
      "fontSize": [
        2,
        5
      ]
    },
    "readmore": {
      "fontWeight": "body",
      "fontSize": [
        0,
        3
      ]
    },
    "contact": {
      "fontSize": 0
    },
    "subsection": {
      "fontSize": 5,
      "fontWeight": "heading"
    }
  },
  "buttons": {
    "primary": {
      "fontFamily": "body",
      "color": "dark100",
      "p": 3,
      "borderRadius": "30px",
      "width": "fit-content",
      "backgroundColor": "transparent",
      "boxShadow": "2px 4px 11px rgba(0, 0, 0, 0.1), inset 3px 4px 9px rgba(255, 255, 255, 0.15)"
    }
  },
  "badges": {},
  "styles": {
    "root": {
      "backgroundColor": "background",
      "fontFamily": "body",
      "lineHeight": "body",
      "fontWeight": "body"
    },
    "p": {
      "color": "text",
      "fontFamily": "body",
      "fontWeight": "body",
      "lineHeight": "body"
    },
    "a": {
      "color": "primary"
    },
    "pre": {
      "fontFamily": "monospace",
      "overflowX": "auto",
      "code": {
        "color": "inherit"
      }
    },
    "code": {
      "fontFamily": "monospace",
      "fontSize": "inherit"
    },
    "table": {
      "width": "100%",
      "borderCollapse": "separate",
      "borderSpacing": 0
    },
    "th": {
      "textAlign": "left",
      "borderBottomStyle": "solid"
    },
    "td": {
      "textAlign": "left",
      "borderBottomStyle": "solid"
    },
    "img": {
      "maxWidth": "100%"
    }
  },
  "forms": {
    "label": {
      "gap": 2
    }
  },
  "layout": {
    "layout": {
      "centered": {
        "margin": "0 auto",
        "m": 0,
        "p": 0,
        "backgroundSize": "cover"
      },
      "readable": {
        "variant": "centered",
        "maxWidth": 950,
        "backgroundSize": "cover",
        "px": [
          6,
          "unset"
        ]
      },
      "full": {
        "variant": "centered",
        "maxWidth": 1500,
        "p": 5
      },
      "header": {
        "maxWidth": 1500
      }
    }
  },
  "cards": {
    "primary": {
      "display": "flex",
      "flexDirection": "column",
      "p": 4,
      "gap": 4,
      "bg": "white"
    }
  }
}