THEME
dark-flame-cs
dark-flame-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
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
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 dark-flame-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 dark-flame-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": "#ef8435",
      "type": "color"
    },
    "secondary": {
      "value": "#ebe8e5",
      "type": "color"
    },
    "tertiary": {
      "value": "#c5cbd7",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#ffffff",
      "type": "color"
    },
    "code": {
      "value": "#f5f5f5",
      "type": "color"
    },
    "overlay": {
      "value": "#000000",
      "type": "color"
    },
    "step-1": {
      "value": "#f8f8f8",
      "type": "color"
    },
    "step-2": {
      "value": "#f5f5f5",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#d84836",
      "type": "color"
    },
    "border": {
      "value": "#d84836",
      "type": "color"
    },
    "border-disabled": {
      "value": "#f9e4e1",
      "type": "color"
    },
    "disabled": {
      "value": "#f9e4e1",
      "type": "color"
    },
    "focused": {
      "value": "#c93927",
      "type": "color"
    },
    "hover": {
      "value": "#d13b29",
      "type": "color"
    },
    "pressed": {
      "value": "#c93927",
      "type": "color"
    },
    "text": {
      "value": "#f0f0f0",
      "type": "color"
    },
    "text-disabled": {
      "value": "#eeb1aa",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#ef8435",
      "type": "color"
    },
    "border": {
      "value": "#f3a063",
      "type": "color"
    },
    "border-disabled": {
      "value": "#fad9c0",
      "type": "color"
    },
    "disabled": {
      "value": "#fce5d4",
      "type": "color"
    },
    "focused": {
      "value": "#ee7b26",
      "type": "color"
    },
    "hover": {
      "value": "#d77730",
      "type": "color"
    },
    "pressed": {
      "value": "#bf6a2a",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    },
    "text-disabled": {
      "value": "#f4af7b",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#f9f9f9",
      "type": "color"
    },
    "border": {
      "value": "#b0aeac",
      "type": "color"
    },
    "border-disabled": {
      "value": "#c3c2c0",
      "type": "color"
    },
    "disabled": {
      "value": "#f9f9f9",
      "type": "color"
    },
    "focused": {
      "value": "#f9f9f9",
      "type": "color"
    },
    "hover": {
      "value": "#f5f5f5",
      "type": "color"
    },
    "pressed": {
      "value": "#f0f0f0",
      "type": "color"
    },
    "text": {
      "value": "#333333",
      "type": "color"
    },
    "text-disabled": {
      "value": "#b2b2b2",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#4a6490",
      "type": "color"
    },
    "border": {
      "value": "#4e6997",
      "type": "color"
    },
    "border-disabled": {
      "value": "#304655",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(74, 100, 144, 0.4)",
      "type": "color"
    },
    "focused": {
      "value": "#2b2b2b",
      "type": "color"
    },
    "hover": {
      "value": "#2b2b2b",
      "type": "color"
    },
    "pressed": {
      "value": "#242424",
      "type": "color"
    },
    "text": {
      "value": "#333333",
      "type": "color"
    },
    "text-disabled": {
      "value": "#bfbfbf",
      "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": "#ffefee",
      "type": "color"
    },
    "border": {
      "value": "#d9503f",
      "type": "color"
    },
    "text": {
      "value": "#d13b29",
      "type": "color"
    }
  },
  "Info Colors": {
    "base": {
      "value": "#ecf4fc",
      "type": "color"
    },
    "border": {
      "value": "#7eacf1",
      "type": "color"
    },
    "text": {
      "value": "#196ce6",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#d2d2d2",
      "type": "color"
    },
    "border-strong": {
      "value": "#9f9f9f",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#ef8435",
      "type": "color"
    },
    "text": {
      "value": "#7c7c7c",
      "type": "color"
    },
    "text-strong": {
      "value": "#333333",
      "type": "color"
    }
  },
  "Success Colors": {
    "base": {
      "value": "#f3fff6",
      "type": "color"
    },
    "border": {
      "value": "#43a86f",
      "type": "color"
    },
    "text": {
      "value": "#3a9061",
      "type": "color"
    }
  },
  "Warning Colors": {
    "base": {
      "value": "#fffaf2",
      "type": "color"
    },
    "border": {
      "value": "#e4b301",
      "type": "color"
    },
    "text": {
      "value": "#d9aa01",
      "type": "color"
    }
  }
},
"default-colors-dark": {
  "Accent Colors": {
    "primary": {
      "value": "#ef8435",
      "type": "color"
    },
    "secondary": {
      "value": "#ebe8e5",
      "type": "color"
    },
    "tertiary": {
      "value": "#c5cbd7",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#000000",
      "type": "color"
    },
    "code": {
      "value": "#21222c",
      "type": "color"
    },
    "overlay": {
      "value": "#000000",
      "type": "color"
    },
    "step-1": {
      "value": "#111111",
      "type": "color"
    },
    "step-2": {
      "value": "#2b2b2b",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#d84836",
      "type": "color"
    },
    "border": {
      "value": "#d84836",
      "type": "color"
    },
    "border-disabled": {
      "value": "#f9e4e1",
      "type": "color"
    },
    "disabled": {
      "value": "#431611",
      "type": "color"
    },
    "focused": {
      "value": "#c93927",
      "type": "color"
    },
    "hover": {
      "value": "#d13b29",
      "type": "color"
    },
    "pressed": {
      "value": "#c93927",
      "type": "color"
    },
    "text": {
      "value": "#f0f0f0",
      "type": "color"
    },
    "text-disabled": {
      "value": "#82332a",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#ef8435",
      "type": "color"
    },
    "border": {
      "value": "#f3a063",
      "type": "color"
    },
    "border-disabled": {
      "value": "#fad9c0",
      "type": "color"
    },
    "disabled": {
      "value": "#f3250f",
      "type": "color"
    },
    "focused": {
      "value": "#ee7b26",
      "type": "color"
    },
    "hover": {
      "value": "#d77730",
      "type": "color"
    },
    "pressed": {
      "value": "#bf6a2a",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    },
    "text-disabled": {
      "value": "#714524",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#1c1c1c",
      "type": "color"
    },
    "border": {
      "value": "#474747",
      "type": "color"
    },
    "border-disabled": {
      "value": "#474747",
      "type": "color"
    },
    "disabled": {
      "value": "#1c1c1c",
      "type": "color"
    },
    "focused": {
      "value": "#1c1c1c",
      "type": "color"
    },
    "hover": {
      "value": "#242424",
      "type": "color"
    },
    "pressed": {
      "value": "#2b2b2b",
      "type": "color"
    },
    "text": {
      "value": "#f7f7f7",
      "type": "color"
    },
    "text-disabled": {
      "value": "#5e5e5e",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#4a6490",
      "type": "color"
    },
    "border": {
      "value": "#4e6997",
      "type": "color"
    },
    "border-disabled": {
      "value": "#f1dac0",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(74, 100, 144, 0.4)",
      "type": "color"
    },
    "focused": {
      "value": "#c2c2c2",
      "type": "color"
    },
    "hover": {
      "value": "#fafafa",
      "type": "color"
    },
    "pressed": {
      "value": "#ffffff",
      "type": "color"
    },
    "text": {
      "value": "#f7f7f7",
      "type": "color"
    },
    "text-disabled": {
      "value": "#474747",
      "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": "#4f2a25",
      "type": "color"
    },
    "border": {
      "value": "#e9968c",
      "type": "color"
    },
    "text": {
      "value": "#d13b29",
      "type": "color"
    }
  },
  "Info Colors": {
    "base": {
      "value": "#233a5d",
      "type": "color"
    },
    "border": {
      "value": "#3e83ea",
      "type": "color"
    },
    "text": {
      "value": "#5290ec",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#434547",
      "type": "color"
    },
    "border-strong": {
      "value": "#737373",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#ef8435",
      "type": "color"
    },
    "text": {
      "value": "#b8b8b8",
      "type": "color"
    },
    "text-strong": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "Success Colors": {
    "base": {
      "value": "#033a1b",
      "type": "color"
    },
    "border": {
      "value": "#95d0af",
      "type": "color"
    },
    "text": {
      "value": "#3e8d61",
      "type": "color"
    }
  },
  "Warning Colors": {
    "base": {
      "value": "#3b2c1ee6",
      "type": "color"
    },
    "border": {
      "value": "#f2de97",
      "type": "color"
    },
    "text": {
      "value": "#fecb1a",
      "type": "color"
    }
  }
}
}
dark-flame-cs.json
Lang:
json
Developed Using
fastn
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 dark-flame-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 dark-flame-cs color scheme.

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

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

Import dark-flame-cs dependency into FASTN/ds.ftd
-- import: fastn-community.github.io/dark-flame-cs
Lang:
ftd

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

replace this line of FASTN/ds.ftd file:
-- ftd.color-scheme color-scheme: $ftd.default-colors
Lang:
ftd
with:
-- ftd.color-scheme color-scheme: $dark-flame-cs.main
Lang:
ftd
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/dark-flame-cs
Lang:
ftd
Now modify ftd file and import dark-flame-cs into ftd file
-- import: fastn-community.github.io/dark-flame-cs
Lang:
ftd

Now add $dark-flame-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 `dark-flame-cs`

-- component example:
caption title:
ftd.color-scheme color-scheme: $dark-flame-cs.main

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

-- end: example
Lang:
ftd
Enjoy the look and feel of your website using dark-flame-cs colour scheme.
Standalone Colors
#434547
$inherited.colors.border
We use this color for border color.
#737373
$inherited.colors.border-strong
We use this color for strong border color.
#B8B8B8
$inherited.colors.text
We use this color for text.
#FFFFFF
$inherited.colors.text-strong
We use this color for strong text.
#EF8435
$inherited.colors.shadow
We use this color for shadow.
#393939
$inherited.colors.scrim
We use this color for scrim.
Background Colors
#000000
$inherited.colors.background.base
We use this color for base background.
#111111
$inherited.colors.background.step-1
We use this color for background step-1 such as sidebar etc.
#2b2b2b
$inherited.colors.background.step-2
We use this color as background step-2 such as for background card etc.
#21222c
$inherited.colors.background.code
We use this color for background code.
#000000
$inherited.colors.background.overlay
We use this color for background overlay.
CTA Primary Colors
#EF8435
$inherited.colors.cta-primary.base
We use this color as primary main button background color.
#D77730
$inherited.colors.cta-primary.hover
We use this color as primary main button hover background color.
#F3250F
$inherited.colors.cta-primary.disabled
We use this color as primary main button disabled background color.
#BF6A2A
$inherited.colors.cta-primary.pressed
We use this color as primary main button pressed background color.
#EE7B26
$inherited.colors.cta-primary.focused
We use this color as primary main button focus background color.
#F3A063
$inherited.colors.cta-primary.border
We use this color as primary main button border color.
#ffffff
$inherited.colors.cta-primary.text
We use this color as primary main button text color.
CTA Secondary Colors
#1C1C1C
$inherited.colors.cta-secondary.base
We use this color as secondary main button background color.
#242424
$inherited.colors.cta-secondary.hover
We use this color as secondary main button hover background color.
#1C1C1C
$inherited.colors.cta-secondary.disabled
We use this color as secondary main button disabled background color.
#2B2B2B
$inherited.colors.cta-secondary.pressed
We use this color as secondary main button pressed background color.
#1C1C1C
$inherited.colors.cta-secondary.focused
We use this color as secondary main button focus background color.
#474747
$inherited.colors.cta-secondary.border
We use this color as secondary main button border color.
#F7F7F7
$inherited.colors.cta-secondary.text
We use this color as secondary main button text color.
CTA Tertiary Colors
#4A6490
$inherited.colors.cta-tertiary.base
We use this color as tertiary main button background color.
#FAFAFA
$inherited.colors.cta-tertiary.hover
We use this color as tertiary main button hover background color.
rgba(74, 100, 144, 0.4)
$inherited.colors.cta-tertiary.disabled
We use this color as tertiary main button disabled background color.
#FFFFFF
$inherited.colors.cta-tertiary.pressed
We use this color as tertiary main button pressed background color.
#C2C2C2
$inherited.colors.cta-tertiary.focused
We use this color as tertiary main button focus background color.
#4e6997
$inherited.colors.cta-tertiary.border
We use this color as tertiary main button border color.
#F7F7F7
$inherited.colors.cta-tertiary.text
We use this color as tertiary main button text color.
CTA Danger Colors
#D84836
$inherited.colors.cta-danger.base
We use this color as warning main button background color.
#D13B29
$inherited.colors.cta-danger.hover
We use this color as warning main button hover background color.
#431611
$inherited.colors.cta-danger.disabled
We use this color as warning main button disabled background color.
#C93927
$inherited.colors.cta-danger.pressed
We use this color as warning main button pressed background color.
#C93927
$inherited.colors.cta-danger.focused
We use this color as warning main button focus background color.
#D84836
$inherited.colors.cta-danger.border
We use this color as warning main button border color.
#F0F0F0
$inherited.colors.cta-danger.text
We use this color as warning main button text color.
Error Colors
#4F2A25
$inherited.colors.error.base
We use this color as base error color.
#E9968C
#E9968C
#4F2A25
$inherited.colors.error.btb
Error button with border, text and background of the color shown from top to bottom in this color box.
#D13B29
$inherited.colors.error.text
We use this color as error text color.
#E9968C
$inherited.colors.error.border
We use this color as error border color.
Success Colors
#033A1B
$inherited.colors.success.base
We use this color as base success color.
#95D0AF
#95D0AF
#033A1B
$inherited.colors.success.btb
Success button with border, text and background of the color shown from top to bottom in this color box.
#3E8D61
$inherited.colors.success.text
We use this color as success text color.
#95D0AF
$inherited.colors.success.border
We use this color as success border color.
Warning Colors
#3b2c1ee6
$inherited.colors.warning.base
We use this color as base warning color.
#F2DE97
#F2DE97
#3b2c1ee6
$inherited.colors.warning.btb
Warning button with border, text and background of the color shown from top to bottom in this color box.
#FECB1A
$inherited.colors.warning.text
We use this color as warning text color.
#F2DE97
$inherited.colors.warning.border
We use this color as warning border color.
Info Colors
#233a5d
$inherited.colors.info.base
We use this color as base info color.
#3E83EA
#3E83EA
#233a5d
$inherited.colors.info.btb
Info button with border, text and background of the color shown from top to bottom in this color box.
#5290EC
$inherited.colors.info.text
We use this color as info text color.
#3E83EA
$inherited.colors.info.border
We use this color as info border color.
Accent Colors
#EF8435
$inherited.colors.accent.primary
We use this color as primary accent color.
#EBE8E5
$inherited.colors.accent.secondary
We use this color as secondary accent color.
#c5cbd7
$inherited.colors.accent.tertiary
We use this color as tertiary accent color.
Custom Colors
#4AA35C
$inherited.colors.custom.one
We use this color for custom one.
#5C2860
$inherited.colors.custom.two
We use this color for custom two.
#EBBE52
$inherited.colors.custom.three
We use this color for custom three.
#111111
$inherited.colors.custom.four
We use this color for custom four.
#222222
$inherited.colors.custom.five
We use this color for custom five.
#ef8dd6
$inherited.colors.custom.six
We use this color for custom six.
#7564be
$inherited.colors.custom.seven
We use this color for custom seven.
#d554b3
$inherited.colors.custom.eight
We use this color for custom eight.
#ec8943
$inherited.colors.custom.nine
We use this color for custom nine.
#da7a4a
$inherited.colors.custom.ten
We use this color for custom ten.
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.
Copyright © 2023 - FifthTry