Back to portfolio

    Design system case study

    The Blueprint design system

    rendered live from the production code, not from static images

    realdiamonddigital.studio runs on a small token-based design system I built with Tailwind CSS and React. It treats every page like a designer's canvas: grid paper, ink type, one blue for action and redline annotations that show how each layout is put together.

    Principles

    Show the thinking

    Redline annotations, spacing markers and wireframe views put the structure of each layout on the page, so visitors see how the design works.

    One colour for action

    Blueprint blue is reserved for actions, links and focus. Redline is only for annotations, so the two never compete.

    Tokens, not hard-coded values

    Every colour is an HSL CSS variable consumed through Tailwind (bg-accent, text-muted-foreground), so one change updates every screen.

    Accessible by default

    Text colours meet WCAG AA contrast on paper, and every interactive component shares one visible focus ring for keyboard users.

    Colour tokens

    8 tokens

    Ink

    --foreground

    hsl(221 43% 11%)

    Headings, body text and dark panels

    Paper

    --background

    hsl(217 50% 97%)

    Page background under the grid

    Grid

    --grid

    hsl(218 38% 92%)

    32px grid-paper lines

    Blueprint blue

    --accent

    hsl(224 75% 48%)

    The one colour for actions, links and focus

    Redline

    --annotation

    hsl(9 100% 62%)

    Annotation lines, frames and markers

    Redline ink

    --annotation-ink

    hsl(9 75% 45%)

    Readable annotation text

    Muted text

    --muted-foreground

    hsl(218 14% 41%)

    Supporting text and captions

    Hairline

    --border

    hsl(217 32% 86%)

    Panel borders and dividers

    Typography

    Familjen Grotesk · JetBrains Mono

    Display · 88/86

    Structure first.

    H1 · 72

    Services

    H2 · 48

    Selected work

    H3 · 24

    UI/UX Design

    Body large · 20

    Websites people understand at first glance.

    Body · 16

    Every solution is tailored to your goals.

    Label · Mono 12

    Ceramics studio · Canada · 2025

    Annotation kit

    the pieces that make the Blueprint look

    Frame + note · .bp-frame .bp-note

    H2 · 48/52

    Annotated heading

    Spacing marker · .bp-spacer

    Result tag · .bp-result

    +75% traffic in month one

    Highlight · .bp-highlight

    Design the structure

    Crop marks · .bp-crop

    4:3

    Buttons

    one component · 6 variants · 4 sizes

    Press Tab to see the shared focus ring.

    Panels

    flat sheets on grid paper, no shadows or gradients

    Panel

    White sheet with a 1px hairline. Used for most content.

    Hairline
    grid
    for
    groups

    Ink panel

    For the one moment per page that needs the most attention.

    All case studies