styleguide.md

StyleGuide Documentation

Google Fonts Link

<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Chivo&display=swap" rel="stylesheet">

Typography

/* Font weight */
--fw-100: 100; 
--fw-200: 200;
--fw-300: 300; 
--fw-400: 400; 
--fw-500: 500; 
--fw-600: 600;
--fw-700: 700; 
--fw-800: 800; 
--fw-900: 900; 


/* Font family */
--ff-Chivo: 'Chivo', sans-serif;

/*Letter spacing*/
--letter-spacing-tighter: -0.05em; 
--letter-spacing-tight: -0.025em; 
--letter-spacing-normal: 0em; 
--letter-spacing-wide: 0.025em; 
--letter-spacing-wider: 0.05em; 
--letter-spacing-widest: 0.1em; 


/* Font sizes - TypeScale for Augumented Fourth */
--fs-1: clamp(0.85rem, calc(0.74rem + 0.47vw),1.41rem); 
--fs-2: clamp(1.2rem, calc(1.04rem + 0.66vw),2.00rem);
--fs-3: clamp(1.696rem, calc(1.49rem + 0.93vw), 2.83rem);
--fs-4: clamp(2.40rem, calc(2.096rem + 1.32vw), 4.00rem);
--fs-5: clamp(3.92rem, calc(2.96rem + 1.87vw), 5.65rem);


/* Line-height */
--line-height-none: 1; 
--line-height-tight: 1.25; 
--line-height-snug: 1.375; 
--line-height-normal: 1.5; 
--line-height-relaxed: 1.625; 
--line-height-loose: 2; 

Spacing

--space-1: clamp(0.304rem, calc(0.256rem + 0.17vw), 0.496rem);
--space-2: clamp(0.608rem, calc(0.528rem + 0.33vw), 1.01rem);
--space-3: clamp(0.896rem, calc(0.784rem + 0.50vw), 1.504rem);
--space-4: clamp(1.20rem, calc(1.04rem + 0.66vw), 2.00rem);
--space-5: clamp(1.81rem, calc(1.57rem + 0.99vw), 3.01rem);
--space-6: clamp(2.40rem, calc(2.096rem + 1.32vw), 4.00rem);
--space-7: clamp(3.60rem, calc(3.14rem + 1.98vw), 6.00rem);
--space-8: clamp(4.80rem, calc(4.19rem + 2.64vw), 8.00rem);
--space-9: clamp(7.20rem, calc(6.29rem + 3.97vw), 12.00rem);
--space-10: clamp(0.304rem, calc(0.16rem + 0.58vw), 1.01rem);
--space-11: clamp(0.608rem, calc(0.432rem + 0.74vw), 1.504rem);
--space-12: clamp(0.896rem, calc(0.688rem + 0.91vw), 2.00rem);
--space-13: clamp(1.20rem, calc(0.864rem + 1.49vw), 3.01rem);
--space-14: clamp(1.81rem, calc(1.376rem + 1.82vw), 4.00rem);
--space-15: clamp(2.40rem, calc(1.712rem + 2.98vw), 6.00rem);
--space-16: clamp(3.60rem, calc(2.77rem + 3.64vw), 8.00rem);
--space-17: clamp(4.80rem, calc(3.424rem + 5.95vw), 12.00rem);
--space-18: clamp(1.2rem, calc(0.672rem + 2.31vw), 4.00rem);

Rounded Corners

--radius-1: 2px; 
--radius-2: 4px; 
--radius-3: 6px;
--radius-4: 8px; 
--radius-5: 12px; 
--radius-6: 16px; 
--radius-7: 22.5px; 
--radous-7: 24px; 

Gap

--gap-0: 0px; 
--gap-1: 1px; 
--gap-1_25: 0.125rem; 
--gap-2_5: 0.25rem; 
--gap-3_75: 0.375rem; 
--gap-5: 0.5rem; 
--gap-6_25: 0.625rem; 
--gap-7_5: 0.75rem; 
--gap-8_75: 0.875rem; 
--gap-10: 1rem; 
--gap-12_5: 1.25rem; 
--gap-15: 1.5rem; 
--gap-17_5: 1.75rem; 
--gap-20: 2rem; 
--gap-22_5: 2.25rem; 
--gap-27_5: 2.75rem; 
--gap-30: 3rem;
--gap-35: 3.5rem; 
--gap-40: 4rem; 
--gap-50: 5rem; 
--gap-60: 6rem; 
--gap-70: 7rem; 
--gap-80: 8rem; 
--gap-90: 9rem; 
--gap-100: 10rem; 
--gap-110: 11rem; 
--gap-120: 12rem; 
--gap-130: 13rem; 
--gap-140: 14rem; 
--gap-150: 15rem; 
--gap-160: 16rem; 
--gap-180: 18rem; 
--gap-200: 20rem; 
--gap-240: 24rem;

Colors

--aqua-marine: hsl(157, 74%, 62%);
--tuna: hsl(225, 26%, 32%);
--mirage: hsl(224, 35%, 11%);
--white: hsl(0, 0%, 100%); 
--marble-blue: hsl(225, 21%, 45%);
--periwinkle-grey: hsl(225, 40%, 83%);  
--red: hsla(0, 96%, 61%, 1);

Display

--hidden: none; 
--block: block; 
--inline: inline; 
--inline-block: inline-block; 
--flex: flex;
--inline-flex: inline-flex; 
--grid: grid; 
--inline-grid: inline-grid;