Brand and design

Style guide

The colours, type and components used across marinimmigrationlaw.ca. Build new pages from these parts so the whole site reads as one firm.

Version 1 · October 2026 · Internal reference, not indexed by search engines

Colour

A navy-led palette with one link blue and a warm paper tone, plus the logo's yellow, pink and blue in small doses: square bullets, a headline highlight, step markers, pale section tints and the shape trio. Each colour is a Webflow variable or a site token, so changing it updates every page.

Ink

#1F2432 · Neutral 800 · 15.5:1 on white

Headings, body text, primary buttons, footer and the consultation panel.

Slate

#4A5164 · Neutral 600 · 7.9:1 on white

Secondary text, standfirsts, captions and meta lines.

Link blue

#2347B8 · Primary 1 · 7.9:1 on white

Links, category labels and focus outlines. Never used as a large background.

Paper

#F7F5F0 · Neutral 200

Alternating section backgrounds, author boxes and notices.

Rule

#E3E1DA · Neutral 300

Card borders, dividers and table lines. Replaces drop shadows.

Logo yellow

#FFD233 · Secondary 1 · decorative only

Square bullets, eyebrow markers, the homepage headline highlight, the pull-quote bar and button hover on navy panels. Never used for text.

Logo pink

#FA267F · Secondary 4 · large text and shapes only

The plus signs in counters and the triangle step marker.

Logo blue

#2662FA · decorative only

The circle step marker and the shape trio. Use link blue for text, links and hover states.

Sky tint

#EEF3FE · panel #E3EAFC

Pale blue panels and bands: the homepage hero photo panel and Why clients choose us.

Sun tint

#FFF8E1

Pale yellow band behind client reviews. One band per page at most.

Shape trio

Square, triangle and circle from the logo

On the hero photo panel, the navy call-to-action bands and the Team page call to action. One trio per screen at most.

Typography

Source Serif 4 (600) for headings, Inter (400 and 600) for everything else. Sizes are desktop first, phone second.

DisplaySerif 600 · 56 / 36 px · homepage H1 only

Citizenship runs in your family.

Page title (H1)Serif 600 · 44 / 32 px · line height 1.15

Judicial review

Section heading (H2)Serif 600 · 32 / 24 px (30 in articles)

How we handle your case

Sub-heading (H3)Inter 600 · 21 / 19 px

Documents you will need

StandfirstInter 400 · 20 / 17 px · Slate

The answer in one or two sentences, so readers know where they stand before they scroll.

BodyInter 400 · 18 / 17 px · line height 1.65 to 1.7 · Ink

Reading text stays at 65 to 75 characters a line, left aligned, in Ink. Grey is for captions and meta only.

Small and metaInter 400 · 14 px · Slate

30 September 2026 · 12 min read

LabelInter 600 · 12 to 13 px · uppercase · 0.08 em

Citizenship by descent

Buttons and links

A 6 px radius, navy filled for the main action and a navy outline for the second one. One label per action.

Book a consultationSee our feesRead the FAQ
  • "Book a consultation" is the label for every booking button, in the header and in page bodies.
  • Retire "Get in touch", "Book Consultation" and "Browse Blogs" as labels.
  • Links in body text are Link blue and underlined.

Cards and labels

A 1 px Rule border and an 8 px radius instead of drop shadows. Category tags are small uppercase text, not coloured pills. When there is no good photo, use a typographic cover.

Citizenship by descent, second generation

Citizenship by descent

Typographic cover: category and title in the serif on Paper

September 2026

Initial consult

$300 CAD

Fee card: label, price in the serif, then what is included.

Federal Court

Judicial review

Service card: serif title, short description, one arrow.

Questions and answers

One bordered list with a plus that turns into a minus. Questions are Inter 600; answers are body text.

How long does the whole process take?

Answers start with the bottom line, then the detail. Keep processing times dated, for example "as of September 2026".

Can I book in French?

Yes. Write French with vouvoiement and a non-breaking space before colons, question marks and exclamation marks.

Quotes, notices and the author box

Quiet components for emphasis. A gold rule for quotes, a navy rule for notices, Paper for the author box.

Pull quotes use the serif in italic with a 3 px gold rule.Cédric Marin, Principal Lawyer
NoticeCapacity notes, processing times and other time-sensitive facts sit in a Paper box with a 3 px left rule, always with an "as of" date.

Cédric Marin

Canadian Citizenship and Immigration Lawyer (LL.L., JD, LL.M.)

Two lines of bio, the Law Society of Ontario licence, then a link to the full profile. Associates are credited by name.

Consultation panel

The navy panel is the one shared call to action at the end of every page. It uses the CTA 1 component, so edit it there rather than copying it.

Ready to talk to a lawyer?

One heading, one sentence and one button. Capacity and wait times stay on the Contact page.

Book a consultation

Layout and spacing

An 8 px grid and two container widths.

  • Page container: 1,168 px maximum, for grids, headers and index pages.
  • Reading column: 680 px maximum, for articles, service pages and long text.
  • Section padding: 96 px on desktop, 64 px on phones.
  • Card gap: 16 to 24 px.
  • Side gutter: 24 px on desktop, 20 px on phones.

Words

The same names and phrases everywhere.

  • Cédric Marin, with the accent, and credentials as "LL.L., JD, LL.M."
  • Credit associates by name: Chanelle Rosenbaum, Harleen Kaur Chadha, Michaël Delagrée and Agnès Chaudron. Kendra Gaede is the in-house genealogist.
  • Prefer "licensed lawyers" to "expert" or "specialist", and add "Past results do not guarantee future outcomes." wherever results or counts appear.
  • Date any processing time or wait time, for example "as of September 2026".