Conic Design System

Get DESIGN.md Download View template Works with

Conic is a warm, soft startup template. The top of the page is washed in seashell pink (#F8EDEB), the one colour is a dusty dark salmon (#E29578), and everything else is black type on white. Headlines are heavy Work Sans (700, with 800 on the brand name), and even paragraphs are semibold, so the text feels solid against the pale palette. Corners are square almost everywhere; structure comes from thin pink-beige rules and 2px salmon outlines.

The live preview's home page is a showcase: a hero over a faded collage of the template's pages, a four-column feature row, then sections of outlined preview frames (Landing Pages, Inner Pages, Account Pages), each under an outlined badge.

Four signatures make it recognisable:

Outlined salmon badges. Small uppercase labels (12px/600, 1px tracking) in salmon inside a 2px salmon-31% box, square: MEET CONIC, SELECT YOURS, HOME 1, ABOUT.
The ruled nav. Each nav item is a cell with 1px #E4D7D5 borders on the left and right, 32px 30px padding, on seashell. The active item (Welcome) is salmon.
Square salmon buttons. #E29578 with white 16px/600 text, 0px radius, 60px tall: Purchase, View on Webflow.
The faded collage hero. The hero sits on a collage of tilted template screenshots under a seashell gradient wash (30% → 100% → 10%), so the pages show through like a watermark.

Conic is a light design with a warm grey (#6D696A) footer.

Colors

Surfaces

canvas#FFFFFF

Page background

surface-1#F8EDEB

Nav and hero (--seashell); light page headers in the thumbnails

field#FFFFFF

Inputs

field-border#E1E1E1

With field: Inputs

inverse-canvas#6D696A

Footer and the closing band (--dim-grey)

Ink

on-primary#FFFFFF

Text on primary

ink#000000

Headlines and logo

ink-muted#000000

Body copy

ink-subtle#111111 · 61%

Dropdown links at rest

inverse-ink#FFFFFF

Text on inverse-canvas

inverse-ink-hover#FFFFFF · 82%

Footer links on hover

Action

primary#E29578

Buttons (.button, --dark-salmon)

primary-hover#E7AF9A

.button:hover

accent#E29578

Salmon text: badges, the active nav item, line icons, the blockquote rule

Lines & effects

line#EDEDED

1px section bottom borders

line-strong#E4D7D5

Nav bottom border and the vertical rules between nav items (--gainsboro)

line-accent#E29578 · 31%

2px borders of badges, preview frames and screenshots

inverse-line#E4EDEF · 10%

The footer divider

Typography

Work Sans · display-hero

The quick brown fox jumps

Shape your style in creative and vivid way with Conic. 59px · 700 · 1.0

Work Sans · headline-xl

The quick brown fox jumps

Closing CTA Create stunning websites with Conic now (Conic at 800). 50px · 700 · 1.0

Work Sans · logo-footer

The quick brown fox jumps

Conic in the footer, white. 37px · 700 · 1.03

Work Sans · title-quote

The quick brown fox jumps

Blockquotes with a 5px salmon left rule. 27px · 700 · 1.11

Work Sans · body-lg

The quick brown fox jumps

Hero lead (.text-large). 22px · 600 · 1.32

Work Sans · label-nav

The quick brown fox jumps

Nav links. 17px · 700 · 1.0

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Section rhythm	.section pads 100px top and bottom (60px at ≤479px) and ends with a 1px #EDEDED rule
Breakpoints	991px, 767px and 479px (Webflow defaults), plus a few min-width: 768px rules

Spacing scale

Token	Value	Preview
`xs`	5px
`sm`	10px
`md`	16px
`lg`	30px
`xl`	40px
`2xl`	50px

Layout spacing

Token	Value	Preview
`grid-gap`	30px
`footer-top`	80px
`section`	100px
`column-gap`	100px
`hero`	200px

Border radius

sm5px

full9999px

Surfaces

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

Level 1canvas

Level 2surface-1

Motion

Preview frame hover	Border, background and text colour change, 500ms each (mouse-over / mouse-out)
Fade-up on scroll	opacity 0 → 1 and move to x 0, y 0, 1000ms outQuart
Slide reveal	Move y 100% → 0%, 400ms ease
Dropdown open / close	Opacity 300ms ease
Nav link hover	Opacity, 200ms

Do’s and don’ts

Keep text black #000000 at weight 600 or more, on white or #F8EDEB.
Use #E29578 for the one button style (square, 60px tall, 20px 28px padding) and for badge text.
Open each section with an outlined badge (2px salmon at 31%, 12px uppercase) and a 44px/700 title.
Separate content with 1px #EDEDED or #E4D7D5 rules and 2px salmon-31% frames, not shadows.
Put the brand word in a headline at weight 800.
End the page with the #6D696A footer and white text.
Round buttons, badges or frames; only inputs get 5px.
Use salmon for long text or small light text: #E29578 is about 2.4:1 on white and 2.1:1 on #F8EDEB. Keep it for 12px+ bold uppercase badges, the 17px/700 active nav item and icons.
Put thin or small white text on the salmon button; it is about 2.4:1 (1.9:1 on the #E7AF9A hover). Keep button labels 16px semibold, short. The 82% white footer-link hover (4.3:1 on #6D696A) is likewise for 16px links only.
Use grey body text or light weights; Conic's paragraphs are black at 600.
Add a second colour, gradients on UI, or drop shadows.
Use the unused CSS colours (#F64D52, #2E856E).

Example prompt

Any page in the Conic style

Prompt

Build your page in the Conic style. Use a white page with a #F8EDEB nav and hero, black Work Sans text, and #E29578 dark salmon as the only colour. Hero title 59px weight 700 line height 1.0 with the brand word at 800; section titles 44px/700; paragraphs 17px weight 600 line height 22px with key phrases at 800. Open each section with a square badge: 12px/600 uppercase, 1px tracking, #E29578 text, 2px rgba(226,149,120,0.31) border, 10px 13px padding. Buttons are square #E29578 with white 16px/600 text, 20px 28px padding, 60px tall, hover #E7AF9A. The nav is 82px tall with each link in a cell ruled by 1px #E4D7D5 borders. Frame content in 2px salmon-31% outlines, separate sections with 1px #EDEDED rules, and close with a #6D696A footer in white. 1200px container, 100px section padding, no shadows, no radius except 5px inputs.

# Conic Design System

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

## Overview

Conic is a warm, soft startup template. The top of the
page is washed in seashell pink (#F8EDEB), the one
colour is a dusty dark salmon (#E29578), and everything
else is black type on white. Headlines are heavy Work
Sans (700, with 800 on the brand name), and even

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background          |
| surface-1    | #F8EDEB     | Nav and hero (--seashel… |
| field        | #FFFFFF     | Inputs                   |
| field-border | #E1E1E1     | With field: Inputs       |
| inverse-can… | #6D696A     | Footer and the closing … |
| on-primary   | #FFFFFF     | Text on primary          |
| ink          | #000000     | Headlines and logo       |
| ink-muted    | #000000     | Body copy                |
| ink-subtle   | #111111 61% | Dropdown links at rest   |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| inverse-ink… | #FFFFFF 82% | Footer links on hover    |
| primary      | #E29578     | Buttons (.button, --dar… |
| primary-hov… | #E7AF9A     | .button:hover            |
| accent       | #E29578     | Salmon text: badges, th… |

## Typography

- display-hero: Work Sans 59px / 700
- headline-xl: Work Sans 50px / 700
- headline-lg: Work Sans 44px / 700
- logo-footer: Work Sans 37px / 700

{
  "$description": "Conic design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#E29578",
      "$description": "Buttons (.button, --dark-salmon)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#E7AF9A",
      "$description": ".button:hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F8EDEB",
      "$description": "Nav and hero (--seashell); light page headers in the thumbnails"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines and logo"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Body copy"
    },
    "ink-subtle": {
      "$type": "color",
      "$value": "#1111119C",
      "$description": "Dropdown links at rest"
    },
    "accent": {
      "$type": "color",
      "$value": "#E29578",

/* Conic 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-sm, p-lg */

@theme {
  /* Colors */
  --color-primary: #E29578;
  --color-primary-hover: #E7AF9A;
  --color-on-primary: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F8EDEB;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-ink-subtle: #1111119C;
  --color-accent: #E29578;
  --color-line: #EDEDED;
  --color-line-strong: #E4D7D5;
  --color-line-accent: #E295784F;
  --color-field: #FFFFFF;
  --color-field-border: #E1E1E1;
  --color-inverse-canvas: #6D696A;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-hover: #FFFFFFD1;
  --color-inverse-line: #E4EDEF1A;

  /* Fonts */
  --font-sans: "Work Sans", sans-serif;
  --font-work-sans: "Work Sans", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 59px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 700;
  --text-headline-xl: 50px;
  --text-headline-xl--line-height: 1.0;
  --text-headline-xl--letter-spacing: 0px;
  --text-headline-xl--font-weight: 700;
  --text-headline-lg: 44px;
  --text-headline-lg--line-height: 1.02;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 700;
  --text-logo-footer: 37px;
  --text-logo-footer--line-height: 1.03;
  --text-logo-footer--letter-spacing: 0px;
  --text-logo-footer--font-weight: 700;

/* Conic 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: #E29578; /* Buttons (.button, --dark-salmon) */
  --color-primary-hover: #E7AF9A; /* .button:hover */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-canvas: #FFFFFF; /* Page background */
  --color-surface-1: #F8EDEB; /* Nav and hero (--seashell); light page headers in the thumbnails */
  --color-ink: #000000; /* Headlines and logo */
  --color-ink-muted: #000000; /* Body copy */
  --color-ink-subtle: #1111119C; /* Dropdown links at rest */
  --color-accent: #E29578; /* Salmon text: badges, the active nav item, line icons, the blockquote rule */
  --color-line: #EDEDED; /* 1px section bottom borders */
  --color-line-strong: #E4D7D5; /* Nav bottom border and the vertical rules between nav items (--gainsboro) */
  --color-line-accent: #E295784F; /* 2px borders of badges, preview frames and screenshots */
  --color-field: #FFFFFF; /* Inputs */
  --color-field-border: #E1E1E1; /* With field: Inputs */
  --color-inverse-canvas: #6D696A; /* Footer and the closing band (--dim-grey) */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-inverse-ink-hover: #FFFFFFD1; /* Footer links on hover */
  --color-inverse-line: #E4EDEF1A; /* The footer divider */

  /* Fonts */
  --font-work-sans: "Work Sans", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 59px;
  --text-display-hero-font: var(--font-work-sans);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: 0px;
  --text-headline-xl: 50px;
  --text-headline-xl-font: var(--font-work-sans);
  --text-headline-xl-weight: 700;
  --text-headline-xl-line-height: 1.0;
  --text-headline-xl-tracking: 0px;
  --text-headline-lg: 44px;
  --text-headline-lg-font: var(--font-work-sans);
  --text-headline-lg-weight: 700;
  --text-headline-lg-line-height: 1.02;
  --text-headline-lg-tracking: 0px;
  --text-logo-footer: 37px;
  --text-logo-footer-font: var(--font-work-sans);
  --text-logo-footer-weight: 700;

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

SaaS 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

Work Sans · display-hero

Work Sans · headline-xl

Work Sans · logo-footer

Work Sans · title-quote

Work Sans · body-lg

Work Sans · label-nav

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Conic style

More design systems like this

Madox Startup Template

NewKit

Tessel

Juno

Bring any of them to your AI tool