Huge news for Canadians abroad
Bill C-3 proposes to end the first-generation limit on citizenship by descent.
Design system
Tokens, components and the rules behind them. Every specimen here is the production component, styled by the same token file as the site.
Principles
- Quiet by default. White pages, one accent colour, no decoration that doesn’t carry information. The footer is the only dark surface.
- Lead with the person. This is a solo practice. Ms Deterville’s photograph, name and own route to Canada carry the trust.
- One ask per screen. Booking a consultation is the primary action everywhere. Phone and WhatsApp are always second, as plain links.
- Plain words, real facts. Every claim is sourced from the firm. No invented statistics, no all-caps labels.
- Structure as text. Lists, rules and a light tint instead of cards, icons and shadows. Numbers only where there’s a real sequence.
Colour
Primitives hold raw values. Components never use them directly; they use semantic tokens such as --color-action.
Oxblood
Brand. 700 is the original #780B0B and the only action colour; 50 tints quiet sections; 900 is the footer.
--oxblood-50#FBF4F4--oxblood-100#F4E4E3--oxblood-200#E6C3C1--oxblood-400#B4504C--oxblood-600#8F1A17--oxblood-700#780B0B--oxblood-800#5A0707--oxblood-900#3D0303
Ink
Text and borders, warmed toward red so they sit with oxblood.
--ink-900#1F1A1A--ink-700#3F3737--ink-500#6B6262--ink-300#B9B0AF--ink-100#E9E4E3--paper#FFFFFF
Feedback
Confirmation messages only.
--green-700#1F6B47--green-50#EAF5EF
Semantic tokens
| Token | Resolves to | Sample |
|---|---|---|
--color-surface | paper | |
--color-surface-tint | oxblood-50 | |
--color-surface-inverse | oxblood-900 | |
--color-text | ink-900 | |
--color-text-muted | ink-500 | |
--color-text-inverse | paper | |
--color-text-inverse-muted | oxblood-200 | |
--color-heading | oxblood-900 | |
--color-action | oxblood-700 | |
--color-action-hover | oxblood-800 | |
--color-action-text | paper | |
--color-border | ink-100 | |
--color-border-strong | ink-300 | |
--color-focus | oxblood-600 | |
--color-success | green-700 | |
--color-success-surface | green-50 |
Contrast pairs
WCAG 2 ratios, calculated at build time from the token values.
- AaBody text17.2:1, AAA
- AaMuted text5.92:1, AA
- AaLinks, primary action11.34:1, AAA
- AaHeadings on tint15.95:1, AAA
- AaButton label11.34:1, AAA
- AaFooter links17.32:1, AAA
- AaFooter text10.67:1, AAA
Typography
Playfair Display carries over from the existing brand for headings, set at medium weight so it reads as considered rather than loud. Public Sans is the body face: plain and legible at small sizes. Scale: major third (1.25) from a 17px base; the top step is fluid.
Aa
Playfair Display
Headings and quotes. 500.
Aa
Public Sans
Body, UI, forms. 400–600.
Nandi Deterville
How we can help
Wills & Estates
Meet online from anywhere in the world.
We draft Wills and Powers of Attorney for Ontario families.
Called to the Bar, January 2017
Licensee of the Law Society of Ontario (71552S)
Space and shape
A 4px base grid. Sections are separated by --space-9 of white space, a hairline rule or the tint, never by shadows.
--space-10.25rem--space-20.5rem--space-30.75rem--space-41rem--space-51.5rem--space-62rem--space-73rem--space-84rem--space-96rem--space-108rem
--radius-smThe only radius: buttons, inputs, tags, photographs, tinted panels.--shadow-raisedThe open mobile menu only.Atoms
The smallest pieces. They take props, not context, and know nothing about the page they sit on.
Button
Primary is the single action we want on a screen. Secondary is an alternative; ghost is low emphasis; inverse is primary on the footer.
Form controls
Tag
Blog categories. One tone.
ImmigrationWills & Estates
Logo
The original mark, on light grounds only.
Icon
Used sparingly, only where an icon is faster to read than a word. 24px grid, inherits currentColor.
phonecheckchevronmenucloseexternalshield
Molecules
Atoms combined to do one job: a labelled field, a review, a step in a process.
FormField
Include your country code.
Enter an email address like name@example.com.
SectionHeading
How we can help
A section title with an optional lede. No eyebrow labels above it.
ReviewQuote
I am extremely pleased with the exceptional service…
PostCard
ContactMethod
Phone
(647) 503-8684Step
Numbered only because booking really is a sequence.
- Verify your identityComplete our secure online form with two pieces of government ID. Law Society rules require this before we can advise you.
- Book and pay for your consultationPay by credit card, or by electronic funds transfer if you live in Canada. We confirm a time that works in your time zone.
FaqItem
I live outside Canada. Can we still meet?
Yes. Most consultations happen online.
Is the consultation free?
No. Consultations are paid.
SubscribeForm
Email signup for the firm’s updates. Posts to PUBLIC_SUBSCRIBE_ENDPOINT, or opens a pre-filled email without one. tone="inverse" is the footer version.
MediaRow
BFLN’s 19th Annual Sistahs-In-Law Retreat & Fundraiser
Panellist: Grit to Greatness, The Solo Practitioner’s Journey to Excellence
Organisms
Complete sections assembled into pages. A few are shown live below.
SiteHeader- Sticky white bar: logo, navigation, phone and the booking button. Collapses to a menu below 64rem.
HomeHero- The lawyer first: photograph, name, short bio, one primary action, then the rating and Law Society number as a quiet line.
PageHero- Inner-page title and lede on white, with an optional actions slot.
ServiceColumns- Practices side by side with what each covers. `exclude` hides the current practice on its own page.
RouteTimeline- The route to Canada as a plain timeline on the tint. Horizontal on wide screens, vertical on narrow ones.
QuoteRow- Review excerpts in a row of three. `all` shows every review.
BookingFaq- The three booking steps beside the common questions.
PostGrid- Blog posts in a grid of PostCards.
ContactForm- General enquiries; posts to a form endpoint or falls back to email.
Prose- Long-form typography for blog posts and the legal page.
CtaBand- The closing ask on the tint. Every page ends here.
SiteFooter- The only dark surface: email signup, firm, services, pages, contact, socials and the regulatory notice.
How we can help
Canadian Immigration
Visit, study, work, or settle in Canada.
- Choosing the right pathway before you apply
- Permanent residence, including Express Entry
- Citizenship and citizenship by descent
Wills & Estates
Wills and powers of attorney for Ontario families.
- Last Will and Testament
- Power of Attorney for Property
- Power of Attorney for Personal Care
Notarial Services
Notarized, certified and authenticated documents.
- Certified true copies
- Notarization of signatures
- Affidavits and statutory declarations
Her own route to Canada
Clients moving to Canada work with a lawyer who has made that move herself.
- Saint LuciaBorn and raised
- Miami, FloridaBA, International Relations, Florida International University
- England & WalesCalled to the Bar, July 2008
- Saint LuciaCalled to the Bar, August 2008, and in general practice
- OntarioCalled to the Bar, January 2017
What clients say
I am extremely pleased with the exceptional service…
Words can’t describe the wonderful work you did…
I recommend Nandi for knowledge, experience and…
Ready to talk about your situation?
Book a consultation online, or call us. We meet clients wherever they are in the world.