Scribd
Upload
17 views2 pages

Variables

The document contains a comprehensive list of color variables and font settings for a design system, including primary, secondary, and tertiary colors, as well as specific colors for various elements like profiles and social media icons. It also specifies font choices and sizes for the interface. This structured approach aids in maintaining consistency across design elements.

Uploaded by

Katarina Vuleta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views2 pages

Variables

The document contains a comprehensive list of color variables and font settings for a design system, including primary, secondary, and tertiary colors, as well as specific colors for various elements like profiles and social media icons. It also specifies font choices and sizes for the interface. This structured approach aids in maintaining consistency across design elements.

Uploaded by

Katarina Vuleta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

$primary-color:#ffcccc;

$primary-color-light:#ff9999;
$primary-color-dark:#ff6666;
$color-primary-very-dark:#e24848;

//secondary color
$secondary-color:#c74200;
$secondary-color-light:#fad884;
$secondary-color-dark:#f56b26;

$color-crimson-red:#eb1f27;

$grey-color:rgb(138, 138, 138);


$grey-color-dark:rgb(97, 96, 96);
$grey-color-very-dark:rgb(34, 33, 33);
$color-grey-dark:#333;

$color-white:#fff;
$white-smoke:rgb(240,238,237);

$color-black:#000;

$profile-color-primary:#eb2f64;
$profile-color-primary-light:#FF3366;
$profile-color-primary-dark:#8A265D;

$profile-color-grey-light-1: #faf9f9;
$profile-color-grey-light-2: #f4f2f2;
$profile-color-grey-light-3: #f0eeee;
$profile-color-grey-light-4: #ccc;
$profile-color-grey-dark-1: #333;
$profile-color-grey-dark-2: #777;
$profile-color-grey-dark-3: #999;

$profile-color-black: rgb(0, 0, 0);


$profile-caption-primary:#101d2c;

//for display posts


$for-sale: #e4e709;
$for-sale-dark: rgb(150, 140, 0);

$color-secondary-light:#fad884;
$color-secondary-dark:#f56b26;

$color-tertiary-light:#2998ff;

$color-tertiary-dark:#5643fa;

$color-tertiary-very-light:#89c2f7;
$color-tertiary-very-dark:#00213f;
$color-green-light:rgb(98, 255, 66);
$color-green-dark:rgb(0, 139, 46);

//colors for register and login form


$profile-color-magenta:#FF00FF;
$profile-color-mediumpurple:#9370DB;
$profile-color-orchid:#FF00FF;
$profile-color-darkviolet:#9370DB;
$profile-color-darkerviolet:rgb(118, 91, 173);
$profile-color-indigo:#FF00FF;
$profile-color-light:#9370DB;

//color for the input style


$color-grey-dark-2:#999;
$color-grey-light-2:rgb(224, 215, 215);

//Australian realestate company colors


$color-harcourts:#001f49;
$color-brad-teal:#1c2273;
$color-upa:#ffeb01;
$color-barryplant:#fdfdfd;
$color-iconek:#231f20;

//social media icons colors


$facebook:#3b5998;
$twitter:#1da1f2;
$youtube: #ff0000;
$instagram:#c32aa3;
$pinterest:#bd081c;
$LinkedIn:#007bb5;
$gplus: #db4437;
$snapchat:#fffc00;
$watsup: #25d366;
$Tumblr:#35465d;
$Reddit:#ff4500;
$Spotify:#ff4500;
$Amazon:#ff9900;

//fonts
$default-font-size:4rem;//16px 1rem =16px 16/10 =1.6

$nunito-font: 'Nunito', sans-serif;


$lato-font: "Lato",sans-serif;
$roboto-font:"Roboto",sans-serif;
$open-sans-font:"Open Sans",sans-serif;

//header bubble
$bubble-size:4.5rem;

You might also like