sailing-shark-cs
sailing-shark-cs
Color Schemesailing-shark-cs
color schemesailing-shark-cs
colour scheme is ideal for designs that aim to portray strength,
warmth, and growth.{
"default-colors-light": {
"Accent Colors": {
"primary": {
"value": "#73c9a5",
"type": "color"
},
"secondary": {
"value": "#3a3e45",
"type": "color"
},
"tertiary": {
"value": "#c5cbd7",
"type": "color"
}
},
"Background Colors": {
"base": {
"value": "#ffffff",
"type": "color"
},
"code": {
"value": "#eaeaea",
"type": "color"
},
"overlay": {
"value": "#000000",
"type": "color"
},
"step-1": {
"value": "#dcdcdc",
"type": "color"
},
"step-2": {
"value": "#f1f1f1",
"type": "color"
}
},
"CTA Danger Colors": {
"base": {
"value": "#f9e4e1",
"type": "color"
},
"border": {
"value": "#e9968c",
"type": "color"
},
"border-disabled": {
"value": "#e9968c",
"type": "color"
},
"disabled": {
"value": "#faeceb",
"type": "color"
},
"focused": {
"value": "#d97973",
"type": "color"
},
"hover": {
"value": "#f1bdd6",
"type": "color"
},
"pressed": {
"value": "#d46a63",
"type": "color"
},
"text": {
"value": "#d84836",
"type": "color"
},
"text-disabled": {
"value": "#d84836",
"type": "color"
}
},
"CTA Primary Colors": {
"base": {
"value": "#73c9a5",
"type": "color"
},
"border": {
"value": "#73c9a5",
"type": "color"
},
"border-disabled": {
"value": "#73c9a5",
"type": "color"
},
"disabled": {
"value": "#f1faf6",
"type": "color"
},
"focused": {
"value": "#56977c",
"type": "color"
},
"hover": {
"value": "#68b595",
"type": "color"
},
"pressed": {
"value": "#5ca184",
"type": "color"
},
"text": {
"value": "#242930",
"type": "color"
},
"text-disabled": {
"value": "#242930",
"type": "color"
}
},
"CTA Secondary Colors": {
"base": {
"value": "#242930",
"type": "color"
},
"border": {
"value": "#3a3e45",
"type": "color"
},
"border-disabled": {
"value": "#3a3e45",
"type": "color"
},
"disabled": {
"value": "#ebecec",
"type": "color"
},
"focused": {
"value": "#2c2f34",
"type": "color"
},
"hover": {
"value": "#34383e",
"type": "color"
},
"pressed": {
"value": "#2e3237",
"type": "color"
},
"text": {
"value": "#ffffff",
"type": "color"
},
"text-disabled": {
"value": "#ffffff",
"type": "color"
}
},
"CTA Tertiary Colors": {
"base": {
"value": "#4a6490",
"type": "color"
},
"border": {
"value": "#4e6997",
"type": "color"
},
"border-disabled": {
"value": "#6882b1",
"type": "color"
},
"disabled": {
"value": "rgba(74, 100, 144, 0.4)",
"type": "color"
},
"focused": {
"value": "#6882b1",
"type": "color"
},
"hover": {
"value": "#3d5276",
"type": "color"
},
"pressed": {
"value": "#2b3a54",
"type": "color"
},
"text": {
"value": "#ffffff",
"type": "color"
},
"text-disabled": {
"value": "#ffffff",
"type": "color"
}
},
"Custom Colors": {
"eight": {
"value": "#d554b3",
"type": "color"
},
"five": {
"value": "#fbf5e2",
"type": "color"
},
"four": {
"value": "#fdfaf1",
"type": "color"
},
"nine": {
"value": "#ec8943",
"type": "color"
},
"one": {
"value": "#4aa35c",
"type": "color"
},
"seven": {
"value": "#7564be",
"type": "color"
},
"six": {
"value": "#ef8dd6",
"type": "color"
},
"ten": {
"value": "#da7a4a",
"type": "color"
},
"three": {
"value": "#ebbe52",
"type": "color"
},
"two": {
"value": "#5c2860",
"type": "color"
}
},
"Error Colors": {
"base": {
"value": "#f9e4e1",
"type": "color"
},
"border": {
"value": "#e9968c",
"type": "color"
},
"text": {
"value": "#d84836",
"type": "color"
}
},
"Info Colors": {
"base": {
"value": "#dae7fb",
"type": "color"
},
"border": {
"value": "#7eacf1",
"type": "color"
},
"text": {
"value": "#5290ec",
"type": "color"
}
},
"Standalone Colors": {
"border": {
"value": "#cfcfcf",
"type": "color"
},
"border-strong": {
"value": "#a0a0a0",
"type": "color"
},
"scrim": {
"value": "#393939",
"type": "color"
},
"shadow": {
"value": "#73c9a5",
"type": "color"
},
"text": {
"value": "#707070",
"type": "color"
},
"text-strong": {
"value": "#242930",
"type": "color"
}
},
"Success Colors": {
"base": {
"value": "#dcefe4",
"type": "color"
},
"border": {
"value": "#95d0af",
"type": "color"
},
"text": {
"value": "#3e8d61",
"type": "color"
}
},
"Warning Colors": {
"base": {
"value": "#ffdab6",
"type": "color"
},
"border": {
"value": "#f2c097",
"type": "color"
},
"text": {
"value": "#e78b3e",
"type": "color"
}
}
},
"default-colors-dark": {
"Accent Colors": {
"primary": {
"value": "#73c9a5",
"type": "color"
},
"secondary": {
"value": "#3a3e45",
"type": "color"
},
"tertiary": {
"value": "#c5cbd7",
"type": "color"
}
},
"Background Colors": {
"base": {
"value": "#242930",
"type": "color"
},
"code": {
"value": "#16191d",
"type": "color"
},
"overlay": {
"value": "#000000",
"type": "color"
},
"step-1": {
"value": "#1d2126",
"type": "color"
},
"step-2": {
"value": "#1d2126",
"type": "color"
}
},
"CTA Danger Colors": {
"base": {
"value": "#f9e4e1",
"type": "color"
},
"border": {
"value": "#e9968c",
"type": "color"
},
"border-disabled": {
"value": "#e9968c",
"type": "color"
},
"disabled": {
"value": "#faeceb",
"type": "color"
},
"focused": {
"value": "#d97973",
"type": "color"
},
"hover": {
"value": "#f1bdb6",
"type": "color"
},
"pressed": {
"value": "#d46a63",
"type": "color"
},
"text": {
"value": "#d84836",
"type": "color"
},
"text-disabled": {
"value": "#d84836",
"type": "color"
}
},
"CTA Primary Colors": {
"base": {
"value": "#73c9a5",
"type": "color"
},
"border": {
"value": "#73c9a5",
"type": "color"
},
"border-disabled": {
"value": "#73c9a5",
"type": "color"
},
"disabled": {
"value": "#f1faf6",
"type": "color"
},
"focused": {
"value": "#56977c",
"type": "color"
},
"hover": {
"value": "#68b595",
"type": "color"
},
"pressed": {
"value": "#5ca184",
"type": "color"
},
"text": {
"value": "#242930",
"type": "color"
},
"text-disabled": {
"value": "#242930",
"type": "color"
}
},
"CTA Secondary Colors": {
"base": {
"value": "#3a3e45",
"type": "color"
},
"border": {
"value": "#3a3e45",
"type": "color"
},
"border-disabled": {
"value": "#3a3e45",
"type": "color"
},
"disabled": {
"value": "#ebecec",
"type": "color"
},
"focused": {
"value": "#2c2f34",
"type": "color"
},
"hover": {
"value": "#34383e",
"type": "color"
},
"pressed": {
"value": "#2e3237",
"type": "color"
},
"text": {
"value": "#ffffff",
"type": "color"
},
"text-disabled": {
"value": "#ffffff",
"type": "color"
}
},
"CTA Tertiary Colors": {
"base": {
"value": "#4a6490",
"type": "color"
},
"border": {
"value": "#4e6997",
"type": "color"
},
"border-disabled": {
"value": "#6882b1",
"type": "color"
},
"disabled": {
"value": "rgba(74, 100, 144, 0.4)",
"type": "color"
},
"focused": {
"value": "#6882b1",
"type": "color"
},
"hover": {
"value": "#3d5276",
"type": "color"
},
"pressed": {
"value": "#2b3a54",
"type": "color"
},
"text": {
"value": "#ffffff",
"type": "color"
},
"text-disabled": {
"value": "#ffffff",
"type": "color"
}
},
"Custom Colors": {
"eight": {
"value": "#d554b3",
"type": "color"
},
"five": {
"value": "#222222",
"type": "color"
},
"four": {
"value": "#111111",
"type": "color"
},
"nine": {
"value": "#ec8943",
"type": "color"
},
"one": {
"value": "#4aa35c",
"type": "color"
},
"seven": {
"value": "#7564be",
"type": "color"
},
"six": {
"value": "#ef8dd6",
"type": "color"
},
"ten": {
"value": "#da7a4a",
"type": "color"
},
"three": {
"value": "#ebbe52",
"type": "color"
},
"two": {
"value": "#5c2860",
"type": "color"
}
},
"Error Colors": {
"base": {
"value": "#f9e4e1",
"type": "color"
},
"border": {
"value": "#e9968c",
"type": "color"
},
"text": {
"value": "#d84836",
"type": "color"
}
},
"Info Colors": {
"base": {
"value": "#dae7fb",
"type": "color"
},
"border": {
"value": "#7eacf1",
"type": "color"
},
"text": {
"value": "#5290ec",
"type": "color"
}
},
"Standalone Colors": {
"border": {
"value": "#c2c3c5",
"type": "color"
},
"border-strong": {
"value": "#a0a0a0",
"type": "color"
},
"scrim": {
"value": "#393939",
"type": "color"
},
"shadow": {
"value": "#73c9a5",
"type": "color"
},
"text": {
"value": "#d9d9d9",
"type": "color"
},
"text-strong": {
"value": "#ffffff",
"type": "color"
}
},
"Success Colors": {
"base": {
"value": "#dcefe4",
"type": "color"
},
"border": {
"value": "#95d0af",
"type": "color"
},
"text": {
"value": "#3e8d61",
"type": "color"
}
},
"Warning Colors": {
"base": {
"value": "#ffdab6",
"type": "color"
},
"border": {
"value": "#f2c097",
"type": "color"
},
"text": {
"value": "#e78b3e",
"type": "color"
}
}
}
}
The importance of colour in a website’s overall look and feel is well known. The right colour scheme can evoke emotions, create visual interest, and direct a user’s attention to specific elements on a page. That’s why the ftd colour scheme framework provides an easy and powerful way to define colour schemes and apply them to your website.
To start, you can choose from existing colour scheme packages or create your own custom colour scheme. To apply a colour scheme package on top of your package, you’ll need to import it into one of the module.
For example, let’s say you’re using the page component from doc-site
package
and want to apply the sailing-shark-cs scheme package on top of it. You first create
a new module, let’s say my-ds.ftd. Then you import sailing-shark-cs package module
and then create a new component called page there.
sailing-shark-cs
as a dependency into FASTN.ftd-- fastn.dependency: fastn-community.github.io/sailing-shark-cs
-- import: fastn-community.github.io/sailing-shark-cs as my-cs
-- import: fifthtry.github.io/doc-site as ds
-- component page:
children wrapper:
optional body body:
-- ds.page:
title: $page.title
body: $page.body
wrapper: $page.wrapper
colors: $my-cs.main
-- end: page
After creating my-ds.page component, use this in rest of the module of your package instead of ds.page.
Once you have imported the colour scheme package and created a new component my-ds.page, you can use it throughout your website instead of the ds.page component.
With just a few lines of code, you can dramatically change the look and feel of your website using the ftd colour scheme.