We've had a productive couple of weeks and have finally broken the back of the design structure.

With any well-considered website design and UX (User Experience), the challenge isn’t in the implementation—it’s in the forethought. It’s the invisible work that separates a site built with intention from one thrown together by someone who just wants to code.

It’s taken us a while to get here, but with the hard part now behind us, we’re in a position to roll out the design across the entire site quickly. These should be exciting times.

As shown above, the predominant palette is in a strong place. To complement it, we’ve developed a usage pattern and a naming convention that’s intuitive and extensible—making the site instantly maintainable from a CSS and design perspective.

1. Principles

• **Base vs Semantic:
  • Base tokens = literal values (e.g., specific teal/grey hex).
  • Semantic tokens = intent (e.g., color.bg.masthead that swap per theme.
• Consistent order: category.role.name.state.variant (omit segments that aren't needed)
• Themeable: semantic tokens carry per-mode values (light, dark, optionally hc)
• Portable: Works for Figma variables, Style Dictionary/variables2json, CSS< RN, iOS.

2. Namespaces (Recommended)

Top-level groups:

• color.*
• size.* (spacing)
• radius.*
• typography.* (font, size, weight, lineheight, letterspacing)
• elevation.* (shadows)
• motion.* (duration, easing)
• opacity.*
• z.* (z-index)
• breakpoint.*

3. Figma Variables (Naming)

• Create Collections: Color, Size, Radius, Typography, Elevation, Motion.
• Modes: Light, Dark (add High Contrast later)
• Variables (dot case):
  • color.bg.page, color.bg.masthead, text.primary.color, color.accent.primary, stc.
• Palette goest into color.palette.* and is referenced by semantic vars per mode.

4. Do / Don’t

• Do: use semantic tokens in components (color.bg.card), not palette.
• Do: keep order consistent: color.bg.card.hover rather than mixing positions.
• Don't: hard-code hex in components.
• Don't: name by appearance (color.bg.white) - name by intent (color.bg.surface).

Examples

Things are looking great, and this progress has finally allowed me to begin implementing these concepts in code.

_variables.scss

_themes.scss

These have all been committed to the Reskin Branch of my GitHub repository where they can now be progressed further.

As I mentioned above, this should be a time of excitement for the Steemit community. The hard work has finally reached a point where implementation should be straightforward—but I won’t be the one to deliver it.

Since this project was approved for a second term, I’ve been acutely aware of the criticism surrounding the funding I received—some of it coming from top witnesses on this platform.

That said, others, including influential witnesses, have continued to support and encourage this work.

For STEEM and Steemit, the timing of this latest funding removal is unfortunate:

1. SBD is now valued at nearly $0.50, considerably lower than the requested sum and therefore increasingly difficult to pay my designer.
2. I’ve recently committed to another project, and given how things have unfolded, I’m now free to focus on it fully.
3. I no longer have the patience to deal with the constant toxicity on-chain and in Discord.

I feel that now is the right time for me to walk away from Steemit. I’d like to wish those of you who have positively impacted my time here all the best for the future.