Living style guide

Colours, type, radii, CTAs, navigation, and motif devices used on the FAIR Station site. Keep this page current whenever tokens or components change.

Internal reference — Master block list. Editors docs live in the repo under docs/.

Colours

Brand aliases are provisional until the client names them. Prefer $brand-* / role tokens in Sass.

Teal$brand-teal
#1f4e63
Olive$brand-olive
#4f6b3c
Sand$brand-sand
#c4bda1
Panel$color-panel
#f6f6f6
Surface$color-surface
#ffffff
Text$color-text
#000000

Typography

Source Sans 3 — Regular 400, SemiBold 600, Bold 700. Site-wide -webkit-font-smoothing: antialiased / -moz-osx-font-smoothing: grayscale on body so browser paint sits closer to Figma’s lighter look of the same named weights (see _base.scss).

Hero — 80 / SemiBold / 74
Connecting the FSML Research Lifecycle
Section — 48/72 desktop · 32/36 mobile
Empowering Shared Practices
Empowering Shared Practices
Subhead — 40 / SemiBold
Test
Card title — 30 / SemiBold
The Power of Machine Actionable DMPs
Body — 20 / Regular / 142%
Taking its name from the FAIR Principles, the FAIR Station Initiative connects field-based research activities to their outputs.
Nav — 16 / Regular (Bold when open/active)
About · Approach · People & Partners · Blog

Radii

Asymmetric panel corners are section-specific (see tokens in _radii.scss).

Shared Practices panel — 23 / 130 / 23 / 23
Getting Involved panel — 23 / 23 / 23 / 74
Blog-band lead media — 186 / 31 / 31 / 31
Pill CTA — 91px

Buttons & CTAs

Live components from homepage patterns.

Learn more Olive outline pill (Shared Practices)
Email pill (Getting Involved)
Read more... Blog card CTA

Navigation

Desktop hover opens the submenu (Figma Approach example). Parent goes Bold with a 4px underline; panel is brand teal with quarter-round marks.

Hover About or Approach in the real header to try the live interaction.

Motif quarters

Shared partial motif-quarters. Colour via motif: teal | olive | sand. Spacing token $motif-quarters-space.