Style guide

The sign-in and account pages, /manage, this site, and the Ruby API docs share the accent colors and the type stack below. Light and dark mode follow the system setting.

Where	File
Sign-in, account pages, and `/manage` colors	`server/app/frontend/entrypoints/app.css`
`/manage` layout	`server/app/frontend/entrypoints/console.css`
This site	`docs/src/styles/global.css`
Ruby API docs	`client/doc/rose.css`

Colors

The sign-in and account pages have neutral colors of their own, which a theme can change. See custom properties. /manage uses daisyUI’s color names, such as --color-primary and --color-base-100, set in app.css.

Grays

This site and the Ruby API docs use --gray-000 to --gray-800.

Dark

000#000000ground

050#0f0b09surface

100#1a1614raised

200#292421line

300#3d3834

400#605955

500#88827dink-mute

600#aca6a2ink-dim

700#cfc9c5

800#e9e5e2ink

Light

000#fcf9f7ground

050#ffffffsurface

100#f5f1eeraised

200#e5ded9line

300#d1c9c3

400#a49d97

500#7a736eink-mute

600#58514cink-dim

700#393430

800#211c18ink

Brass and silver

This site and the Ruby API docs use --brass, --brass-lit, and --silver. The sign-in pages use the same --brass and --brass-lit, and a theme can change them.

Dark

brass#c9a14alabels

brass-lit#e8c27afocus ring

silver#a9b3b4inline code

Light

brass#8a5a1clabels

brass-lit#9b6a26focus ring

silver#636b6binline code

Accent colors

Every surface uses --glass-ruby to --glass-violet. Ratio is the contrast against black in dark mode and against white in light mode.

Hue	Dark mode	Ratio	Light mode	Ratio	Role
ruby	`#ff867a`	8.94	`#b53530`	5.97	danger
ember	`#ff8f53`	9.31	`#b04000`	5.87	primary action
amber	`#f19c29`	9.53	`#a44f00`	5.68	accent
gold	`#d4ad03`	9.78	`#8b6200`	5.46	warning
verdant	`#78c966`	10.35	`#267e05`	5.16	accent
emerald	`#1dcf98`	10.43	`#008450`	4.76	success
cyan	`#00cecf`	10.73	`#008386`	4.57	accent
sky	`#00c2fe`	10.15	`#0077b2`	4.90	info
cobalt	`#70b1ff`	9.42	`#2065c5`	5.63	note
violet	`#b49dff`	9.21	`#6e50be`	5.91	accent

Type

Text:

font-family:
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  "Helvetica Neue",
  Arial,
  sans-serif;

Code:

font-family:
  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
  monospace;

	Size	Line height
`/manage` small	`0.8125rem` (13px)	1.45
`/manage` body	`0.875rem` (14px)	1.5

Radius

	Box	Field
Sign-in and account pages	`8px` (`--bend`)	`8px` (`--bend`)
`/manage`	`10px`	`7px`
This site	`5px` (`--pane`)	`3px` (`--step`)

Spacing

Token	Below 48rem	48rem and up
`--gutter`, page side padding in `/manage`	`1.25rem` (20px)	`1.5rem` (24px)
`--rhythm`, gap between sections in `/manage`	`1.25rem` (20px)	`1.5rem` (24px)

Widths

	Max width
`/manage` page	`72rem` (1152px, `max-w-6xl`)
`/manage` prose	`60ch` to `64ch`
Sign-in column	`24rem` (384px)
Consent column	`30rem` (480px)

Grid and breakpoints

Breakpoint	What changes
`48rem` (768px)	`/manage` moves its tab bar from the bottom to the top, and each settings section becomes two columns: `minmax(12rem, 1fr) minmax(0, 2fr)`, with a `2.5rem` gap.
`50rem` (800px)	This site lets code in tables wrap below this width.