Understanding the importance of birth certificates in Saint Lucia
In Saint Lucia, only the birth certificate is evidence of citizenship by birth.
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 Saint Lucia. The flag and the firm’s own photographs carry the identity; the logo’s navy carries the brand.
- One ask per screen. Booking a consultation is the primary action everywhere. Phone and email 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.
Navy
Brand, from the logo’s #1A1746. 700 is the action colour; 50 tints quiet sections; 900 is the footer.
--navy-50#F4F4F9--navy-100#E6E5F0--navy-200#C9C7DC--navy-400#6A6795--navy-600#2E2A6A--navy-700#221E5A--navy-800#1A1746--navy-900#110F30
Flag blue
From the logo’s scales and swords. Decorative only: rules, markers, the focus ring. Never text.
--flag-500#00AFEC--flag-600#0090C4
National flag
The flag of Saint Lucia’s own colours, used only by the Flag atom.
--flag-sky#66CCFF--flag-gold#FCD116--flag-black#000000
Ink
Text and borders, cooled a touch toward the navy.
--ink-900#1A1A24--ink-700#3A3A48--ink-500#62627A--ink-300#B0B0C0--ink-100#E6E6EE--paper#FFFFFF
Feedback
Form confirmations and errors only.
--green-700#1F6B47--green-50#EAF5EF--red-700#A3231C--red-50#FBEFEE
Semantic tokens
| Token | Resolves to | Sample |
|---|---|---|
--color-surface | paper | |
--color-surface-tint | navy-50 | |
--color-surface-inverse | navy-900 | |
--color-text | ink-900 | |
--color-text-muted | ink-500 | |
--color-text-inverse | paper | |
--color-text-inverse-muted | navy-200 | |
--color-heading | navy-800 | |
--color-action | navy-700 | |
--color-action-hover | navy-800 | |
--color-action-text | paper | |
--color-accent | flag-600 | |
--color-border | ink-100 | |
--color-border-strong | ink-300 | |
--color-border-hover | ink-500 | |
--color-placeholder | ink-300 | |
--color-focus | flag-600 | |
--color-selection | navy-100 | |
--color-success | green-700 | |
--color-success-surface | green-50 | |
--color-error | red-700 | |
--color-error-surface | red-50 |
Contrast pairs
WCAG 2 ratios, calculated at build time from the token values.
- AaBody text17.25:1, AAA
- AaMuted text5.92:1, AA
- AaLinks, primary action14.99:1, AAA
- AaHeadings on tint15.26:1, AAA
- AaButton label14.99:1, AAA
- AaFooter links18.5:1, AAA
- AaFooter text11.18:1, AAA
- AaAccent rules (non-text)3.63:1, AA large
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.
Deterville & Associates
How we can help
Property & land
Legal expertise on which you can rely
We work with families, property owners and businesses across Saint Lucia.
Open 8:00 a.m. to 4:00 p.m.
Mailing address: General P.O. Box 835, Castries, LC04 101, Saint Lucia
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.Sister system
This system is a sibling of the Deterville Law Office design system. Both sites share the same components, type scale, spacing, single radius and page rhythm, so the two firms read as one family. Only the palette changes: navy and Saint Lucia flag blue here, oxblood there. Organisms specific to each firm sit in the same slots on the page.
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.
Form controls
Tag
Blog categories. One tone.
Tip of the Week
Logo
The original mark, on light grounds only.
Flag
The flag of Saint Lucia, drawn from its geometry. Full 2:1, or a 3:4 portrait crop for the hero.
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.
PostCard
ContactMethod
Step
Numbered only when the content really is a sequence.
- Send a messageTell us briefly what’s happening.
- Meet a lawyerWe explain your options in plain language.
FaqItem
I live outside Canada. Can we still meet?
Yes. Most consultations happen online.
Is the consultation free?
No. Consultations are paid.
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- Firm name, tagline, one primary action and the office details beside a visual: the gavel-and-flag photo, the principles panel or the flag.
ApproachRow- How the firm works, in four short columns under an image hero.
PageHero- Inner-page title and lede on white, with an optional actions slot.
PracticeGroups- Every practice area in four groups. Sibling of the Law Office’s ServiceColumns.
CitizenshipBand- Citizenship by Investment through GMIS, on the tint. Takes the slot of the Law Office’s RouteTimeline.
TipRow- The latest Tip of the Week posts. Sibling of QuoteRow.
VisitUs- Office, hours and contact details in two columns. Sibling of BookingFaq.
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.
CtaBand- The closing ask on the tint. Every page ends here.
SiteFooter- The only dark surface: sister-firm link, firm, practice groups, pages, contact, socials.
- Law you can understandSaint Lucia law help in language you can understand. If you’re unsure of your options, just ask and we’ll find an explanation that works for you.
- A team in your cornerOur legal team meets every morning to discuss our cases, so whoever you work with, the whole team’s expertise weighs in on yours.
- A focus on resultsWe start by working with you on a plan for the result you need, built from Saint Lucia law and your circumstances.
- A legacy of successD&A was built on legacy. We use that experience to help you down the path to the results you need.
Practice areas
Family & estates
- Family law litigationDivorce
- AdoptionLocal adoption, International adoption
- Successions and probate
- Notarial servicesApostilles, Last Will and Testament, Power of Attorney
Property & land
- ConveyancingAgreements for sale, Deeds of donation and sale, Mortgages
- Land law disputes
- LicencesAlien landholding, Marriage
Business & litigation
- Corporate lawAnnual returns, Certificates of good standing, Registering businesses and companies
- Business litigation
- Civil litigation
- Debt collection
- Personal injury
Citizenship & immigration
- CitizenshipBy descent, By marriage, Through residence
- Immigration
- Citizenship by InvestmentThrough Global Migration & Investment Services
Saint Lucia Citizenship by Investment
As Authorised Agents of the Saint Lucia Citizenship by Investment Programme, GMIS supports prospective candidates for citizenship, assists with the process and submits their applications.
Get on the path to your Saint Lucia law results today.
Book a consultation with one of our lawyers, or call the office.