Orxin Design System

Get DESIGN.md Download View template Works with

Orxin is a dark, upbeat digital-studio site. It sits on a deep navy-black with charcoal cards, white bold DM Sans headlines and small green eyebrows, and it scatters flat geometric doodles (a coral arc, a sky-blue half-disc, concentric rings, an outlined cross) around the edges like confetti. Colour is bright and friendly but used in small pieces against the dark.

Four signatures make it recognisable:

Green eyebrow, white headline, soft lead. Nearly every section opens with a centred 18px weight-700 green line (Core services, Our projects, What they think), a 50px weight-700 white title, then a 26px weight-400 lead at 80% white.
A coloured word in the hero. The 80px headline We're a talented digital studio. swaps one word that is set in coral #FF715B (or sky blue #68D4FF), so the hero carries one spot of warm colour.
Square uppercase buttons. Buttons are 60px tall, 4px radius, 13px bold uppercase with 1px tracking: green ENQUIRE NOW, charcoal VIEW ON WEBFLOW. Hover turns the green button coral.
Floating geometric shapes. Flat outline and solid shapes in coral, sky blue, green, gold and violet sit around the hero and section edges, plus large dark half-circles (360px radii) behind images.

Orxin is a dark-only design with a small Webflow Ecommerce cart in the nav.

Colors

Surfaces

canvas#12141D

Page background, nav, footer (--black)

surface-1#20222E

Cards, the testimonial and contact bands, secondary buttons (--black-2)

surface-2#262936

Form fields

surface-3#2E313F

Round 38px icon buttons (17 measured)

field#262936

Inputs and their hairline border

field-line#FFFFFF · 6%

With field: Inputs and their hairline border

Ink

on-primary#FFFFFF

Text on primary

on-secondary#FFFFFF

Text on secondary

ink#FFFFFF

Headlines, titles, button text

ink-muted#FFFFFF · 80%

Paragraphs (p is #fffc) and section leads

ink-soft#FFFFFF · 70%

Footer links, prices, copyright

ink-subtle#FFFFFF · 60%

Category text, skill labels

ink-faint#FFFFFF · 50%

Testimonial names and roles

ink-hover#FFFFFF · 40%

Menu links on hover

Action

primary#3CCF91

Main buttons, eyebrows, skill bars, the cart badge, the blockquote rule

primary-hover#FF715B

Button hover (.button:hover turns tomato)

secondary#20222E

Second button (VIEW ON WEBFLOW)

accent#FF715B

The coloured hero word, service and fact icons, doodles

accent-2#68D4FF

Alternate hero word colour, the third service icon, doodles

Lines & effects

menu#10151B

Full-screen menu overlay

line#FFFFFF · 10%

Cart border and cart footer rule

glass#FFFFFF · 40%

Small translucent dots (slider navigation)

tag-pink#FF95D7

Blog category tags (Marketing, Design, Code)

tag-red#FF6E6E

Blog category tags (Marketing, Design, Code)

tag-blue#66D4FF

Blog category tags (Marketing, Design, Code)

shadow#000000 · 10%

0 16px 25px under raised images

Typography

DM Sans · display-hero

The quick brown fox jumps

We're a talented digital studio. 80px · 700 · 1.0

DM Sans · headline-lg

The quick brown fox jumps

Section titles: An award-winning agency, Recent work, Testimonials. 50px · 700 · 1.0

DM Sans · title-lg

The quick brown fox jumps

Blog titles; project titles at 26px. 27px · 700 · 1.11

DM Sans · eyebrow

The quick brown fox jumps

Digital experiences, made better, Core services. 18px · 700 · 1.33

DM Sans · body-lg

The quick brown fox jumps

Section leads at 80% white. 26px · 400 · 1.23

DM Sans · label

The quick brown fox jumps

Buttons. 13px · 700 · 1.54 · 1px

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Section rhythm	100px top and bottom; 60px at ≤479
Breakpoints	991px, 767px and 479px; most overrides are at 479px

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	15px
`md`	20px
`lg`	30px
`xl`	50px
`2xl`	100px

Layout spacing

Token	Value	Preview
`section-band`	70px
`nav-height`	90px
`section`	100px
`column-gap`	100px
`hero-top`	115px
`hero-bottom`	160px

Border radius

sm4px

md5px

card-top6px

pill30px

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Level 3surface-2

Level 4surface-3

Motion

Button hover	transition: all 0.2s; green → coral background
Menu link hover	transition: all 0.3s; colour to 40% white and padding-left: 15px
Card and title hovers	300ms; blog titles to 0.53 opacity, client logos 0.7 → 1, tags to 0.76
Menu open	Overlay items start at y: -30px, opacity 0, then move to y: 0 over 1500ms outQuint and fade in over 500ms outQuint; on close they move y: 30px and fade out in 300ms outQuint
Menu toggle text	MENU / CLOSE swap with a 500ms rotate (x: -100deg) and 500ms inOutBack on the lines
Size changes	Size 300–500ms ease, used for growing bars and lines
Cart and dropdowns	200–300ms ease opacity and rotate

Do’s and don’ts

Use canvas #12141D for the page and #20222E for cards and alternate bands.
Open sections with a green #3CCF91 18px bold eyebrow, a 50px bold white title and a 26px regular lead at 80% white.
Keep buttons square-cornered: 4px radius, 60px tall, 13px bold uppercase with 1px tracking.
Keep button labels 13px bold uppercase: white on #3CCF91 is only about 2:1 and on the #FF715B hover about 2.7:1. These are the template's real colours.
Add one coral #FF715B or sky-blue #68D4FF word or icon per view for warmth.
Scatter 2–4 small flat doodles (rings, arcs, a cross, a half-disc) at section edges, partly off-screen.
Use pure black, or grey hex values for text; use white at 80 / 70 / 60 / 50%.
Round buttons into pills; pills are only for the feature list.
Add glass, blur or heavy shadows; the only shadow is 0 16px 25px at 10%.
Use Butler or any serif; DM Sans carries everything, with Caveat only for one handwritten note.
Mix more than two accent colours in one component (except the three-colour blog tags and service icons).
Put ink-faint (50%) on text under 16px.
Set tag text below 15px bold: white on the pink, red and blue tag fills is under 3:1.

Example prompt

Any page in the Orxin style

Prompt

Build your page in the Orxin style. Background #12141D, cards and alternate bands #20222E, inputs #262936, round icon buttons #2E313F. Font DM Sans: headings 700 white, paragraphs 17px weight 400 at 80% white (line height 1.41). Open each section centred with an 18px bold #3CCF91 eyebrow, a 50px bold white title (line height 1.0) and a 26px weight-400 lead at 80% white. Sections are 100px top and bottom in a 1200px container; grids sit at 80% width. Buttons: 60px tall, 4px radius, padding 20px 30px, 13px bold uppercase with 1px tracking; primary #3CCF91 turning #FF715B on hover in 200ms, secondary #20222E. Put one word or icon in coral #FF715B or sky blue #68D4FF and a few flat geometric doodles at the edges. No glass; at most a 0 16px 25px shadow at 10% black.

# Orxin Design System

> Measured from the Orxin template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

Orxin is a dark, upbeat digital-studio site. It sits on
a deep navy-black with charcoal cards, white bold DM
Sans headlines and small green eyebrows, and it scatters
flat geometric doodles (a coral arc, a sky-blue
half-disc, concentric rings, an outlined cross) around

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #12141D     | Page background, nav, f… |
| surface-1    | #20222E     | Cards, the testimonial … |
| surface-2    | #262936     | Form fields              |
| surface-3    | #2E313F     | Round 38px icon buttons… |
| field        | #262936     | Inputs and their hairli… |
| field-line   | #FFFFFF 6%  | With field: Inputs and … |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #FFFFFF     | Text on secondary        |
| ink          | #FFFFFF     | Headlines, titles, butt… |
| ink-muted    | #FFFFFF 80% | Paragraphs (p is #fffc)… |
| ink-soft     | #FFFFFF 70% | Footer links, prices, c… |
| ink-subtle   | #FFFFFF 60% | Category text, skill la… |
| ink-faint    | #FFFFFF 50% | Testimonial names and r… |
| ink-hover    | #FFFFFF 40% | Menu links on hover      |

## Typography

- display-hero: DM Sans 80px / 700
- headline-lg: DM Sans 50px / 700
- headline-metric: DM Sans 47px / 500
- headline-menu: DM Sans 40px / 700

{
  "$description": "Orxin design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#3CCF91",
      "$description": "Main buttons, eyebrows, skill bars, the cart badge, the blockquote rule"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FF715B",
      "$description": "Button hover (.button:hover turns tomato)"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#20222E",
      "$description": "Second button (VIEW ON WEBFLOW)"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on secondary"
    },
    "accent": {
      "$type": "color",
      "$value": "#FF715B",
      "$description": "The coloured hero word, service and fact icons, doodles"
    },
    "accent-2": {
      "$type": "color",
      "$value": "#68D4FF",
      "$description": "Alternate hero word colour, the third service icon, doodles"
    },
    "canvas": {
      "$type": "color",
      "$value": "#12141D",
      "$description": "Page background, nav, footer (--black)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#20222E",

/* Orxin theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #3CCF91;
  --color-primary-hover: #FF715B;
  --color-on-primary: #FFFFFF;
  --color-secondary: #20222E;
  --color-on-secondary: #FFFFFF;
  --color-accent: #FF715B;
  --color-accent-2: #68D4FF;
  --color-canvas: #12141D;
  --color-surface-1: #20222E;
  --color-surface-2: #262936;
  --color-surface-3: #2E313F;
  --color-menu: #10151B;
  --color-ink: #FFFFFF;
  --color-ink-muted: #FFFFFFCC;
  --color-ink-soft: #FFFFFFB3;
  --color-ink-subtle: #FFFFFF99;
  --color-ink-faint: #FFFFFF80;
  --color-ink-hover: #FFFFFF66;
  --color-line: #FFFFFF1A;
  --color-field: #262936;
  --color-field-line: #FFFFFF0F;
  --color-glass: #FFFFFF66;
  --color-tag-pink: #FF95D7;
  --color-tag-red: #FF6E6E;
  --color-tag-blue: #66D4FF;
  --color-shadow: #0000001A;

  /* Fonts */
  --font-sans: "DM Sans", sans-serif;
  --font-dm-sans: "DM Sans", sans-serif;
  --font-caveat: "Caveat", cursive;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 80px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 700;
  --text-headline-lg: 50px;
  --text-headline-lg--line-height: 1.0;
  --text-headline-lg--letter-spacing: 0px;

/* Orxin design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #3CCF91; /* Main buttons, eyebrows, skill bars, the cart badge, the blockquote rule */
  --color-primary-hover: #FF715B; /* Button hover (.button:hover turns tomato) */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #20222E; /* Second button (VIEW ON WEBFLOW) */
  --color-on-secondary: #FFFFFF; /* Text on secondary */
  --color-accent: #FF715B; /* The coloured hero word, service and fact icons, doodles */
  --color-accent-2: #68D4FF; /* Alternate hero word colour, the third service icon, doodles */
  --color-canvas: #12141D; /* Page background, nav, footer (--black) */
  --color-surface-1: #20222E; /* Cards, the testimonial and contact bands, secondary buttons (--black-2) */
  --color-surface-2: #262936; /* Form fields */
  --color-surface-3: #2E313F; /* Round 38px icon buttons (17 measured) */
  --color-menu: #10151B; /* Full-screen menu overlay */
  --color-ink: #FFFFFF; /* Headlines, titles, button text */
  --color-ink-muted: #FFFFFFCC; /* Paragraphs (p is #fffc) and section leads */
  --color-ink-soft: #FFFFFFB3; /* Footer links, prices, copyright */
  --color-ink-subtle: #FFFFFF99; /* Category text, skill labels */
  --color-ink-faint: #FFFFFF80; /* Testimonial names and roles */
  --color-ink-hover: #FFFFFF66; /* Menu links on hover */
  --color-line: #FFFFFF1A; /* Cart border and cart footer rule */
  --color-field: #262936; /* Inputs and their hairline border */
  --color-field-line: #FFFFFF0F; /* With field: Inputs and their hairline border */
  --color-glass: #FFFFFF66; /* Small translucent dots (slider navigation) */
  --color-tag-pink: #FF95D7; /* Blog category tags (Marketing, Design, Code) */
  --color-tag-red: #FF6E6E; /* Blog category tags (Marketing, Design, Code) */
  --color-tag-blue: #66D4FF; /* Blog category tags (Marketing, Design, Code) */
  --color-shadow: #0000001A; /* 0 16px 25px under raised images */

  /* Fonts */
  --font-dm-sans: "DM Sans", sans-serif;
  --font-caveat: "Caveat", cursive;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 80px;
  --text-display-hero-font: var(--font-dm-sans);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: 0px;
  --text-headline-lg: 50px;
  --text-headline-lg-font: var(--font-dm-sans);
  --text-headline-lg-weight: 700;
  --text-headline-lg-line-height: 1.0;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Agency design systems, the same colors first.

Browse all 398

Bring any of them to your AI tool

All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.

Get All Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

DM Sans · display-hero

DM Sans · headline-lg

DM Sans · title-lg

DM Sans · eyebrow

DM Sans · body-lg

DM Sans · label

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Orxin style

More design systems like this

Cosmo

Görm

Omeg

Tempus

Bring any of them to your AI tool