@synrose/d-systems v0.5.2

D-systems

Sheet of references for every d-system available in Synrose.

Usage

/* Simply import the respective system particle.styl in your particle
main.js file to have access to its vars and resets! */
import '@synrose/d-systems/{system}/particle.styl'

Systems

1. Melon

Vars

:root {

	/* Sizing */
	--sizing-min-utls: 1024;
	--sizing-base-utls: 1366;
	--sizing-max-utls: 1920;

	/* Fonts */
	--font-base: 16px;
	--font-base-utls: 16;
	--h1-size-utls: 46;
	--h1-family: 'd-sans';
	--h1-weight: 700;
	--h1-leading: 1.1;
	--h1-tracking: -4%;
	--h2-size-utls: 38;
	--h2-family: 'd-sans';
	--h2-weight: 600;
	--h2-leading: 1.1;
	--h2-tracking: -4%;
	--h3-size-utls: 26;
	--h3-family: 'd-sans';
	--h3-weight: 600;
	--h3-leading: 1;
	--h3-tracking: -4%;
	--h4-size-utls: 20;
	--h4-family: 'd-sans';
	--h4-weight: 500;
	--h4-leading: 1;
	--h4-tracking: -4%;
	--p-size-utls: 16;
	--p-family: 'd-sans';
	--p-weight: 400;
	--p-leading: 1;
	--p-tracking: -4%;

	/* Colors */
	--primary-1: #FFF;
	--primary-2: #F4F4F4;
	--primary-3: #E5E7EB;
	--primary-4: #DDD;
	--primary-5: #6D6D6D;
	--primary-6: #212D2D;
	--accent-1: #FFEF61;
	--accent-2: #285555;

	/* Radius */
	--rounded-main: 12px;
}

Fonts

@font-face {
	font-family: 'd-sans';
	src: url('https://d-systems.synrose.dev/fonts/inter/variable.woff2') format("woff2-variations");
	font-weight: 100 900;
	font-stretch: 100%;
	font-style: normal;
	font-display: swap;
}

Shortcuts

h1
	font-family var(--h1-family)
	font-weight var(--h1-weight)
	line-height var(--h1-leading)
	letter-spacing var(--h1-tracking)
h2
	font-family var(--h2-family)
	font-weight var(--h2-weight)
	line-height var(--h2-leading)
	letter-spacing var(--h2-tracking)
h3
	font-family var(--h3-family)
	font-weight var(--h3-weight)
	line-height var(--h3-leading)
	letter-spacing var(--h3-tracking)
h4
	font-family var(--h4-family)
	font-weight var(--h4-weight)
	line-height var(--h4-leading)
	letter-spacing var(--h4-tracking)
p
	font-family var(--p-family)
	font-weight var(--p-weight)
	line-height var(--p-leading)
	letter-spacing var(--p-tracking)