Overview

Here it is! The Design Guide for crofu.

During the design process, the designer (me! ghostcatte) has opted to use Tailwind CSS v4. Anywhere CSS classes or variables are mentioned without being defined in this document, they come from Tailwind. A best effort has been made to include exact measurements or definitions, but some may have been excluded.

Colors

Theme Colors

Themes are made up of 5 main colors

base - generally the lighter "background" of the overall page
alternate-1 - usually a contrasting color used for headers, certain panels
alternate-2 - an alternate contrasting color used for minor highlighting
accent-1 - accent color used for headers, borders, emphasis
accent-2 - alternate accent

Plus 2 font colors

base-text - a font color that generally looks good on the base background
alternate-text - a font color that would be lost on the base, but looks best on alternate-1 background



/* tailwind input.css */
@theme {
    [data-theme="purpeach"] {
        --color-base-text: #1a1b1e;
        --color-alternate-text: #F0ECEE;
        --color-base: #F0ECEE;
        --color-alternate-1: #544162;
        --color-alternate-2: #705A89;
        --color-accent-1: #BBA1BA;
        --color-accent-2: #f3aea4;
    }
}


<!-- index.html -->
<html data-theme="purpeach">
    <!-- your content -->
</html>

Buttons

Base buttons

There are two main variants of base buttons. button-v1 can be thought of generally as the "primary" button, but which is preferred may depend on the background behind it and the intention of the button.

In the page header, button-v1 is used as the currently active/selected page, while button-v2 can be used for other pages pages.

Here's all the combinations:

base

alternate-1

alternate-2

accent-1

accent-2



.button-v1 {
    background-color: var(--color-accent-2);
    color: var(--color-alternate-1);
}
.button-v2 {
    background-color: var(--color-alternate-2);
    color: var(--color-accent-2);
}
.button-v1, .button-v2 {
    cursor:pointer;

    /* so that a tags used as buttons will style appropriately */
    display: inline-block;
    text-decoration: none;

    /* tailwind class: rounded-md */
    border-radius: var(--radius-md);
    /* tailwind class: px-3.5 */
    padding-inline: calc(var(--spacing) * 3.5);
    /* tailwind class: py-1.5 */
    padding-block: calc(var(--spacing) * 1.5);
    /* tailwind-class: shadow-md */
    box-shadow: var(--shadow-md);
}

.button-v1:hover, .button-v2:hover {
    /* tailwind class: hover:bg-base  */
    background-color: var(--color-base);
    color: var(--color-alternate-2);
}
.button-v1:focus-visible, .button-v2:focus-visible {
    /* tailwind class: focus-visible:outline-2 */
    outline-width: 2px;
    /* tailwind class: focus-visible:outline-offset-2 */
    outline-offset: 2px;
    /* tailwind class: focus-visible:outline-white */
    outline-color: var(--color-white);
}

CTA buttons

CTA buttons are used on landing pages and you want to strongly emphasize a button action. CTA buttons are constructed using the .button-v1 and .button-v2 classes in addition to a .cta class,

ie:

<button class="button-v1 cta">.button-v1</button>

base

alternate-1

alternate-2

accent-1

accent-2



.cta {
    /* tailwind class: font-bold */
    font-weight: 700;
}
.button-v1.cta {
    border: 2px solid var(--color-alternate-2);
}
.button-v2.cta {
    border: 2px solid var(--color-accent-1);
}

Borders and rounding

Borders are used for emphasis. The page header includes an accented border, and panels by default are bordered.

In general, sharp edges are avoided. Panels and buttons have rounding.



/* panels use tailwind class .rounded-md */
border-radius: var(--radius-md);

/* panels use tailwind classes: .border-2 .border-accent-2 */
border: 2px solid var(--color-accent-2);



/* buttons use tailwind class .rounded-md */
border-radius: var(--radius-md);