Varku

Tea and Roses

3 min read

Design Philosophy

Tea and Roses is built starting from an E-Ink design transforming to a soft pastel pink palette with accessibility in mind. Starting with a linen paper white brings a more favourable and approachable light theme that doesn’t strain the eyes. Slate greys for the growing popular dark modes that allow colour to pop in contrast while not being overly darkened. Pink was chosen as the primary colour as it’s warm and easy on the eyes with a vast range of options for design. Greens to blues in the teal range selected as the complimentary colours to add pop and draw attention where necessary.

Accessibility

Colour Accessibility Web Accessibility

Visual: - Blindness - Low Vision - Colour-Blindness Auditory: - Deafness - Hard of Hearing Motor: - Inability to use mouse - Slow response times - Limited motor control Cognitive: - Learning disabilities - Distractability - Inability to remember or focus on large amounts of information

Colour Palette Codes

Grey Linen White Peach Salmon Seagreen

Grey - HEX:#525252 RGB:82 82 82 HSL:0deg 0% 32.16%

Linen White - HEX:#FFF1E5 RGB:255 241 229 HSL:27.69deg 100% 94.9%

Peach - HEX:#FDC6B5 RGB:253 198 181 HSL:14.17deg 94.74% 85.1%

Salmon - HEX:#FA9A85 RGB:250 154 133 HSL:10.77deg 92.13% 75.1%

Seagreen - HEX:#A3C7B2 RGB:163 199 178 HSL:145deg 24.32% 70.98%

Quartz4

  • colors: controls the theming of the site.
    • light: page background
    • lightgray: borders, graph links, search bar background, scroll bar, paragraph divider lines, code block background
    • gray: graph links on hover, heavier borders
    • darkgray: body text
    • dark: header text and icons, graph nodes
    • secondary: link colour, current graph node
    • tertiary: hover states and visited graph nodes
    • highlight: internal link background, highlighted text, highlighted lines of code
    • textHighlight: markdown highlighted text background
  • typography: what fonts to use. Any font available on Google Fonts works here.

    • title: font for the title of the site (optional, same as header by default)

    • header: font to use for headers

    • code: font for inline and block quotes

    • body: font for everything

      colors: { lightMode: { light: “#FFF1E5”, lightgray: “#dcdcdc”, gray: “#FA9A85”, darkgray: “#525252”, dark: “#FA9A85”, secondary: “#FA9A85”, tertiary: “#A3C7B2”, highlight: “rgba(163, 199, 178, 0.15)”, //rgba(143, 159, 169, 0.15)// textHighlight: “rgba(163, 199, 178, 0.35)”, }, darkMode: { light: “#525252”, lightgray: “#393639”, gray: “#FA9A85”, darkgray: “#d4d4d4”, dark: “#FA9A85”, secondary: “#FA9A85”, tertiary: “#84a59d”, highlight: “rgba(163, 199, 178, 0.15)”, textHighlight: “rgba(163, 199, 178, 0.35)”, },

Fonts

Lexend?

tons of temp text

here because I want to see how it treats the above text for selecting now

Graph View