Design system
Graphite Smoke
The system behind this site: an achromatic palette, three type families and a handful of parts that repeat. Everything below is read from the code — change the token and this page changes.
§ 01 — Colour
One colour, many intensities
Monochrome by decision, not by omission: the project screenshots are already colourful, and any brand colour would compete with them. The red is functional — it marks negative numbers — and is not part of the identity.
Tema claro
- --fg#13131516.86 AAA15.26 AAA
- --fg-soft#3F3F449.51 AAA8.61 AAA
- --fg-muted#63636A5.42 AA4.90 AA
- --accent-2#4C4C527.75 AAA7.01 AAA
- --danger#B23B305.36 AA4.85 AA
Tema escuro
- --fg#F0F0F017.16 AAA16.14 AAA
- --fg-soft#B5B5B79.55 AAA8.99 AAA
- --fg-muted#8F8F946.07 AA5.72 AA
- --accent-2#C9C9CE11.85 AAA11.15 AAA
- --danger#E0847A7.22 AAA6.79 AA
Ratio computed at build time from the palette itself, following WCAG 2. Normal text needs 4.5; from 24px up, 3.0 is enough.
The rule sits at 1.5 on purpose: it is a decorative hairline, which the standard exempts. Darkening it to pass a test that does not apply would cost the design.
§ 02 — Typography
Three voices
A serif with a true italic for what has a voice, a sans for what has a function, and a mono for what is data. Newsreader is variable: one file covers 200 to 800.
Scale
- Frontend Developer.display
- Frontend Developer.body-serif
- Frontend Developer.corpo
- Frontend Developer.kicker
- Frontend Developer.marker
Weight axis
Newsreader · 200–800
- Frontend Developer200
- Frontend Developer300
- Frontend Developer400
- Frontend Developer500
- Frontend Developer600
- Frontend Developer700
- Frontend Developer800
§ 03 — Parts
What repeats
Each part exists once in the CSS and shows up everywhere. The list below is the source, not a reproduction of it.
.pill · .pill-solid
.rule · .rule-thick
.hl · .hang
Um trecho comum com o realce aplicado no meio da frase.
§ 04 — Motion
Scroll scenes
Five scenes, marked by attribute in the HTML. None animates opacity: content is born visible, and if JavaScript fails the page stays still, never blank.
[data-scroll-heading]Heading rises with the scroll[data-scroll-card]Block enters on reveal, reverses on the way back[data-scroll-stagger]Children enter in cascade[data-scroll-image]Image slides and settles its scale[data-parallax]Continuous shift, as a fraction of the viewport
Anyone asking for less motion at the system level gets none of them — and the control in the footer pauses everything at any time.