Lift content onto opaque card surfaces for legibility#9
Merged
Conversation
The previous translucent article fill sat directly over the
deep-ocean gradient, which made body text — especially in
notebooks — hard to read. Rework the palette around two
distinct layers:
1. Ambient: the ocean gradient + caustic rays. Atmosphere.
2. Content: opaque card surfaces that visually rise above
the water. This is where text actually lives.
Palette additions:
- --fv-surface #0f1f2a article cards
- --fv-surface-soft #142734 lifted (dataframe headers, callouts)
- --fv-surface-code #091621 inset (code wells, notebook inputs)
- --fv-surface-output #0c1c27 notebook output wells
- --fv-surface-border #1d3a4d
- --fv-text #e6edf3 ~16:1 on --fv-surface
- --fv-text-soft #c7d4de
- --fv-coral #ff9d7a slightly warmer for better pop
Articles are now opaque cards with a soft elevation shadow
and a thin bio-cyan light-catch along the top edge (via
::before). Code blocks sit inset on the card, notebook
output cells sit slightly lifted, and dataframes get a
clear header / zebra row hierarchy on top of that.
Body type bumps to --fv-text and tightens spacing rules so
headings, paragraphs, lists, and code blocks read with a
consistent vertical rhythm.
The ambient ocean gradient and caustic light shafts are
unchanged — only the content layer is reworked.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Translucent article cards over the deep-ocean gradient made body text — especially in the notebook post — hard to read. Rework the palette around two distinct layers so the ambient feel survives but content is comfortable to read for long stretches.
Two layers:
Palette additions (high-contrast content tokens):
--fv-surface#0f1f2a— article cards--fv-surface-soft#142734— lifted (dataframe headers, callouts, featured boxes)--fv-surface-code#091621— inset (code wells, notebook inputs)--fv-surface-output#0c1c27— notebook output wells--fv-surface-border#1d3a4d--fv-text#e6edf3— ~16:1 contrast on--fv-surface--fv-text-soft#c7d4de--fv-coralbumped from#ff8a65→#ff9d7afor better pop on the new surfaceArticles are now opaque cards with a soft elevation shadow and a thin bio-cyan light-catch along the top edge (via
::before), so they look like they're catching the light from the rays above. The wider container, padding, and tightened vertical rhythm (paragraph / list / heading spacing) make for cleaner reading.Code blocks sit inset on the card. Notebook inputs match the code well; outputs sit slightly lifted on
--fv-surface-output; dataframes get a clear header / zebra / hover hierarchy with a bright teal underline on the header. Inline code uses a more visible teal pill.Caustic rays and the ocean gradient are untouched.
Test plan
/posts/testing-the-deep-with-a-notebook/after deploy and confirm:print()output sits in its own slightly lifted wellGenerated by Claude Code