# Sundayable design system

Status: Brand system 2.0, current as of 2026-08-16.

This file is the implementation source of truth for Sundayable visual design.
The rendered brand book is the human-readable reference:

- Canonical entrypoint: <https://brand.sundayable.ca/>
- Web: <https://brand.sundayable.ca/guidelines/v2.0/>
- Public asset library: <https://brand.sundayable.ca/downloads/v2/>
- Complete asset kit: <https://brand.sundayable.ca/downloads/v2/sundayable-brand-assets-v2.zip>
- Machine-readable manifest: <https://brand.sundayable.ca/downloads/v2/manifest.json>
- Source: `../brand-hub/guidelines/v2.0/`
- Paste-ready tokens: `../brand-hub/guidelines/v2.0/tokens.css`
- Voice: `BRAND-VOICE.md`

If this file and the rendered brand book disagree, the rendered brand book wins
and this file must be corrected. The existing `brand-tokens.css` and
`brand-tokens.md` describe brand kit v1.3. Do not import or mix them into a 2.0
surface.

## Brand idea

The product is time. Sundayable does the marketing work that follows an owner
home, so the owner's Sunday becomes theirs again.

Positioning:

> A marketing team that works on Sunday, so owners do not have to.

The operating relationship is fixed:

- People stay visible.
- AI removes repetitive production work.
- The owner approves the result.
- Nothing ships unseen.

Every touchpoint should return attention, time, or certainty. If it does none of
the three, it is decoration.

## Principles

1. **Sell the time back.** Lead with what disappears from the owner's week, not
   the machinery that removes it.
2. **Keep humans visible.** Strategy, taste, relationships, and judgment belong
   to people. AI stays in the method.
3. **Show the work.** Use an output, number, screen, or artifact before describing
   it.
4. **Nothing ships unseen.** Every automated action ends at an approval gate.

Personality: warm, exact, and quietly optimistic. The system should feel more
formal than playful, more restrained than expressive, and more systematic than
handmade without becoming cold.

## Wordmark

The supplied wordmark is the identity.

- Use the artwork. Never typeset or redraw it.
- Use one wordmark per surface unless a repeated navigation context requires it.
- Clear space is `1/2 H` on all four sides, measured from the artwork bounds.
- Recommended minimum digital width: `112px`.
- Minimum print width: `32mm`; increase it on textured stock.
- Use only two colourways: Ink on light, Butter on dark.
- Do not create a symbol, monogram, or lockup. The favicon-only `S` described
  below is the sole exception.
- Do not stretch, rotate, outline, recolour, or add effects.
- Do not place it over busy image detail.

### Wordmark files

Use SVG by default. It contains outlined vector paths, so it stays sharp and
does not depend on an installed font. PNG files have transparent backgrounds
and are supplied only for software that cannot place SVG.

| Colourway | SVG | PNG 1000px | PNG 3000px |
| --- | --- | --- | --- |
| Ink on light | [Download SVG](https://brand.sundayable.ca/downloads/v2/logos/sundayable-wordmark-ink.svg) | [Download PNG](https://brand.sundayable.ca/downloads/v2/logos/sundayable-wordmark-ink-1000.png) | [Download PNG](https://brand.sundayable.ca/downloads/v2/logos/sundayable-wordmark-ink-3000.png) |
| Butter on dark | [Download SVG](https://brand.sundayable.ca/downloads/v2/logos/sundayable-wordmark-butter.svg) | [Download PNG](https://brand.sundayable.ca/downloads/v2/logos/sundayable-wordmark-butter-1000.png) | [Download PNG](https://brand.sundayable.ca/downloads/v2/logos/sundayable-wordmark-butter-3000.png) |

Local source files:

- Ink: `../brand-hub/guidelines/v2.0/assets/images/wordmark.svg`
- Butter: `../brand-hub/guidelines/v2.0/assets/images/wordmark-butter.svg`

## Favicon

The favicon uses the first letterform from the approved wordmark. This is a
small-space exception, not a new marketing mark.

- Use it for browser tabs, bookmarks, touch icons, and app icons only.
- Never place it beside the wordmark.
- Never use it as a social logo, campaign mark, monogram, or decorative badge.
- Do not recolour, redraw, crop, or stretch it.

| Format | Public file |
| --- | --- |
| Vector master | [SVG](https://brand.sundayable.ca/downloads/v2/favicons/sundayable-favicon.svg) |
| Multi-size browser icon | [ICO](https://brand.sundayable.ca/downloads/v2/favicons/favicon.ico) |
| Browser PNG | [16px](https://brand.sundayable.ca/downloads/v2/favicons/favicon-16.png) · [32px](https://brand.sundayable.ca/downloads/v2/favicons/favicon-32.png) · [48px](https://brand.sundayable.ca/downloads/v2/favicons/favicon-48.png) |
| Touch and app PNG | [180px](https://brand.sundayable.ca/downloads/v2/favicons/favicon-180.png) · [512px](https://brand.sundayable.ca/downloads/v2/favicons/favicon-512.png) |

Implementation:

```html
<link rel="icon" href="https://brand.sundayable.ca/downloads/v2/favicons/favicon.ico" sizes="any">
<link rel="icon" href="https://brand.sundayable.ca/downloads/v2/favicons/sundayable-favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="https://brand.sundayable.ca/downloads/v2/favicons/favicon-180.png">
```

## Colour

Use warm light fields, dark structure, and a small amount of atmospheric blue.

| Token | Hex | Role |
| --- | --- | --- |
| Butter | `#FFFFEB` | Default page and section ground |
| Card | `#FFFFF6` | Raised panels and content cards |
| Ink | `#1B2233` | Headings, wordmark, controls, structural fills |
| Night | `#0A0F1E` | Dark finales and night states |
| Body | `#45422F` | Long-form text on light grounds |
| Muted | `#7C7761` | Large metadata and secondary labels |
| Line | `#E2DCC6` | Decorative borders and separators |
| Horizon | `#82BCE2` | Atmospheric light, never general UI decoration |
| Approved | `#3E7C4F` | Approval and status only |

Default frame ratio:

- 70% light ground
- 20% dark structure
- 10% atmosphere

Do not use pure white as the page ground. Do not recolour the wordmark. Approval
green is a state signal, not a second brand accent.

### Contrast

| Pair | Ratio | Rule |
| --- | ---: | --- |
| Ink on Butter | `15.69:1` | AAA; body, display, and controls |
| Body on Butter | `10.01:1` | AAA; long-form copy |
| Butter on Night | `18.87:1` | AAA; dark sections and finales |
| Muted on Butter | `4.45:1` | Use at `18px+` only |
| Line on Butter | `1.36:1` | Decorative boundaries only; never text |

Photography does not guarantee contrast. Never put working text in the bright
sunrise band without a dark scrim.

## Typography

Self-host the supplied WOFF2 files. Do not substitute fonts on a finished
surface.

| Role | Family | Weight | Use |
| --- | --- | --- | --- |
| Display | Gabarito | 600, 700 | Headlines, prices, buttons, actions |
| Text | Figtree | 400, 500 | Body copy and navigation |
| Evidence | IBM Plex Mono | 500 | Labels, timings, proof, and system state |

IBM Plex Mono is not a paragraph face.

### Font files

Working type must remain type. Use WOFF2 in websites and apps; do not turn
headings or body copy into SVG or PNG. WOFF2 preserves the typeface at every
size, keeps text selectable, and avoids raster distortion.

- Ready-to-import CSS: <https://brand.sundayable.ca/downloads/v2/fonts/fonts.css>
- Gabarito: [600 WOFF2](https://brand.sundayable.ca/downloads/v2/fonts/gabarito-600.woff2) · [700 WOFF2](https://brand.sundayable.ca/downloads/v2/fonts/gabarito-700.woff2)
- Figtree: [400 WOFF2](https://brand.sundayable.ca/downloads/v2/fonts/figtree-400.woff2) · [500 WOFF2](https://brand.sundayable.ca/downloads/v2/fonts/figtree-500.woff2)
- IBM Plex Mono: [500 WOFF2](https://brand.sundayable.ca/downloads/v2/fonts/ibm-plex-mono-500.woff2)
- License notices: [Gabarito](https://brand.sundayable.ca/downloads/v2/fonts/licenses/Gabarito-OFL.txt) · [Figtree](https://brand.sundayable.ca/downloads/v2/fonts/licenses/Figtree-OFL.txt) · [IBM Plex](https://brand.sundayable.ca/downloads/v2/fonts/licenses/IBM-Plex-OFL.txt)

```css
@import url("https://brand.sundayable.ca/downloads/v2/fonts/fonts.css");
```

### Digital scale

| Role | Size / leading | Style |
| --- | --- | --- |
| Hero | `64-84px / 1.03` | Gabarito 700, `-2%` to `-2.5%` tracking |
| Section | `34-54px / 1.06` | Gabarito 700, tight tracking |
| Card title | `22px / 1.2` | Gabarito 700 |
| Body | `17-20px / 1.65` | Figtree 400, zero tracking |
| Label | `12px / 1.2` | IBM Plex Mono 500, uppercase |

Typesetting rules:

- Use sentence case.
- Keep display lines short.
- Break the thought, not the phrase.
- Keep important phrases together, such as `Sundays back`.
- Use `text-wrap: balance` on headings.
- Use `text-wrap: pretty` on body copy.
- For Korean, use `word-break: keep-all` and `overflow-wrap: break-word`.
- Hand-break hero copy at clause or sentence boundaries.

## Layout

Structure first. Asymmetry second.

At a `1600px` canvas:

- 12 columns
- `80px` outer margins
- `16-20px` gutters

Align most elements, then offset one element deliberately. Repeated cards in the
same row use equal heights. Text, controls, and examples that represent the same
role share a baseline. Content must never collide with page furniture, captions,
or page numbers.

## Shape and depth

| Element | Geometry |
| --- | --- |
| Interface | `12px` radius |
| Media frame | `22px` radius |
| Action | `999px` pill |
| Proof card | `2px` Ink border + `4px` hard offset |

Rounded forms make the system approachable. Dark borders keep it from becoming
soft or precious.

- Use `2px` Ink borders for important cards and controls.
- Use a hard offset shadow when lift is needed.
- Do not use diffuse UI shadows.
- Center label groups inside pills horizontally and vertically.
- Keep outer containers rectangular or softly rounded; pill geometry belongs to
  actions, tags, and compact status objects.

## Imagery

Show life around the work.

Use:

- Real owners in their own cafe, clinic, studio, shop, or workspace
- Subjects focused on the task more often than the camera
- Window light, warm lamps, evening blue, and visible time of day
- Warm highlights, neutral skin, blue shadow, and visible grain
- Evidence of a life beyond the screen

Avoid:

- Posed office teams
- Generic stock-business scenes
- Robots, glowing brains, holograms, server rooms, or circuit people
- Images where the setting cannot identify the owner's work

The technology should be implied by the task or interface, not performed by the
subject.

### Time-of-day system

| State | Meaning |
| --- | --- |
| Dawn | Promise |
| Day | Work |
| Dusk | Approval |
| Night | Freedom |

Choose the state that matches the message. Not every asset needs the full
sequence.

## Horizon graphic

The horizon is a day reduced to one line.

- Keep the horizon low.
- Blur before adding grain.
- Let one blue band carry the atmosphere.
- Never place body copy on the brightest edge.
- Use it as atmosphere, transition, or a closing field.

Use the supplied photographic assets rather than recreating the effect loosely.
All originals also live in `../brand-hub/guidelines/v2.0/assets/images/`.

Background set:

- [Dawn / hero](https://brand.sundayable.ca/downloads/v2/imagery/bg_hero.jpg)
- [Day / content](https://brand.sundayable.ca/downloads/v2/imagery/bg_content.jpg)
- [Work / automation](https://brand.sundayable.ca/downloads/v2/imagery/bg_automation.jpg)
- [Dusk / approval](https://brand.sundayable.ca/downloads/v2/imagery/bg_approval.jpg)
- [Night / freedom](https://brand.sundayable.ca/downloads/v2/imagery/bg_night.jpg)

Framed photography:

- [Content](https://brand.sundayable.ca/downloads/v2/imagery/fr_content.jpg)
- [Automation](https://brand.sundayable.ca/downloads/v2/imagery/fr_automation.jpg)
- [Approval](https://brand.sundayable.ca/downloads/v2/imagery/fr_approval.jpg)

## Interface

The interface speaks in proof. Show the number, timing, status, price, or next
action.

Primary action:

```css
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  color: #ffffeb;
  background: #1b2233;
  border: 2px solid #1b2233;
  border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(27, 34, 51, 0.2);
  font-family: "Gabarito", sans-serif;
  font-weight: 600;
}
```

Proof card:

```css
.proof-card {
  padding: 26px;
  color: #45422f;
  background: #fffff6;
  border: 2px solid #1b2233;
  border-radius: 18px;
  box-shadow: 4px 4px 0 #1b2233;
  font-family: "Figtree", sans-serif;
}
```

Evidence labels use IBM Plex Mono and concrete values such as:

- `FIRST DRAFTS IN 1-2 DAYS`
- `~10 MIN A WEEK`
- `CAD`
- `$1,000/mo`

Use one clear action per decision point. The primary CTA label is:

> Book a Free Consultation

## Voice in designed surfaces

Use the sequence **Promise, Proof, Constraint, Ask**.

1. Promise: name what gets better in the owner's day.
2. Proof: show an action, artifact, number, or visible result.
3. Constraint: state what takes time, costs extra, or needs approval.
4. Ask: use one plain action and explain what happens next.

| Use | Avoid |
| --- | --- |
| Your part takes about ten minutes a week. | Seamless marketing that saves valuable time. |
| Our people use AI to create quality content. | Unlock growth with autonomous AI. |
| Nothing ships without your OK. | Set it and forget it. |
| `$1,000/mo. Ad budget stays in your account.` | Flexible plans for every budget. |

Use plain verbs, visible numbers, and sentence case. Numbers do the adjective's
job. When automation appears, approval must appear in the same breath.

`BRAND-VOICE.md` contains the complete English and Korean writing system and
outranks this summary for copy decisions.

## Human + AI model

Automation ends at judgment.

1. Human strategy: what matters and why
2. AI production: draft, sort, tag, repeat
3. Human taste: edit, choose, refine
4. System delivery: publish after sign-off

Owner approval sits at the center. AI is the method; people are the
relationship.

## Motion

Motion should feel like time passing.

| Pattern | Timing | Rule |
| --- | --- | --- |
| Drift | `6-12s` | Background moves slower than content |
| Dissolve | `900-1200ms` | Crossfade between day states |
| Float | `4-10px` | Proof points move independently; never bounce |
| Settle | `250-450ms` | Approval stops motion with an ease-out |

Completion should feel calm, not celebratory. Always provide a
`prefers-reduced-motion` path.

## Application

The promise stays the same across website, deck, social, and story formats. Only
the crop and hierarchy change.

- Website: promise, human method, one action
- Deck: dark structure, large title, restrained metadata
- Social: real owner image, direct promise, one proof label
- Story: dark time-of-day crop, short headline, pill action

Do not invent a new visual language for each channel.

## Base tokens

```css
:root {
  --sundayable-butter: #ffffeb;
  --sundayable-card: #fffff6;
  --sundayable-ink: #1b2233;
  --sundayable-night: #0a0f1e;
  --sundayable-body: #45422f;
  --sundayable-muted: #7c7761;
  --sundayable-line: #e2dcc6;
  --sundayable-horizon: #82bce2;
  --sundayable-approved: #3e7c4f;

  --sundayable-radius-ui: 12px;
  --sundayable-radius-card: 18px;
  --sundayable-radius-media: 22px;
  --sundayable-radius-pill: 999px;
  --sundayable-border: 2px solid var(--sundayable-ink);
  --sundayable-offset: 4px 4px 0 var(--sundayable-ink);

  --sundayable-motion-fast: 250ms;
  --sundayable-motion-base: 450ms;
  --sundayable-motion-scene: 1100ms;
  --sundayable-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
```

For production, import the complete public file:

```css
@import url("https://brand.sundayable.ca/downloads/v2/tokens.css");
```

The matching local source is `../brand-hub/guidelines/v2.0/tokens.css`.

## Preflight checklist

Before a Sundayable surface ships:

- Supplied wordmark only; no new symbol or lockup outside the favicon-only exception
- `1/2 H` clear space and minimum size respected
- Ink on light or Butter on dark
- Gabarito for display, Figtree for reading, Plex Mono for proof
- Sentence case and balanced display lines
- 12px UI, 22px media, pill actions
- 2px Ink borders and hard offsets only
- Real owners in real contexts; no AI or office-stock cliches
- Promise, proof, constraint, and ask are present where needed
- AI remains in the method and approval remains visible
- Colour contrast passes for the intended text size
- Repeated cards align and use equal heights
- No content overlaps page furniture or viewport edges
- Reduced-motion behavior is implemented