Components

Anchor

In-page navigation that links to the sections of a long page and marks the one being read.

Storybook: Storybook
Source: Source

States

State	Visual change	Tokens
Default	Subtle text	`color-text-subtle`
Hover	Default text	`color-text-default`
Current	Selected border, medium default text	`color-border-selected`, `color-text-default`
Focus	2 px focus outline drawn inside the link, so it does not cover the neighbouring links	`color-focus-ring`, `border-width-focus`

Measurements

Property	Value	Token
Link start padding	16 px	`space-lg`
Sublink start padding	24 px	`space-2xl`
Link vertical padding	4 px	`space-xs`

Tokens

Token	Sample	Light mode	Dark mode
`--bigbang-color-text-subtle`		`#404040#404040#404040`	`#d4d4d4#d4d4d4#d4d4d4`
`--bigbang-color-text-default`		`#171717#171717#171717`	`#fafafa#fafafa#fafafa`
`--bigbang-color-border-subtle`		`#ededed#ededed#ededed`	`#303030#303030#303030`
`--bigbang-color-border-selected`		`#146d83#171717#171717`	`#77bacf#e5e5e5#e5e5e5`
`--bigbang-color-focus-ring`		`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`
`--bigbang-border-width-focus`		`2px2px2px`	`2px2px2px`
`--bigbang-space-lg`		`12px12px12px`	`12px12px12px`
`--bigbang-space-2xl`		`20px20px20px`	`20px20px20px`
`--bigbang-space-xs`		`4px4px4px`	`4px4px4px`

Motion and interaction

The colour change eases with motion.hover; the current mark moves at once.