THEME

Label

Button

Page Title

1

2

3

9

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

Label Label Label Label Label

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

Home

Pocket

History

New

6

Service

Credit

Transfer

Cash

My Bills

2

Saved

Adding warmth and energy to your designs with the blog-template-1-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 blog-template-1-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": "#fd2e35",
      "type": "color"
    },
    "secondary": {
      "value": "#ef8435",
      "type": "color"
    },
    "tertiary": {
      "value": "#ffc136",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#f7f4f2",
      "type": "color"
    },
    "code": {
      "value": "#eaeaea",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#ffffff",
      "type": "color"
    },
    "step-2": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#f9e4e1",
      "type": "color"
    },
    "border": {
      "value": "#e9968c",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#fd2e35",
      "type": "color"
    },
    "border": {
      "value": "#fd2e35",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "type": "color"
    },
    "disabled": {
      "value": "#faad7b",
      "type": "color"
    },
    "focused": {
      "value": "#611c03",
      "type": "color"
    },
    "hover": {
      "value": "#fd2e35",
      "type": "color"
    },
    "pressed": {
      "value": "#611c03",
      "type": "color"
    },
    "text": {
      "value": "#fd2e35",
      "type": "color"
    },
    "text-disabled": {
      "value": "#65b693",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#ef8435",
      "type": "color"
    },
    "border": {
      "value": "#f3a063",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#ebe8e5",
      "type": "color"
    },
    "border": {
      "value": "#b0aeac",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "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": "#7eacf1",
      "type": "color"
    },
    "text": {
      "value": "#5290ec",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "rgba(34, 20, 41, 0.1)",
      "type": "color"
    },
    "border-strong": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#6f0100",
      "type": "color"
    },
    "text": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    },
    "text-strong": {
      "value": "rgb(34, 20, 41)",
      "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"
    }
  }
},
"default-colors-dark": {
  "Accent Colors": {
    "primary": {
      "value": "#f2de21",
      "type": "color"
    },
    "secondary": {
      "value": "#ef8435",
      "type": "color"
    },
    "tertiary": {
      "value": "#ffc136",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    },
    "code": {
      "value": "#2b303b",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#522d64",
      "type": "color"
    },
    "step-2": {
      "value": "#f4eded",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#f9e4e1",
      "type": "color"
    },
    "border": {
      "value": "#e9968c",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#f2de21",
      "type": "color"
    },
    "border": {
      "value": "#f2de21",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "type": "color"
    },
    "disabled": {
      "value": "#faad7b",
      "type": "color"
    },
    "focused": {
      "value": "#611c03",
      "type": "color"
    },
    "hover": {
      "value": "#8c2702",
      "type": "color"
    },
    "pressed": {
      "value": "#611c03",
      "type": "color"
    },
    "text": {
      "value": "#f2de21",
      "type": "color"
    },
    "text-disabled": {
      "value": "#65b693",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#ef8435",
      "type": "color"
    },
    "border": {
      "value": "#f3a063",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#ebe8e5",
      "type": "color"
    },
    "border": {
      "value": "#b0aeac",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "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": "#7eacf1",
      "type": "color"
    },
    "text": {
      "value": "#5290ec",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#f7f4f2",
      "type": "color"
    },
    "border-strong": {
      "value": "#f7f4f2",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#6f0100",
      "type": "color"
    },
    "text": {
      "value": "#d9d9d9",
      "type": "color"
    },
    "text-strong": {
      "value": "#d9d9d9",
      "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"
    }
  }
}
}

{
"default-colors-light": {
  "Accent Colors": {
    "primary": {
      "value": "#fd2e35",
      "type": "color"
    },
    "secondary": {
      "value": "#ef8435",
      "type": "color"
    },
    "tertiary": {
      "value": "#ffc136",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#f7f4f2",
      "type": "color"
    },
    "code": {
      "value": "#eaeaea",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#ffffff",
      "type": "color"
    },
    "step-2": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#f9e4e1",
      "type": "color"
    },
    "border": {
      "value": "#e9968c",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#fd2e35",
      "type": "color"
    },
    "border": {
      "value": "#fd2e35",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "type": "color"
    },
    "disabled": {
      "value": "#faad7b",
      "type": "color"
    },
    "focused": {
      "value": "#611c03",
      "type": "color"
    },
    "hover": {
      "value": "#fd2e35",
      "type": "color"
    },
    "pressed": {
      "value": "#611c03",
      "type": "color"
    },
    "text": {
      "value": "#fd2e35",
      "type": "color"
    },
    "text-disabled": {
      "value": "#65b693",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#ef8435",
      "type": "color"
    },
    "border": {
      "value": "#f3a063",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#ebe8e5",
      "type": "color"
    },
    "border": {
      "value": "#b0aeac",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "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": "#7eacf1",
      "type": "color"
    },
    "text": {
      "value": "#5290ec",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "rgba(34, 20, 41, 0.1)",
      "type": "color"
    },
    "border-strong": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#6f0100",
      "type": "color"
    },
    "text": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    },
    "text-strong": {
      "value": "rgb(34, 20, 41)",
      "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"
    }
  }
},
"default-colors-dark": {
  "Accent Colors": {
    "primary": {
      "value": "#f2de21",
      "type": "color"
    },
    "secondary": {
      "value": "#ef8435",
      "type": "color"
    },
    "tertiary": {
      "value": "#ffc136",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    },
    "code": {
      "value": "#2b303b",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#522d64",
      "type": "color"
    },
    "step-2": {
      "value": "#f4eded",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#f9e4e1",
      "type": "color"
    },
    "border": {
      "value": "#e9968c",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#f2de21",
      "type": "color"
    },
    "border": {
      "value": "#f2de21",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "type": "color"
    },
    "disabled": {
      "value": "#faad7b",
      "type": "color"
    },
    "focused": {
      "value": "#611c03",
      "type": "color"
    },
    "hover": {
      "value": "#8c2702",
      "type": "color"
    },
    "pressed": {
      "value": "#611c03",
      "type": "color"
    },
    "text": {
      "value": "#f2de21",
      "type": "color"
    },
    "text-disabled": {
      "value": "#65b693",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#ef8435",
      "type": "color"
    },
    "border": {
      "value": "#f3a063",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#ebe8e5",
      "type": "color"
    },
    "border": {
      "value": "#b0aeac",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "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": "#7eacf1",
      "type": "color"
    },
    "text": {
      "value": "#5290ec",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#f7f4f2",
      "type": "color"
    },
    "border-strong": {
      "value": "#f7f4f2",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#6f0100",
      "type": "color"
    },
    "text": {
      "value": "#d9d9d9",
      "type": "color"
    },
    "text-strong": {
      "value": "#d9d9d9",
      "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"
    }
  }
}
}

Lang:

json

Developed Using

fastn

Github Link

github.com/fastn-community/blog-template-1-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

Adding warmth and energy to your designs with the blog-template-1-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 blog-template-1-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": "#fd2e35",
      "type": "color"
    },
    "secondary": {
      "value": "#ef8435",
      "type": "color"
    },
    "tertiary": {
      "value": "#ffc136",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#f7f4f2",
      "type": "color"
    },
    "code": {
      "value": "#eaeaea",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#ffffff",
      "type": "color"
    },
    "step-2": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#f9e4e1",
      "type": "color"
    },
    "border": {
      "value": "#e9968c",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#fd2e35",
      "type": "color"
    },
    "border": {
      "value": "#fd2e35",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "type": "color"
    },
    "disabled": {
      "value": "#faad7b",
      "type": "color"
    },
    "focused": {
      "value": "#611c03",
      "type": "color"
    },
    "hover": {
      "value": "#fd2e35",
      "type": "color"
    },
    "pressed": {
      "value": "#611c03",
      "type": "color"
    },
    "text": {
      "value": "#fd2e35",
      "type": "color"
    },
    "text-disabled": {
      "value": "#65b693",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#ef8435",
      "type": "color"
    },
    "border": {
      "value": "#f3a063",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#ebe8e5",
      "type": "color"
    },
    "border": {
      "value": "#b0aeac",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "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": "#7eacf1",
      "type": "color"
    },
    "text": {
      "value": "#5290ec",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "rgba(34, 20, 41, 0.1)",
      "type": "color"
    },
    "border-strong": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#6f0100",
      "type": "color"
    },
    "text": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    },
    "text-strong": {
      "value": "rgb(34, 20, 41)",
      "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"
    }
  }
},
"default-colors-dark": {
  "Accent Colors": {
    "primary": {
      "value": "#f2de21",
      "type": "color"
    },
    "secondary": {
      "value": "#ef8435",
      "type": "color"
    },
    "tertiary": {
      "value": "#ffc136",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    },
    "code": {
      "value": "#2b303b",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#522d64",
      "type": "color"
    },
    "step-2": {
      "value": "#f4eded",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#f9e4e1",
      "type": "color"
    },
    "border": {
      "value": "#e9968c",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#f2de21",
      "type": "color"
    },
    "border": {
      "value": "#f2de21",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "type": "color"
    },
    "disabled": {
      "value": "#faad7b",
      "type": "color"
    },
    "focused": {
      "value": "#611c03",
      "type": "color"
    },
    "hover": {
      "value": "#8c2702",
      "type": "color"
    },
    "pressed": {
      "value": "#611c03",
      "type": "color"
    },
    "text": {
      "value": "#f2de21",
      "type": "color"
    },
    "text-disabled": {
      "value": "#65b693",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#ef8435",
      "type": "color"
    },
    "border": {
      "value": "#f3a063",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#ebe8e5",
      "type": "color"
    },
    "border": {
      "value": "#b0aeac",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "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": "#7eacf1",
      "type": "color"
    },
    "text": {
      "value": "#5290ec",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#f7f4f2",
      "type": "color"
    },
    "border-strong": {
      "value": "#f7f4f2",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#6f0100",
      "type": "color"
    },
    "text": {
      "value": "#d9d9d9",
      "type": "color"
    },
    "text-strong": {
      "value": "#d9d9d9",
      "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"
    }
  }
}
}

{
"default-colors-light": {
  "Accent Colors": {
    "primary": {
      "value": "#fd2e35",
      "type": "color"
    },
    "secondary": {
      "value": "#ef8435",
      "type": "color"
    },
    "tertiary": {
      "value": "#ffc136",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#f7f4f2",
      "type": "color"
    },
    "code": {
      "value": "#eaeaea",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#ffffff",
      "type": "color"
    },
    "step-2": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#f9e4e1",
      "type": "color"
    },
    "border": {
      "value": "#e9968c",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#fd2e35",
      "type": "color"
    },
    "border": {
      "value": "#fd2e35",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "type": "color"
    },
    "disabled": {
      "value": "#faad7b",
      "type": "color"
    },
    "focused": {
      "value": "#611c03",
      "type": "color"
    },
    "hover": {
      "value": "#fd2e35",
      "type": "color"
    },
    "pressed": {
      "value": "#611c03",
      "type": "color"
    },
    "text": {
      "value": "#fd2e35",
      "type": "color"
    },
    "text-disabled": {
      "value": "#65b693",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#ef8435",
      "type": "color"
    },
    "border": {
      "value": "#f3a063",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#ebe8e5",
      "type": "color"
    },
    "border": {
      "value": "#b0aeac",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "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": "#7eacf1",
      "type": "color"
    },
    "text": {
      "value": "#5290ec",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "rgba(34, 20, 41, 0.1)",
      "type": "color"
    },
    "border-strong": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#6f0100",
      "type": "color"
    },
    "text": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    },
    "text-strong": {
      "value": "rgb(34, 20, 41)",
      "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"
    }
  }
},
"default-colors-dark": {
  "Accent Colors": {
    "primary": {
      "value": "#f2de21",
      "type": "color"
    },
    "secondary": {
      "value": "#ef8435",
      "type": "color"
    },
    "tertiary": {
      "value": "#ffc136",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "rgb(34, 20, 41)",
      "type": "color"
    },
    "code": {
      "value": "#2b303b",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#522d64",
      "type": "color"
    },
    "step-2": {
      "value": "#f4eded",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#f9e4e1",
      "type": "color"
    },
    "border": {
      "value": "#e9968c",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#f2de21",
      "type": "color"
    },
    "border": {
      "value": "#f2de21",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "type": "color"
    },
    "disabled": {
      "value": "#faad7b",
      "type": "color"
    },
    "focused": {
      "value": "#611c03",
      "type": "color"
    },
    "hover": {
      "value": "#8c2702",
      "type": "color"
    },
    "pressed": {
      "value": "#611c03",
      "type": "color"
    },
    "text": {
      "value": "#f2de21",
      "type": "color"
    },
    "text-disabled": {
      "value": "#65b693",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#ef8435",
      "type": "color"
    },
    "border": {
      "value": "#f3a063",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#ebe8e5",
      "type": "color"
    },
    "border": {
      "value": "#b0aeac",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "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": "#65b693",
      "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": "#7eacf1",
      "type": "color"
    },
    "text": {
      "value": "#5290ec",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#f7f4f2",
      "type": "color"
    },
    "border-strong": {
      "value": "#f7f4f2",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#6f0100",
      "type": "color"
    },
    "text": {
      "value": "#d9d9d9",
      "type": "color"
    },
    "text-strong": {
      "value": "#d9d9d9",
      "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"
    }
  }
}
}

Lang:

json

Developed Using

fastn

Github Link

github.com/fastn-community/blog-template-1-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 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 blog-template-1-cs scheme package on top of it. You first create a new module, let’s say my-ds.ftd. Then you import blog-template-1-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 blog-template-1-cs as a dependency into FASTN.ftd

-- fastn.dependency: fastn-community.github.io/blog-template-1-cs

-- fastn.dependency: fastn-community.github.io/blog-template-1-cs

Lang:

ftd

my-ds.ftd module

-- import: fastn-community.github.io/blog-template-1-cs as my-cs
-- import: fastn-community.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

-- import: fastn-community.github.io/blog-template-1-cs as my-cs
-- import: fastn-community.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

Lang:

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

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/