Fastn Color Scheme
from Figma jsonIt happens quite often that we get a hold of some nice color-scheme package which we believe would look good on our pages but we don’t want to use the same color-scheme as it is. Sometimes, we want to do some tweaks on top of that already good looking color-scheme and create our own super awesome color-scheme specific for our websites.
In ftd
, you can create your own color-scheme package from the exported fastn color-scheme json generated from figma. If you have come here, you might be already familiar with using fastn color-scheme json in Figma using Token Studio for Figma
plugin. If not, then visit this guide.
Token Studio for figma
(Figma Tokens) plugin installed, then awesome. If not, then visit the above link.Download the below json code as a new json file named forest-cs.json
by clicking on the download icon in the code-block below.
Note:
You can also get this json from its color documentation{ "forest-cs-light": { "Accent Colors": { "primary": { "value": "#4ed42d", "type": "color" }, "secondary": { "value": "#4fb2df", "type": "color" }, "tertiary": { "value": "#c5cbd7", "type": "color" } }, "Background Colors": { "base": { "value": "#e5e6e2", "type": "color" }, "code": { "value": "#eaeaea", "type": "color" }, "overlay": { "value": "rgba(0, 0, 0, 0.8)", "type": "color" }, "step-1": { "value": "#293434", "type": "color" }, "step-2": { "value": "#7c9e9d", "type": "color" } }, "CTA Danger Colors": { "base": { "value": "#f9e4e1", "type": "color" }, "border": { "value": "#e9968c", "type": "color" }, "border-disabled": { "value": "#2b8074", "type": "color" }, "disabled": { "value": "#faeceb", "type": "color" }, "focused": { "value": "#d97973", "type": "color" }, "hover": { "value": "#f1bdb6", "type": "color" }, "pressed": { "value": "#d46a63", "type": "color" }, "text": { "value": "#fffbfe", "type": "color" }, "text-disabled": { "value": "#feffff", "type": "color" } }, "CTA Primary Colors": { "base": { "value": "#0d712c", "type": "color" }, "border": { "value": "#2b8074", "type": "color" }, "border-disabled": { "value": "#6dd59569", "type": "color" }, "disabled": { "value": "#6dd59569", "type": "color" }, "focused": { "value": "#195c2e", "type": "color" }, "hover": { "value": "#129039", "type": "color" }, "pressed": { "value": "#0a690b", "type": "color" }, "text": { "value": "#feffff", "type": "color" }, "text-disabled": { "value": "#50b968eb", "type": "color" } }, "CTA Secondary Colors": { "base": { "value": "#4fb2df", "type": "color" }, "border": { "value": "#209fdb", "type": "color" }, "border-disabled": { "value": "#2b8074", "type": "color" }, "disabled": { "value": "rgba(79, 178, 223, 0.4)", "type": "color" }, "focused": { "value": "#5ea4c3", "type": "color" }, "hover": { "value": "#61b5dc", "type": "color" }, "pressed": { "value": "#1da7e6", "type": "color" }, "text": { "value": "#ffffff", "type": "color" }, "text-disabled": { "value": "#feffff", "type": "color" } }, "CTA Tertiary Colors": { "base": { "value": "#556375", "type": "color" }, "border": { "value": "#e2e4e7", "type": "color" }, "border-disabled": { "value": "#2b8074", "type": "color" }, "disabled": { "value": "rgba(85, 99, 117, 0.4)", "type": "color" }, "focused": { "value": "#4a4d51", "type": "color" }, "hover": { "value": "#636d7a", "type": "color" }, "pressed": { "value": "#3b4047", "type": "color" }, "text": { "value": "#ffffff", "type": "color" }, "text-disabled": { "value": "#feffff", "type": "color" } }, "Custom Colors": { "eight": { "value": "#d554b3", "type": "color" }, "five": { "value": "#eb57be", "type": "color" }, "four": { "value": "#7a65c7", "type": "color" }, "nine": { "value": "#ec8943", "type": "color" }, "one": { "value": "#ed753a", "type": "color" }, "seven": { "value": "#7564be", "type": "color" }, "six": { "value": "#ef8dd6", "type": "color" }, "ten": { "value": "#da7a4a", "type": "color" }, "three": { "value": "#8fdcf8", "type": "color" }, "two": { "value": "#f3db5f", "type": "color" } }, "Error Colors": { "base": { "value": "#2a2a24", "type": "color" }, "border": { "value": "#df2b2b", "type": "color" }, "text": { "value": "#f5bdbb", "type": "color" } }, "Info Colors": { "base": { "value": "#252f2a", "type": "color" }, "border": { "value": "#252f2a", "type": "color" }, "text": { "value": "#252f2a", "type": "color" } }, "Standalone Colors": { "border": { "value": "#434547", "type": "color" }, "border-strong": { "value": "#919192", "type": "color" }, "scrim": { "value": "#007f9b", "type": "color" }, "shadow": { "value": "#007f9b", "type": "color" }, "text": { "value": "#556f68", "type": "color" }, "text-strong": { "value": "#ffffff", "type": "color" } }, "Success Colors": { "base": { "value": "#282f25", "type": "color" }, "border": { "value": "#3d741f", "type": "color" }, "text": { "value": "#e3f0c4", "type": "color" } }, "Warning Colors": { "base": { "value": "#2a2f24", "type": "color" }, "border": { "value": "#966220", "type": "color" }, "text": { "value": "#fbefba", "type": "color" } } }, "forest-cs-dark": { "Accent Colors": { "primary": { "value": "#4ed42d", "type": "color" }, "secondary": { "value": "#4fb2df", "type": "color" }, "tertiary": { "value": "#c5cbd7", "type": "color" } }, "Background Colors": { "base": { "value": "#131a13", "type": "color" }, "code": { "value": "#2b303b", "type": "color" }, "overlay": { "value": "rgba(0, 0, 0, 0.8)", "type": "color" }, "step-1": { "value": "#182517", "type": "color" }, "step-2": { "value": "#233221", "type": "color" } }, "CTA Danger Colors": { "base": { "value": "#f9e4e1", "type": "color" }, "border": { "value": "#e9968c", "type": "color" }, "border-disabled": { "value": "#2b8074", "type": "color" }, "disabled": { "value": "#faeceb", "type": "color" }, "focused": { "value": "#d97973", "type": "color" }, "hover": { "value": "#f1bdb6", "type": "color" }, "pressed": { "value": "#d46a63", "type": "color" }, "text": { "value": "#1c1b1f", "type": "color" }, "text-disabled": { "value": "#feffff", "type": "color" } }, "CTA Primary Colors": { "base": { "value": "#0d712c", "type": "color" }, "border": { "value": "#2b8074", "type": "color" }, "border-disabled": { "value": "#6dd59569", "type": "color" }, "disabled": { "value": "#6dd59569", "type": "color" }, "focused": { "value": "#195c2e", "type": "color" }, "hover": { "value": "#129039", "type": "color" }, "pressed": { "value": "#0a690b", "type": "color" }, "text": { "value": "#feffff", "type": "color" }, "text-disabled": { "value": "#50b968eb", "type": "color" } }, "CTA Secondary Colors": { "base": { "value": "#4fb2df", "type": "color" }, "border": { "value": "#209fdb", "type": "color" }, "border-disabled": { "value": "#2b8074", "type": "color" }, "disabled": { "value": "rgba(79, 178, 223, 0.4)", "type": "color" }, "focused": { "value": "#5ea4c3", "type": "color" }, "hover": { "value": "#61b5dc", "type": "color" }, "pressed": { "value": "#1da7e6", "type": "color" }, "text": { "value": "#ffffff", "type": "color" }, "text-disabled": { "value": "#feffff", "type": "color" } }, "CTA Tertiary Colors": { "base": { "value": "#556375", "type": "color" }, "border": { "value": "#e2e4e7", "type": "color" }, "border-disabled": { "value": "#2b8074", "type": "color" }, "disabled": { "value": "rgba(85, 99, 117, 0.4)", "type": "color" }, "focused": { "value": "#4a4d51", "type": "color" }, "hover": { "value": "#636d7a", "type": "color" }, "pressed": { "value": "#3b4047", "type": "color" }, "text": { "value": "#ffffff", "type": "color" }, "text-disabled": { "value": "#feffff", "type": "color" } }, "Custom Colors": { "eight": { "value": "#d554b3", "type": "color" }, "five": { "value": "#eb57be", "type": "color" }, "four": { "value": "#7a65c7", "type": "color" }, "nine": { "value": "#ec8943", "type": "color" }, "one": { "value": "#ed753a", "type": "color" }, "seven": { "value": "#7564be", "type": "color" }, "six": { "value": "#ef8dd6", "type": "color" }, "ten": { "value": "#da7a4a", "type": "color" }, "three": { "value": "#8fdcf8", "type": "color" }, "two": { "value": "#f3db5f", "type": "color" } }, "Error Colors": { "base": { "value": "#2a2a24", "type": "color" }, "border": { "value": "#df2b2b", "type": "color" }, "text": { "value": "#f5bdbb", "type": "color" } }, "Info Colors": { "base": { "value": "#252f2a", "type": "color" }, "border": { "value": "#252f2a", "type": "color" }, "text": { "value": "#252f2a", "type": "color" } }, "Standalone Colors": { "border": { "value": "#434547", "type": "color" }, "border-strong": { "value": "#919192", "type": "color" }, "scrim": { "value": "#007f9b", "type": "color" }, "shadow": { "value": "#007f9b", "type": "color" }, "text": { "value": "#9ea89e", "type": "color" }, "text-strong": { "value": "#ffffff", "type": "color" } }, "Success Colors": { "base": { "value": "#282f25", "type": "color" }, "border": { "value": "#3d741f", "type": "color" }, "text": { "value": "#e3f0c4", "type": "color" } }, "Warning Colors": { "base": { "value": "#2a2f24", "type": "color" }, "border": { "value": "#966220", "type": "color" }, "text": { "value": "#fbefba", "type": "color" } } } }
Tools
-> Load from File/Folder or Preset
as shown belowFile
tab, click on Choose File
optionforest-cs.json
file which you saved as shown below.forest-cs-light
checkbox to set the light color-scheme in your page.Background Colors -> base
inside your figma plugin once you select the rectangle as shown below.Standalone Colors -> text
Guess what we don’t like any of these two colors at all in this light color scheme.
Let’s say we want the Background Colors -> base
to be some light green color (for eg. #90EE90) instead of the boring white :(
Background Colors -> base
and click on Edit token option as shown belowsailing-shark-cs
github repositoryThis repo is a template repo for fastn color-schemes, we will create our own color-scheme repo using this. To visit this repo, click here
To do that, click on theUse this template
button then Create a new repository
as shown belowCreate repository from template
button.Then Paste your copied FTD code.
Scroll down and commit directly to the main branch by press on Commit changes button as shown below.Deploy from the branch
and select the branch to gh-pages
, then hit Save as shown below.Go to your (<github-username>.github.io/<repo>
) page to see your color-scheme in action.
heulitig.github.io/my-color-scheme
as shown belowHave a question or need help?
Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.
Join our Discord channel and share your thoughts, suggestion, question etc.
Connect with our community!We welcome you to join our Discord community today.
We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.