DESIGN RESOURCES

MAKE / BUILD

Build with CodexBetter design.

8 open-source building blocks

Components. Color. Type. Diagrams.

08

Pick what fits

UIColorTypeDiagrams

THE DESIGN MAP02

Give every resource a job

01

Interface

shadcn/ui

↗

02

Color & type

Radix Colors / Fontsource

↗

03

Diagrams

Mermaid / Rough.js

↗

04

Project pages

Simple Icons / README Stats / Markdown Badges

↗

shadcn/ui03

Start with a component

Buttons. Forms. Dialogs.

Pick an example. Make it fit.

01Component structure

02Typography & color

03Spacing & layout

Explore official components

Design resource example — Official component screenshot · Sep 2026

Radix Colors + Fontsource04

Same layout. Different feel.

OFFICIAL SAGE SCALE

1#fbfdfc

2#f7f9f8

3#eef1f0

4#e6e9e8

5#dfe2e0

6#d7dad9

7#cbcfcd

8#b8bcba

9#868e8b

10#7c8481

11#5f6563

12#1a211e

One scale for surfaces, borders and text.

Sage paletteElectric blue

Sans serifSerif

A sample interface with coordinated color and typography.

MY PROJECTS↗

FONT & COLOR

My projects

Components, color and type
shape the feel of a page.

SurfaceBorderText

View projects →

Mermaid + Rough.js05

Flowchart or hand-drawn?

Mermaid

Turn text into a diagram

flowchart LR
  A[Collect] --> B[Outline] --> C[Review]

Rendered from text. Follow the nodes and links.

Rough.js

Draw sketch-style shapes

Sketch-style shapes positioned in code.

Mermaid repository Rough.js repository

Simple Icons + README Stats + Markdown Badges06

Polish your project page

Simple Icons

Brand SVG icons

Choose the brands your project uses.

Browse brand icons

Markdown Badges

Badges with ready-to-use code

![Label](badge-image-url)

Browse badges & code

PUT IT IN CONTEXT07

Start small. Make it fit.

01

Product interface

Components, colors and fonts

Explore full UI examples

02

GitHub README

Icons, stats cards and badges

# My Project
Project introduction
![Stats](stats-image-url)

Explore README examples

8 OFFICIAL REPOSITORIES08

Save these building blocks

01

shadcn/ui

Components & setup

shadcn-ui

02

Radix Colors

Color scales & usage

radix-ui

03

Fontsource

Fonts, weights & coverage

fontsource

04

Mermaid

Diagram syntax & rendering

mermaid-js

05

Rough.js

Canvas / SVG examples

rough-stuff

06

Simple Icons

SVG files & packages

simple-icons

07

README Stats

Card setup & deployment

anuraghazra

08

Markdown Badges

Copy the Markdown

Ileriayo