01
Explain it where it appears
Progressive disclosure
Decision. Each policy screen leads with the essentials and puts plain-language help next to the term.
Example. "Premium" comes with a one-line explanation.
Design system
Black ground, one accent.
The rules behind the portfolio. Everything below is rendered with the site's real stylesheets, so what you see is what ships.
Principles
- Dark on purpose.The black is the brand, so there is no light mode.
- One accent.Salmon marks what matters. It never decorates.
- Space and hairlines, not boxes.Content is grouped by rhythm and thin rules.
- Proof over claims.Pages show decisions and evidence, not adjectives.
- One radius.4px on every surface and control.
- Motion earns its place.Reveal hierarchy or show progress. Stop for reduced-motion visitors.
Color
Contrast is measured against Ink Black. Everything used for text clears 4.5:1.
Ink Black
--bg #141414
Page ground
16.1:1
Deep Black
--bg-deep #0d0d0d
Footer, recessed areas
surface
Raised Charcoal
--bg-raise #1b1b1b
Panels, image frames
surface
Warm Paper
--text #f1efec
Headlines and primary text
16.1:1
Soft Paper
--text-soft #b8b6b4
Body and secondary copy (74%)
9.1:1
Faint Paper
--text-faint #908f8d
Metadata, dates, captions (56%)
5.7:1
Salmon
--accent #ea4e65
The only accent: emphasis, primary actions, current location
5.1:1
Accent Ink
--accent-ink #141414
Text on Salmon fills
5.1:1
Type
Bricolage Grotesque for display and reading, Space Mono for labels. Both are self-hosted under the SIL Open Font License.
Display / 300
-0.045em
-0.045em
Clarity is a decision.
Heading / 300
-0.04em
-0.04em
Explain it where it appears.
Title / 400
PIP Global Safety
Lede / 20
UX and product design lead with 10+ years in enterprise insurance, healthcare finance and industrial safety.
Body / 17
Policy terms get a plain-language explanation beside them, through tooltips and status tags, instead of a glossary somewhere else.
Label / Space Mono 12
+0.08em, uppercase
+0.08em, uppercase
Lead UI/UX Designer, 2022-2025
Shape and space
- Radius 4pxButtons, inputs, image frames, panels.
- Container 1360pxFluid gutter from 20px to 64px, shared by every page.
- Nav 64pxSticky, name left, mono links right.
- BreakpointsLayouts collapse to one column at 960px and tighten at 640px.
Components
Buttons
Primary is Salmon with Ink text. Secondary is a hairline outline. Labels never wrap.
Form field
That password didn't work. Check your resume or email.
Navigation
Gustavo QuirosWork Resume Email
Work index row
Ledger row
Tata Consultancy Services
UX/CX Lead | Senior UI/UX Designer
Jul 2022 to Jul 2026
Case study patterns
Facts strip
- Role
- UX/CX Lead
- Timeline
- 2022-2025
- Markets
- Mexico, United States, Colombia
Takeaway
The goal: make insurance clear, approachable and consistent on every platform and in every market.
Decision row
Next study
Next case studyCurae Health Healthcare financial platform, from marketing site to patient billingMotion
- Hero lines rise once.Hierarchy: the headline reads first.
- Sections reveal on entry.Sequence follows reading order.
- Reading progress line.Shows position on long case studies.
- Reduced motion.All of the above switch off.