Rumyra Brand Base Stylesheet

Custom Properties

Colours

Note I have altered the true brand colours slightly for contrast

:root {
  --black: hsla(315, 3%, 15%, 1);
	--brown: hsla(315, 3%, 25%, 1);
  --cream: hsla(33, 55%, 94%, 1);
  --white: hsla(60, 33%, 99%, 1);

  --purple: hsla(273, 36%, 59%, 1);
  --pink: hsla(346, 63%, 59%, 1);
  --orange: hsla(5, 74%, 62%, 1);
  --yellow: hsla(38, 86%, 67%, 1);
  --green: hsla(131, 30%, 58%, 1);
  --blue: hsla(179, 38%, 53%, 1);
	
	/* abstract colours -> all components use prim or sec, change it per component in situ */
  --primCol: var(--purple);
  --secCol: var(--green);
	
	/* darks & lights - although I will use black & white in use */
	--darkest: var(--black);
	--dark: var(--brown);
	--light: var(--cream);
	--lightest: var(--white);
}

Units

:root {
	--size: 1.1rem; /* use for gutters, vertical spacing & fonts */
	
	--gutter: var(--size);
	--verticalSpace: var(--size);
	
	/* abstract for use */
	--xGap: var(--gutter);
	--xHalfGap: calc(var(--gutter)/2);
	--xDoubleGap: calc(var(--gutter)*2);
	--yGap: var(--verticalSpace);
	--yHalfGap: calc(var(--verticalSpace)/2);
	--yDoubleGap: calc(var(--verticalSpace)*2);
	
	--smallScreen: 420px;
	--mediumScreem: 650px;
	--wideScreen: 1200px;
	--xwideScreen: 2000px;
	
	/* 2.52, 2.33, 2.15, 2, 1.85, 1.7, 1.58, 1.47, 1.36, 1.26, 1.16, 0.92, 0.85 -> golden ratio */
	--fontSize: var(--size);
	--largeHeaderSize: calc(var(--fontSize)*2.33);
	--mediumHeaderSize: calc(var(--fontSize)*1.47);
	--smallHeaderSize: calc(var(--fontSize)*1);
	--largeFontSize: var(--mediumHeaderSize);
	--smallFontSize: calc(var(--fontSize)*0.85);
}

Font

:root {
	--font: 'Sans', sans-serif;
}

Design

:root { 
  --borderWidth: 6px;
  --borderRadius: 2px;
  --boxShadow: 0px 0px 1px 0px var(--dark);
}