Meet Castos Sign In 14-Day Free Trial
Who we are
What we stand for️Our PurposeOur VisionOur MissionOur ValuesDesign System
Design PrinciplesColorsTypographyImagesContent Guide
What is a Content GuideWriting goals and principlesTips for writing at CastosComponent Library
About our ComponentsButtonLogos & Assets
CastosCastos ProductionsCastos AcademyAudience Podcast3 Clips Podcast© Castos 2022 – v0.4
Colors
Shades
Our colour palette consists of the following shades:
graypurple(primary)indigored(secondary)bluecyangreenyellow
Tones
All colors are pinned on the primary tone of 600 with 6 lighter shades (50, 100, 200, 300, 400, 500) and 3 darker shades (700, 800, 900)
Primary Color(s)
The primary shade and tone we use is: purple-600
The secondary shade and tone we use is: red-600
Color Grid
View in Figma →
Color Values
white: '#FFF',
gray: {
50: '#F8FAFC',
100: '#F1F5F9',
200: '#E2E8F0',
300: '#CBD5E1',
400: '#94A3B8',
500: '#64748B',
600: '#475569',
700: '#334155',
800: '#1E293B',
900: '#0F172A',
},
purple: {
50: '#F6F3FF',
100: '#EFE9FE',
200: '#E1D6FE',
300: '#CEB5FD',
400: '#B98BFA',
500: '#975CF6',
600: '#853AED',
700: '#6C25D0',
800: '#5A1FAD',
900: '#4A1B89',
},
indigo: {
50: '#F7E9FF',
100: '#EDCEFF',
200: '#D8A3F8',
300: '#C17CE9',
400: '#9E52CB',
500: '#893DB6',
600: '#7E159C',
700: '#70088A',
800: '#69007A',
900: '#51045E',
},
red: {
50: '#FBE5ED',
100: '#FAD6E2',
200: '#FCB1C7',
300: '#F684A6',
400: '#FF4F91',
500: '#EC2D76',
600: '#E11966',
700: '#C11051',
800: '#A00D4D',
900: '#7F0A3D',
},
blue: {
50: '#EFF7FF',
100: '#DBECFE',
200: '#BFDFFE',
300: '#93CAFD',
400: '#60B0FA',
500: '#3B89F6',
600: '#256AEB',
700: '#1C51CF',
800: '#1C43A5',
900: '#1B3E7E',
},
cyan: {
50: '#F0FFFD',
100: '#D7FEFC',
200: '#B0FCF9',
300: '#71F9F5',
400: '#2AEFE8',
500: '#06D4DF',
600: '#09B5C8',
700: '#0E8190',
800: '#135B68',
900: '#11444B',
},
yellow: {
50: '#FFFCEB',
100: '#FEF8D7',
200: '#FDEFA0',
300: '#FCE669',
400: '#FBCE2D',
500: '#F6BB19',
600: '#E9A106',
700: '#AF6A09',
800: '#874E0D',
900: '#64370C',
},
green: {
50: '#EBFFEA',
100: '#C9FEC5',
200: '#97F390',
300: '#6AE961',
400: '#03E139',
500: '#03D126',
600: '#04AC21',
700: '#05801A',
800: '#065614',
900: '#063E10',
},