# ConsentLeaf

**Cookie consent, beautifully simple.**

Brand system v1.0 · September 2026

## The idea

ConsentLeaf makes a small but important interaction feel considered. The name
suggests a lightweight presence and room to grow. The experience should feel
like a good host: clear, welcoming, and comfortable with every answer.

Write the product name **ConsentLeaf** in prose. The logo uses lowercase
**consentleaf**. Use the full name on first mention.

## Logo

The symbol combines a rounded leaf silhouette with an open C in negative space.
The wordmark is based on Manrope at weight 650 with adjusted spacing. Every
letter is outlined; the SVG files do not need a font installed.

| Asset | Use |
| --- | --- |
| assets/logo.svg | Primary signature: teal symbol, forest lettering |
| assets/logo-inverse.svg | Mint symbol, ivory lettering on a dark surface |
| assets/logo-mono.svg | One-colour printing and light backgrounds |
| assets/logo-white.svg | Reversed one-colour applications |
| assets/mark.svg | Favicons, app icons, small brand accents |
| assets/mark-inverse.svg | Symbol on dark backgrounds |
| assets/mark-mono.svg | One-colour symbol |

Allow clear space of at least half the leaf's height around the signature.
Minimum display widths: 120 px for the full signature, 20 px for the symbol.
The favicon may use the symbol at 16 px. Keep the proportions intact. Use the
provided colour variants; avoid shadows, rotations, gradients, or outlines.
The leaf can inform larger decorative shapes, but the logo itself stays intact.

## Colour

| Name | Hex | Role |
| --- | --- | --- |
| Leaf teal | #0E7C86 | Primary actions, links, logo |
| Deep teal | #0B6570 | Primary hover state |
| Forest | #172E2C | Text; dark widget surface |
| Warm ivory | #FBF9F6 | Main website background |
| White | #FFFFFF | Light widget and elevated cards |
| Soft mint | #E6F4EF | Supporting surfaces and badges |
| Sage | #B5D7CD | Illustrations and quiet accents |
| Muted forest | #526360 | Secondary text on light surfaces |
| Deep forest | #102A27 | Dark marketing backgrounds and dark button text |
| Bright mint | #8DD5C7 | Dark-mode actions, focus rings, and logo |
| Bright mint hover | #AFE7D9 | Dark-mode primary hover state |
| Muted mint | #B4C6BF | Secondary text on dark surfaces |

Use ivory and white for most light layouts; reserve strong colour for actions
and occasional feature panels. Sage is decorative, not a text colour on white.
The CSS tokens are in tokens.css.

### Contrast

Normal-size text must meet a 4.5:1 contrast ratio. Use white labels on teal
buttons, and deep forest labels on bright mint buttons in dark mode.
Do not put white labels on the dark-mode mint fill.
Focus rings are solid teal on light backgrounds and bright mint on dark ones.
Respect both the user's zoom setting and reduced-motion preference.

## Typography

- **Manrope:** website, documentation, headings, interface text. Body 400;
  navigation 600; headings 600; small buttons 700.
- **Newsreader italic:** short phrases in marketing headlines. Weight 400,
  optical size 48. Use for one phrase at a time.
- **System sans serif:** embedded consent widget. It never downloads fonts
  onto a customer's site.
- **System monospace:** code and colour values.

The included WOFF2 files are Latin subsets. Manrope remains variable. The
Newsreader file is a static italic instance. Both are self-hosted and licensed
under the SIL Open Font License; their notices are included in fonts/.

### Scale

| Element | Desktop | Mobile |
| --- | --- | --- |
| Website hero | 64–76 px, line-height 1.1 | 48–52 px |
| Section title | 36–40 px, line-height 1.2 | 30–34 px |
| Main body | 15–16 px, line-height 1.7–1.85 | 14–16 px |
| Widget title | 17–18 px | 17–18 px |
| Widget body | 14–15 px, line-height 1.55 | 14–15 px |

Use fluid layouts. The compact embedded preview reduces its copy size slightly
to fit the small demonstration window; the library's normal defaults stay in
the 14–18 px range.

## Shape, space, and motion

- Spacing unit: 4 px. Common steps: 8, 12, 16, 24, 32, 48, 64.
- Website controls: 8 px radius.
- Consent buttons: 12 px radius, minimum 44 px height.
- Consent modals: 20 px radius.
- Toggles: rounded pill, 44 × 24 px with a 20 px knob.
- Borders: 1 px, quiet neutral colours.
- Shadows: diffuse with a subtle green tint in light mode.
- Modal motion: 300 ms, cubic-bezier(.2, .8, .2, 1).
- Reduced motion: disable transitions and smooth scrolling.

## Consent experience

Accept and reject have the same fill, font, height, and prominence by default.
Optional categories start disabled. Essential categories are read-only.
Preferences explain each category, and a persistent control allows reopening
the settings. Keep the customer's branding primary: the ConsentLeaf symbol in
the demonstration banner is an optional integration detail.

Copy examples:

| Place | Copy |
| --- | --- |
| Banner heading | A little note on cookies |
| Accept | Accept all |
| Reject | Reject optional |
| Preferences link | Choose preferences |
| Preferences heading | Make yourself comfortable |
| Save | Save my choices |
| Rejection confirmation | Only the essentials. Just as you asked. |

Explain which cookies a site actually uses. The included demonstration connects
no analytics or marketing services and stores only the demonstration consent
choice. Configure categories, scripts, and policy information for the real site.

## Voice

Use plain words, short sentences, and concrete actions. Be warm without being
cutesy. Explain the choice without pressuring the visitor. Avoid guilt, urgency,
preselected optional consent, and blanket claims that the tool makes a website
legally compliant.

## Implementation

- demo/consentleaf/: responsive website and live preview.
- brand/index.html: interactive brand guide.
- src/scss/abstracts/: source of the light and dark widget themes.
- dist/: rebuilt library and split CSS components.
- docs/essential/consentleaf.md: integration instructions for this fork.
- pnpm brand:dev: serves the website, brand guide, and built docs locally.
- pnpm brand:kit: rebuilds the downloadable ZIP.

ConsentLeaf is a fork of CookieConsent v3.1.0 by Orest Bida. The upstream MIT
license remains in the repository. The CookieConsent API, bundle filenames,
and existing package metadata retain their upstream names for compatibility.
The product identity is finalized; publication and a public domain are separate
release tasks.