THEME
misty-gray-cs
misty-gray-cs: color scheme
Dark / Light mode
Label
Button
Button
Page Title
1
2
3
9
Label
Label
Restricted
Accepted
In-progress
2,729 Like
273 Comment
Mauris ullamcorper tortor sed purus interdum, fermentum efficitur est dictu.
Patrica AVA
UI Designer
fastn
LabelLabelLabelLabelLabel
Button
Button
We transform ideas into digital outcomes.
We are an award-winning strategic design company that provides consultancy services and help you create outstanding digital products.
Button
2,729 Like
273 Comment
Mauris ullamcorper tortor sed purus interdum, fermentum efficitur est dictu.
Patrica AVA
UI Designer
2,729 Like
273 Comment
Mauris ullamcorper tortor sed purus interdum, fermentum efficitur est dictu.
Patrica AVA
UI Designer
2,729 Like
273 Comment
Mauris ullamcorper tortor sed purus interdum, fermentum efficitur est dictu.
Patrica AVA
UI Designer
Heading
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Heading
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Heading
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Heading
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Fastn
Copyright © 2023 - FifthTry.com
Label
Button
Fastn
Home
Pocket
History
New
6
Service
Credit
Transfer
Cash
My Bills
2
Saved
Adding warmth and energy to your designs with the misty-gray-cs color scheme
The colours we use in our designs can have a significant impact on the mood and feelings they inspire. The perfect colour palette may take your design to the next level, whether you’re creating a website, app, or anything else. The misty-gray-cs colour scheme is ideal for designs that aim to portray strength, warmth, and growth.
Figma tokens json
{
"default-colors-light": {
  "Accent Colors": {
    "primary": {
      "value": "#24b07e",
      "type": "color"
    },
    "secondary": {
      "value": "#37114b",
      "type": "color"
    },
    "tertiary": {
      "value": "#c5cbd7",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#f5f5f5",
      "type": "color"
    },
    "code": {
      "value": "#eaeaea",
      "type": "color"
    },
    "overlay": {
      "value": "#000000",
      "type": "color"
    },
    "step-1": {
      "value": "#f4f6f8",
      "type": "color"
    },
    "step-2": {
      "value": "#f6f6f6",
      "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": "#d84836",
      "type": "color"
    },
    "text-disabled": {
      "value": "#feffff",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#24b07e",
      "type": "color"
    },
    "border": {
      "value": "#24b07e",
      "type": "color"
    },
    "border-disabled": {
      "value": "#6dd59569",
      "type": "color"
    },
    "disabled": {
      "value": "#e9f7f2",
      "type": "color"
    },
    "focused": {
      "value": "#1b845f",
      "type": "color"
    },
    "hover": {
      "value": "#209e71",
      "type": "color"
    },
    "pressed": {
      "value": "#1d8d65",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    },
    "text-disabled": {
      "value": "#50b968eb",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#37114b",
      "type": "color"
    },
    "border": {
      "value": "#37114b",
      "type": "color"
    },
    "border-disabled": {
      "value": "#2b8074",
      "type": "color"
    },
    "disabled": {
      "value": "#ebe7ed",
      "type": "color"
    },
    "focused": {
      "value": "#290d38",
      "type": "color"
    },
    "hover": {
      "value": "#320f44",
      "type": "color"
    },
    "pressed": {
      "value": "#2c0e3c",
      "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": "#24ae7d",
      "type": "color"
    },
    "four": {
      "value": "#1d8d65",
      "type": "color"
    },
    "nine": {
      "value": "#ec8943",
      "type": "color"
    },
    "one": {
      "value": "#209e71",
      "type": "color"
    },
    "seven": {
      "value": "#7564be",
      "type": "color"
    },
    "six": {
      "value": "#ef8dd6",
      "type": "color"
    },
    "ten": {
      "value": "#da7a4a",
      "type": "color"
    },
    "three": {
      "value": "#166a4c",
      "type": "color"
    },
    "two": {
      "value": "#1b845f",
      "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": "#eeeeee",
      "type": "color"
    },
    "border-strong": {
      "value": "#24b07e",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#24b07e",
      "type": "color"
    },
    "text": {
      "value": "#36454fcc",
      "type": "color"
    },
    "text-strong": {
      "value": "#36454f",
      "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": "#24b07e",
      "type": "color"
    },
    "secondary": {
      "value": "#37114b",
      "type": "color"
    },
    "tertiary": {
      "value": "#c5cbd7",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#36454f",
      "type": "color"
    },
    "code": {
      "value": "#13181c",
      "type": "color"
    },
    "overlay": {
      "value": "#000000",
      "type": "color"
    },
    "step-1": {
      "value": "#2b373f",
      "type": "color"
    },
    "step-2": {
      "value": "#20292f",
      "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": "#d84836",
      "type": "color"
    },
    "text-disabled": {
      "value": "#feffff",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#24b07e",
      "type": "color"
    },
    "border": {
      "value": "#24b07e",
      "type": "color"
    },
    "border-disabled": {
      "value": "#6dd59569",
      "type": "color"
    },
    "disabled": {
      "value": "#e9f7f2",
      "type": "color"
    },
    "focused": {
      "value": "#1b845f",
      "type": "color"
    },
    "hover": {
      "value": "#209e71",
      "type": "color"
    },
    "pressed": {
      "value": "#1d8d65",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    },
    "text-disabled": {
      "value": "#50b968eb",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#37114b",
      "type": "color"
    },
    "border": {
      "value": "#37114b",
      "type": "color"
    },
    "border-disabled": {
      "value": "#2b8074",
      "type": "color"
    },
    "disabled": {
      "value": "#ebe7ed",
      "type": "color"
    },
    "focused": {
      "value": "#290d38",
      "type": "color"
    },
    "hover": {
      "value": "#320f44",
      "type": "color"
    },
    "pressed": {
      "value": "#2c0e3c",
      "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": "#166a4c",
      "type": "color"
    },
    "four": {
      "value": "#1b845f",
      "type": "color"
    },
    "nine": {
      "value": "#ec8943",
      "type": "color"
    },
    "one": {
      "value": "#24b07e",
      "type": "color"
    },
    "seven": {
      "value": "#7564be",
      "type": "color"
    },
    "six": {
      "value": "#ef8dd6",
      "type": "color"
    },
    "ten": {
      "value": "#da7a4a",
      "type": "color"
    },
    "three": {
      "value": "#1d8d65",
      "type": "color"
    },
    "two": {
      "value": "#209e71",
      "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": "#eeeeee40",
      "type": "color"
    },
    "border-strong": {
      "value": "#24b07e",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#24b07e",
      "type": "color"
    },
    "text": {
      "value": "#ebecedcc",
      "type": "color"
    },
    "text-strong": {
      "value": "#ebeced",
      "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"
    }
  }
}
}
Developed Using
fastn
Github Link
github.com/fastn-community/misty-gray-cs
License Information
BSD 3-Clause License
Author Information
Contributors
Discord Channel
discord.gg/bucrdvptYd
How to use this colour palette
How to use?
How to modify a colour palette
fastn.com/modify-cs
How to create a colour palette
fastn.com/figma-to-fastn-cs

How to use this colour scheme

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 cheme package on top of your package, you’ll need to import it into FASTN.ftd.

Option 1: for documentation templates like doc-site

For example, let’s say you’re using the page component from doc-site package and want to apply the misty-gray-cs scheme package on top of it.

To add color scheme to your fastn doc-site. Edit your FASTN.ftd file and add color scheme dependency into it.

In the below example, we are using misty-gray-cs color scheme.

Add color scheme dependency into your FASTN.ftd file as shown in below example:
-- fastn.dependency: fastn-community.github.io/misty-gray-cs

Now modify FASTN/ds.ftd module which is already added inside your fastn package.

Import misty-gray-cs dependency into FASTN/ds.ftd
-- import: fastn-community.github.io/misty-gray-cs

Change -- component page colors property ftd.color-scheme colors: $ftd.default-colors with ftd.color-scheme colors: $misty-gray-cs.main

replace this line of FASTN/ds.ftd file:
-- ftd.color-scheme color-scheme: $ftd.default-colors
with:
-- ftd.color-scheme color-scheme: $misty-gray-cs.main
With just a few lines of code, you can dramatically change the look and feel of your website using the ftd colour scheme.

Option 2: for custom fastn projects

Add color scheme dependency into your FASTN.ftd file as shown in below example:
-- fastn.dependency: fastn-community.github.io/misty-gray-cs
Now modify ftd file and import misty-gray-cs into ftd file
-- import: fastn-community.github.io/misty-gray-cs

Now add $misty-gray-cs.main to your component, as shown in below example:

Copy below code snippet inside your ftd file, then deploy and test
-- example: This is example of colors used from `misty-gray-cs`

-- component example:
caption title:
ftd.color-scheme color-scheme: $misty-gray-cs.main

-- ftd.text: $example.title
role: $inherited.types.heading-hero
color: $inherited.colors.text

-- end: example
Enjoy the look and feel of your website using misty-gray-cs colour scheme.
Standalone Colors
Background Colors
CTA Primary Colors
CTA Secondary Colors
CTA Tertiary Colors
CTA Danger Colors
Error Colors
Success Colors
Warning Colors
Info Colors
Accent Colors
Custom Colors
Get in touch!
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.
GitHub:
github.com/fastn-stack/fastn
Discord:
discord.gg/bucrdvptYd
Tutorials:
fastn.com/expander/hello-world/-/build/
Copyright © 2023 - FifthTry
Powered by