Expression
Composition
Alternating light and dark sections, and the rhythm between them.
Pages alternate: a plum section, a cream section, plum again. That rhythm does the work a divider or a border would otherwise be asked to do, and it keeps a long page from reading as one undifferentiated scroll.
The alternating rhythm
Hero
Dark. Mauve accent.
Services
Light. Deep Mauve accent.
Benefits
Dark. Mauve accent.
Work
Light. Deep Mauve accent.
Call to action
Dark. Mauve accent.
Notice the accent changes cut with the ground. That is not a style choice — mauve on cream measures 2.11:1.
Measure and rhythm
| Element | Value | Why |
|---|---|---|
| Reading measure | ~70 characters | Longer and the eye loses the line return. |
| Section padding | 96px+ vertical | The work needs air. Crowding reads as cheap. |
| Block gap inside a section | 24px | Related things stay visibly related. |
| Grid | 3 columns desktop, 1 mobile | Services, values and portfolio all use it. |
| Card radius | 8 to 12px | Subtle. A large radius reads consumer, not studio. |
| Radius | Value | Utility |
|---|---|---|
| Card | 8–12px | rounded-lg / rounded-xl |
| Button | 8px | rounded-lg |
| Pill | 9999px | rounded-full |
A test that works
Rules
Do: Alternate dark and light sections down the page.
Do: Give each section one idea and one heading.
Do: Use whitespace as the separator before reaching for a border.
Do: Switch the accent cut whenever the ground changes.
Do not: Do not run two dark sections back to back without a reason.
Do not: Do not centre long-form text. Centre a headline at most.
Do not: Do not fill space because it is there. Empty space is doing work.
Do not: Do not box everything. A border should mean something is genuinely separate.