{% extends 'base.html' %} {% block main %}

Editors

Rich-text and code editing surfaces — WYSIWYG chrome, Markdown and a syntax-highlighted source view.

Article published
WYSIWYG

Article body

Format with the toolbar — output is sanitized HTML.

248 words · ~1 min read

Designing for both light and dark

A resilient interface earns its contrast from role tokens, not hard-coded hex. When every color resolves through a semantic variable, flipping the theme becomes a one-attribute change — and the same markup carries twelve accent presets for free.

"The fastest way to ship a dark mode is to never write a literal color in the first place."

Use var(--ax-surface) for panels and var(--ax-text-muted) for supporting copy. The glass surfaces below blur whatever sits behind them, so the canvas tint reads through.

  • Surfaces and borders read on both #F6F8FC and #0A0C11.
  • Numerics stay tabular for clean column alignment.
  • Decorative icons are hidden from assistive tech.
Autosaved 12s ago Sanitized HTML · paste cleaned automatically
CodeMirror

Source view

Edit the underlying markup directly with syntax highlighting.

<article class="post">
  <h2>Designing for both light and dark</h2>
  <p>A resilient interface earns its <strong>contrast</strong>
  from role tokens, not hard-coded hex.</p>
  <blockquote>
    The fastest way to ship dark mode is to never
    write a literal color in the first place.
  </blockquote>
</article>
## Designing for both light and dark

A resilient interface earns its **contrast** from
role tokens, not hard-coded hex.

> The fastest way to ship dark mode is to never
> write a literal color in the first place.
Ln 3, Col 18 · spaces: 2
{% endblock %} {% block scripts %} {% endblock %}