rnqs.app / design

A foundation for
what comes next.

The rnqs.app identity, scaled to fit the interface.

Color

A lighter yellow, the same deep background. Contrast defines the role of each tone.

Butter yellow#f1d992
Near-black blue#0b0e13

Evolved from the homepage gold #e3c994.

Type

Two families, distinct weights. Personality stays in headings; the interface gets room to breathe.

Bricolage Grotesque 800

Brand and display headings.

Geist 400–600

Body copy, navigation, and controls.

System monospace for code and values.

Texture

The texture spans the full width of the section, beyond padding. The light center follows the content. Beyond the content bounds, the texture begins to fade.

Your next project

A touch of the brand.
Room for the content.

See it in the UI

For people.
And for agents.

A compact reference, ready to accompany the next project.

Markdown Guide CSS Tokens

Same foundation.
Two modes.

Yellow stays on the primary button. Accent text adapts to the background. Switch the theme at the top to test the whole page.

Draft v0.1 · interface examples

Your spaceLight

Ideas in progress

Keep what is worth building.

View tokens

Ready to begin.

Your spaceDark

Ideas in progress

Keep what is worth building.

View tokens

Ready to begin.

Color with purpose.

Accent identifies the brand. Green, red, and blue communicate states, always paired with text.

✓ Saved! Failed to savei Information
Text on yellowDark in both themes12.51:1
Accent on light#715317 on #f8f7f36.64:1
Accent on dark#f1d992 on #0b0e1313.88:1

WCAG contrast ratios calculated for these solid pairs. Target 4.5:1 for regular text and 3:1 for essential borders. Re-evaluate when changing backgrounds.

Small by choice.

Start with identity and a few patterns. Extract shared components once real usage repeats.

Space4 px base4 · 8 · 12 · 16 · 24 · 32 · 48 · 64
ShapeSubtle corners8 px / 16 px
MotionShort feedback160 ms / 0 ms reduced
TextureLocal and decorative0–20% in interfaces

Where we start from.

References for evolving this foundation without building infrastructure bigger than the projects.

Design.Systems Community of practitioners, discussions, and references.Design Tokens Community Group Open format for exchanging tokens across tools.Radix Colors Colors organized by role, built for both themes.WCAG · contrast Criteria for verifying legibility of color pairs.