THEME

saturated-sunset-cs

Adding warmth and energy to your designs with the saturated-sunset-cs Color Scheme

Label

Button

Page Title

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

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

Fastn

Label

Button

Fastn

Home

Pocket

History

New

Service

Credit

Transfer

Cash

My Bills

Saved

Adding warmth and energy to your designs with the saturated-sunset-cs Color Scheme

Saturated sunset color scheme in design, which is inspired by the warm, vibrant colors of the sun as it sets over the horizon. The color scheme consists of deep reds, oranges, and yellows, and can evoke feelings of excitement, passion, warmth, and adventure. The text highlights the benefits of using this color scheme in various design projects and recommends using the saturated-sunset-cs package for easy incorporation of the color palette into designs. Overall, the brief promotes the saturated sunset color scheme as a way to elevate the mood and emotions of designs.

Figma tokens json

{
"saturated-sunset-cs-light": {
  "Accent Colors": {
    "primary": {
      "value": "#a53006",
      "type": "color"
    },
    "secondary": {
      "value": "#ef8435",
      "type": "color"
    },
    "tertiary": {
      "value": "#ffc136",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#faebd7",
      "type": "color"
    },
    "code": {
      "value": "#eaeaea",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#e3bc81",
      "type": "color"
    },
    "step-2": {
      "value": "#faad7b",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#f9e4e1",
      "type": "color"
    },
    "border": {
      "value": "#e9968c",
      "type": "color"
    },
    "border-disabled": {
      "value": "#a53006",
      "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": "#a53006",
      "type": "color"
    },
    "border": {
      "value": "#a53006",
      "type": "color"
    },
    "border-disabled": {
      "value": "#a5300661",
      "type": "color"
    },
    "disabled": {
      "value": "#a5300661",
      "type": "color"
    },
    "focused": {
      "value": "#611c03",
      "type": "color"
    },
    "hover": {
      "value": "#8c2702",
      "type": "color"
    },
    "pressed": {
      "value": "#611c03",
      "type": "color"
    },
    "text": {
      "value": "#feffff",
      "type": "color"
    },
    "text-disabled": {
      "value": "#a5300652",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#ef8435",
      "type": "color"
    },
    "border": {
      "value": "#f3a063",
      "type": "color"
    },
    "border-disabled": {
      "value": "#a53006",
      "type": "color"
    },
    "disabled": {
      "value": "#fad9c0",
      "type": "color"
    },
    "focused": {
      "value": "#b36328",
      "type": "color"
    },
    "hover": {
      "value": "#d77730",
      "type": "color"
    },
    "pressed": {
      "value": "#bf6a2a",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    },
    "text-disabled": {
      "value": "#feffff",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#ebe8e5",
      "type": "color"
    },
    "border": {
      "value": "#b0aeac",
      "type": "color"
    },
    "border-disabled": {
      "value": "#a53006",
      "type": "color"
    },
    "disabled": {
      "value": "#f9f8f7",
      "type": "color"
    },
    "focused": {
      "value": "#b0aeac",
      "type": "color"
    },
    "hover": {
      "value": "#d4d1ce",
      "type": "color"
    },
    "pressed": {
      "value": "#bcbab7",
      "type": "color"
    },
    "text": {
      "value": "#333333",
      "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": "#f9e4e1",
      "type": "color"
    },
    "border": {
      "value": "#e9968c",
      "type": "color"
    },
    "text": {
      "value": "#d84836",
      "type": "color"
    }
  },
  "Info Colors": {
    "base": {
      "value": "#dae7fb",
      "type": "color"
    },
    "border": {
      "value": "#dae7fb",
      "type": "color"
    },
    "text": {
      "value": "#dae7fb",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#222222",
      "type": "color"
    },
    "border-strong": {
      "value": "#d9d9d9",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#6f0100",
      "type": "color"
    },
    "text": {
      "value": "#707070",
      "type": "color"
    },
    "text-strong": {
      "value": "#333333",
      "type": "color"
    }
  },
  "Success Colors": {
    "base": {
      "value": "#dcefe4",
      "type": "color"
    },
    "border": {
      "value": "#95d0af",
      "type": "color"
    },
    "text": {
      "value": "#3e8d61",
      "type": "color"
    }
  },
  "Warning Colors": {
    "base": {
      "value": "#fdf7f1",
      "type": "color"
    },
    "border": {
      "value": "#f2c097",
      "type": "color"
    },
    "text": {
      "value": "#e78b3e",
      "type": "color"
    }
  }
},
"saturated-sunset-cs-dark": {
  "Accent Colors": {
    "primary": {
      "value": "#a53006",
      "type": "color"
    },
    "secondary": {
      "value": "#ef8435",
      "type": "color"
    },
    "tertiary": {
      "value": "#ffc136",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#240002",
      "type": "color"
    },
    "code": {
      "value": "#2b303b",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#550605",
      "type": "color"
    },
    "step-2": {
      "value": "#3e0e11",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#f9e4e1",
      "type": "color"
    },
    "border": {
      "value": "#e9968c",
      "type": "color"
    },
    "border-disabled": {
      "value": "#a53006",
      "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": "#a53006",
      "type": "color"
    },
    "border": {
      "value": "#a53006",
      "type": "color"
    },
    "border-disabled": {
      "value": "#a5300661",
      "type": "color"
    },
    "disabled": {
      "value": "#a5300661",
      "type": "color"
    },
    "focused": {
      "value": "#611c03",
      "type": "color"
    },
    "hover": {
      "value": "#8c2702",
      "type": "color"
    },
    "pressed": {
      "value": "#611c03",
      "type": "color"
    },
    "text": {
      "value": "#feffff",
      "type": "color"
    },
    "text-disabled": {
      "value": "#a5300652",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#ef8435",
      "type": "color"
    },
    "border": {
      "value": "#f3a063",
      "type": "color"
    },
    "border-disabled": {
      "value": "#a53006",
      "type": "color"
    },
    "disabled": {
      "value": "#fad9c0",
      "type": "color"
    },
    "focused": {
      "value": "#b36328",
      "type": "color"
    },
    "hover": {
      "value": "#d77730",
      "type": "color"
    },
    "pressed": {
      "value": "#bf6a2a",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    },
    "text-disabled": {
      "value": "#feffff",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#ebe8e5",
      "type": "color"
    },
    "border": {
      "value": "#b0aeac",
      "type": "color"
    },
    "border-disabled": {
      "value": "#a53006",
      "type": "color"
    },
    "disabled": {
      "value": "#f9f8f7",
      "type": "color"
    },
    "focused": {
      "value": "#b0aeac",
      "type": "color"
    },
    "hover": {
      "value": "#d4d1ce",
      "type": "color"
    },
    "pressed": {
      "value": "#bcbab7",
      "type": "color"
    },
    "text": {
      "value": "#333333",
      "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": "#f9e4e1",
      "type": "color"
    },
    "border": {
      "value": "#e9968c",
      "type": "color"
    },
    "text": {
      "value": "#d84836",
      "type": "color"
    }
  },
  "Info Colors": {
    "base": {
      "value": "#dae7fb",
      "type": "color"
    },
    "border": {
      "value": "#dae7fb",
      "type": "color"
    },
    "text": {
      "value": "#dae7fb",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#ffffff",
      "type": "color"
    },
    "border-strong": {
      "value": "#3e0306",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#6f0100",
      "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": "#fdf7f1",
      "type": "color"
    },
    "border": {
      "value": "#f2c097",
      "type": "color"
    },
    "text": {
      "value": "#e78b3e",
      "type": "color"
    }
  }
}
}

Developed Using

fastn

Github Link

github.com/FifthTry/color-doc

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 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 saturated-sunset-cs scheme package on top of it. You first create a new module, let’s say my-ds.ftd. Then you import saturated-sunset-cs package module and then create a new component called page there.

Here’s what your my-ds.ftd module and FASTN.ftd import would look like:

Add saturated-sunset-cs as dependency into FASTN.ftd

-- fastn.dependency: saturated-sunset-cs

my-ds.ftd module

-- import: fifthtry.github.io/saturated-sunset-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

my-ds.ftd

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.

Standalone colors

#222222

$inherited.colors.border

We use this color for border color.

#D9D9D9

$inherited.colors.border-strong

We use this color for strong border color.

#707070

$inherited.colors.text

We use this color for text.

#333333

$inherited.colors.text-strong

We use this color for strong text.

#6f0100

$inherited.colors.shadow

We use this color for shadow.

#393939

$inherited.colors.scrim

We use this color for scrim.

Background Colors

#faebd7

$inherited.colors.background.base

We use this color for base background.

#e3bc81

$inherited.colors.background.step-1

We use this color for background step-1 such as sidebar etc.

#faad7b

$inherited.colors.background.step-2

We use this color as background step-2 such as for background card etc.

#eaeaea

$inherited.colors.background.code

We use this color for background code.

rgba(0, 0, 0, 0.8)

$inherited.colors.background.overlay

We use this color for background overlay.

CTA Primary Colors

#a53006

$inherited.colors.cta-primary.base

We use this color as primary main button background color.

#8c2702

$inherited.colors.cta-primary.hover

We use this color as primary main button hover background color.

#a5300661

$inherited.colors.cta-primary.disabled

We use this color as primary main button disabled background color.

#611c03

$inherited.colors.cta-primary.pressed

We use this color as primary main button pressed background color.

#611c03

$inherited.colors.cta-primary.focused

We use this color as primary main button focus background color.

#a53006

$inherited.colors.cta-primary.border

We use this color as primary main button border color.

#feffff

$inherited.colors.cta-primary.text

We use this color as primary main button text color.

CTA Secondary Colors

#EF8435

$inherited.colors.cta-secondary.base

We use this color as secondary main button background color.

#D77730

$inherited.colors.cta-secondary.hover

We use this color as secondary main button hover background color.

#FAD9C0

$inherited.colors.cta-secondary.disabled

We use this color as secondary main button disabled background color.

#BF6A2A

$inherited.colors.cta-secondary.pressed

We use this color as secondary main button pressed background color.

#B36328

$inherited.colors.cta-secondary.focused

We use this color as secondary main button focus background color.

#F3A063

$inherited.colors.cta-secondary.border

We use this color as secondary main button border color.

#FFFFFF

$inherited.colors.cta-secondary.text

We use this color as secondary main button text color.

CTA Tertiary Colors

#EBE8E5

$inherited.colors.cta-tertiary.base

We use this color as tertiary main button background color.

#D4D1CE

$inherited.colors.cta-tertiary.hover

We use this color as tertiary main button hover background color.

#F9F8F7

$inherited.colors.cta-tertiary.disabled

We use this color as tertiary main button disabled background color.

#BCBAB7

$inherited.colors.cta-tertiary.pressed

We use this color as tertiary main button pressed background color.

#B0AEAC

$inherited.colors.cta-tertiary.focused

We use this color as tertiary main button focus background color.

#B0AEAC

$inherited.colors.cta-tertiary.border

We use this color as tertiary main button border color.

#333333

$inherited.colors.cta-tertiary.text

We use this color as tertiary main button text color.

CTA Danger Colors

#f9e4e1

$inherited.colors.cta-danger.base

We use this color as warning main button background color.

#f1bdb6

$inherited.colors.cta-danger.hover

We use this color as warning main button hover background color.

#faeceb

$inherited.colors.cta-danger.disabled

We use this color as warning main button disabled background color.

#d46a63

$inherited.colors.cta-danger.pressed

We use this color as warning main button pressed background color.

#d97973

$inherited.colors.cta-danger.focused

We use this color as warning main button focus background color.

#e9968c

$inherited.colors.cta-danger.border

We use this color as warning main button border color.

#FFFBFE

$inherited.colors.cta-danger.text

We use this color as warning main button text color.

Error Colors

#F9E4E1

$inherited.colors.error.base

We use this color as base error color.

#E9968C

#F9E4E1

$inherited.colors.error.btb

Error button with border, text and background of the color shown from top to bottom in this color box.

#D84836

$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

#DCEFE4

$inherited.colors.success.base

We use this color as base success color.

#95D0AF

#DCEFE4

$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

#FDF7F1

$inherited.colors.warning.base

We use this color as base warning color.

#F2C097

#FDF7F1

$inherited.colors.warning.btb

Warning button with border, text and background of the color shown from top to bottom in this color box.

#E78B3E

$inherited.colors.warning.text

We use this color as warning text color.

#F2C097

$inherited.colors.warning.border

We use this color as warning border color.

Info Colors

#DAE7FB

$inherited.colors.info.base

We use this color as base info color.

#DAE7FB

$inherited.colors.info.btb

Info button with border, text and background of the color shown from top to bottom in this color box.

#DAE7FB

$inherited.colors.info.text

We use this color as info text color.

#DAE7FB

$inherited.colors.info.border

We use this color as info border color.

Accent Colors

#a53006

$inherited.colors.accent.primary

We use this color as primary accent color.

#EF8435

$inherited.colors.accent.secondary

We use this color as secondary accent color.

#ffc136

$inherited.colors.accent.tertiary

We use this color as tertiary accent color.

Custom Colors

#ed753a

$inherited.colors.custom.one

We use this color for custom one.

#f3db5f

$inherited.colors.custom.two

We use this color for custom two.

#8fdcf8

$inherited.colors.custom.three

We use this color for custom three.

#7a65c7

$inherited.colors.custom.four

We use this color for custom four.

#eb57be

$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.

GitHub:

github.com/fastn-stack/fastn

Discord:

discord.gg/bucrdvptYd

Tutorials:

fastn.com/expander/hello-world/-/build/