fixpoint-linux design

The shared Elm design system for fixpoint-linux sites.

Fixpoint.* is a reusable Elm package (git submodule) that renders the brand styling as Elm — no CSS files to link. It is built on elm-css (Html.Styled + inline css), so components carry their own styles and the package works with the modern, safe inline-combinator approach. Consume it by adding this repo as a git submodule and putting design/src in your elm.json source-directories, then import Fixpoint.* in your Elm code.

import Html.Styled as Styled
import Html.Styled.Attributes exposing (css)
import Fixpoint.Style
import Fixpoint.Nav
import Fixpoint.Hero
-- …

view model =
    Styled.div []
        [ Fixpoint.Style.stylesheet   -- element resets + cross-cutting rules
        , Fixpoint.Nav.view { brand = …, links = …, extra = … }
        , Fixpoint.Hero.view { … }
        ]
        |> Html.Styled.toUnstyled

Components return Html.Styled.Html msg. Convert once at your app's root with Html.Styled.toUnstyled. Fixpoint.Style.stylesheet emits the element-level resets and cross-cutting / descendant rules that inline css can't express; each component styles its own elements inline via Html.Styled + css.

The old raw-CSS export Fixpoint.Style.css : String was removed. Fixpoint.Style now exports color tokens (bg, bg2, fg, dim, accent, accent2, line), the font stacks (fontMono, fontSans), and the wrap layout helper.

Nav API note: Fixpoint.Nav.menuItemClass : String -> String -> String -> Html msg (className, url, label) was replaced by Fixpoint.Nav.menuItemAccent : String -> String -> Html msg (url, label), which renders an accent-highlighted dropdown menu link.

Modules: Style (stylesheet + tokens + wrap), Nav, Hero, Section, Grid, Card, Code, Footer, Checks, Headline, Cta, Callout. Author a page once, reuse the brand look everywhere.

Source of the canonical look: fixpointlinux.org.