Raka Design System

Get DESIGN.md Download View template Works with

Raka is a cheerful, conventional SaaS and studio landing page. It opens on a full deep-indigo hero (#392396) with a big bold white headline and a photo slider, then switches to a clean white page broken up by pale lavender-grey sections and one more indigo call-to-action band. The type is a single family, Hind Vadodara, almost always bold, and the interface is square-ish: 5px corners on buttons, tags and inputs, 10px on photos.

Four signatures make it recognisable:

Indigo and orange-red. The brand is indigo #392396 with a lighter #523BAF step, and the one warm colour is orange-red #E14817 on the "Buy now" and conversion buttons. Nothing else on the page is saturated except imagery.
Tracked uppercase labels. Buttons are 13px bold uppercase with 1px tracking; section tags (WHAT WE DO, TESTIMONIALS) are 12px bold uppercase with 2px tracking in indigo on a #F1F1F7 chip.
Flat indigo line illustrations. Big outline drawings of people (lavender panels, indigo fills, thin indigo strokes) sit opposite text in the 50/50 split sections.
Rotated rounded-square shapes and the scroll rail. Soft, slightly lighter indigo (#3E289C) rounded squares float in the hero and CTA band, and a vertical Scroll to top label with a progress line stays fixed on the right edge.

Raka is a light design with indigo bands; there is no dark mode.

Colors

Surfaces

canvas#FFFFFF

Page background and default sections

surface-1#FAFAFF

Alternate "gray" sections (projects, contact), fun-fact cards

surface-2#F1F1F7

Section tag chips, dropdown-link hover (#F3F3F7 in CSS)

inverse-canvas#392396

Hero, CTA band, team name plates

field#FFFFFF

Contact inputs (no border) on the #FAFAFF section

field-ink#444444

Text on field

Ink

on-primary#FFFFFF

Text on primary

on-secondary#FFFFFF

on-accent#FFFFFF

Text on accent

ink#000000

Headlines, nav links once scrolled, list items, names

ink-muted#7B88A8

All paragraph copy and roles (--light-slate-grey)

inverse-ink#FFFFFF

Text on inverse-canvas

Action

primary#392396

Default .button ("Let's talk"), tag text, scrolled logo

primary-hover#523BAF

.button:hover, and the hero's "View on Webflow" button

secondary#523BAF

.button:hover, and the hero's "View on Webflow" button

accent#E14817

"Buy now", "Send message", the CTA-band button, the progress line on the scroll rail

Lines & effects

line#FFFFFF · 9%

1px bottom border of the transparent nav over the hero

line-strong#FFFFFF · 16%

1px footer divider

line-nav#FFFFFF · 48%

2px underline under nav links

inverse-surface#000333

Footer (also #030638 inside it)

shape#3E289C

Rotated rounded-square decorations on indigo bands

control#221E41

Square slider arrows in the hero

overlay#392396 · 77%

Gradient from transparent to indigo on project images

Typography

Hind Vadodara · display-hero

The quick brown fox jumps

Hero headline Design visually, create efficiently. 65px · 700 · 1.03

Hind Vadodara · headline-lg

The quick brown fox jumps

Section titles (.top-title-text), CTA band Build your website with Raka. 50px · 700 · 1.04

Hind Vadodara · title-lg

The quick brown fox jumps

Project titles (.project-title). 30px · 700 · 1.0

Hind Vadodara · body

The quick brown fox jumps

Paragraphs in ink-muted. 16px · 500 · 1.5

Hind Vadodara · label

The quick brown fox jumps

Nav links (.nav-text), cart, Scroll to top. 16px · 700 · 1.25

Hind Vadodara · eyebrow

The quick brown fox jumps

Section tags WHAT WE DO, TESTIMONIALS. 12px · 700 · 1.67 · 2px

Spacing & shape

Purpose	Value
Container	max 1200px, centred (.container)
Section rhythm	120px top and bottom on every section, 80px at ≤991 and 60px at ≤479
Breakpoints	991px, 767px and 479px (Webflow defaults)

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	16px
`md`	20px
`lg`	30px
`xl`	50px
`2xl`	80px

Layout spacing

Token	Value	Preview
`button-y`	20px
`button-x`	30px
`nav-height`	90px
`section`	120px

Border radius

sm5px

md10px

card17px

lg20px

xl50px

blob110px

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

Motion

Button hover	transition: all 0.2s, background #392396 → #523BAF
Nav link hover	Text colour and 2px underline width, 500ms (text colour, size)
Nav on scroll	Background, border and colours change over 500ms as the page scrolls past the hero
Dropdown caret	Rotates 300ms ease on open
Dropdown links	background-color 0.1s, color 0.1s
Scroll rail	Progress line tracks page scroll
Small moves	y moves of 5–6px over 300–500ms, mostly the menu-icon lines (paired with rotations)
Logo hover	Opacity 0.75 → 1, 0.2s
Elastic pop	scale to 1, 1000ms outElastic

Do’s and don’ts

Use indigo #392396 for bands and the default button, and orange-red #E14817 only for the purchase or submit action.
Set every button at 13px, weight 700, uppercase, 1px tracking, 20px 30px padding, 60px tall, 5px radius.
Put an eyebrow tag (#F1F1F7 chip, indigo text, 2px tracking) above split-section titles.
Keep paragraphs in #7B88A8 at 16px / 24px, and headlines in #000000 weight 700.
Alternate white and #FAFAFF sections, each with 120px vertical padding, and break them with one indigo band.
Pair text with a flat indigo line illustration rather than a stock photo in split sections.
Add shadows to cards or buttons; the page is flat.
Round buttons into pills or cards past 10px; 5px and 10px are the UI radii.
Use orange-red for more than one button per view, or put orange text on white.
Put #7B88A8 copy below 14px, or on #F1F1F7; it only reaches about 3.5:1 on white. Keep it for paragraphs and roles.
Shrink the white-on-orange button label; keep it 13px bold uppercase with tracking, since #E14817 gives about 4.1:1.
Add a second typeface or tracked lowercase text; only the uppercase labels are tracked.

Example prompt

Any page in the Raka style

Prompt

Build your page in the Raka style. Font: Hind Vadodara (Google Fonts, 400–700); body 16px weight 500, line height 24px, colour #7B88A8; headlines weight 700, black #000000, no tracking. Page background #FFFFFF, alternate sections #FAFAFF, 120px vertical padding, 1200px container with 5% side padding. Start with a full indigo #392396 hero: 20px/600 white kicker, a 65px/67px bold white headline on two lines, and two buttons: #523BAF and orange-red #E14817. Buttons are 13px bold uppercase, 1px tracking, padding 20px 30px, 60px tall, 5px radius; default button #392396 hovering to #523BAF over 0.2s. Put a #F1F1F7 tag chip with 12px bold uppercase indigo text (2px tracking) above each 50px/52px section title. Use 2-column splits with 50px gaps and a flat indigo line illustration on one side. Photos get 10px corners. No shadows. Footer navy #000333.

# Raka Design System

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

## Overview

Raka is a cheerful, conventional SaaS and studio landing
page. It opens on a full deep-indigo hero (#392396) with
a big bold white headline and a photo slider, then
switches to a clean white page broken up by pale
lavender-grey sections and one more indigo

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background and def… |
| surface-1    | #FAFAFF     | Alternate "gray" sectio… |
| surface-2    | #F1F1F7     | Section tag chips, drop… |
| inverse-can… | #392396     | Hero, CTA band, team na… |
| field        | #FFFFFF     | Contact inputs (no bord… |
| field-ink    | #444444     | Text on field            |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #FFFFFF     |                          |
| on-accent    | #FFFFFF     | Text on accent           |
| ink          | #000000     | Headlines, nav links on… |
| ink-muted    | #7B88A8     | All paragraph copy and … |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| primary      | #392396     | Default .button ("Let's… |
| primary-hov… | #523BAF     | .button:hover, and the … |

## Typography

- display-hero: Hind Vadodara 65px / 700
- headline-lg: Hind Vadodara 50px / 700
- display-metric: Hind Vadodara 50px / 700
- headline-md: Hind Vadodara 34px / 700

{
  "$description": "Raka design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#392396",
      "$description": "Default .button (\"Let's talk\"), tag text, scrolled logo"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#523BAF",
      "$description": ".button:hover, and the hero's \"View on Webflow\" button"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#523BAF",
      "$description": ".button:hover, and the hero's \"View on Webflow\" button"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "accent": {
      "$type": "color",
      "$value": "#E14817",
      "$description": "\"Buy now\", \"Send message\", the CTA-band button, the progress line on the scroll rail"
    },
    "on-accent": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on accent"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background and default sections"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FAFAFF",
      "$description": "Alternate \"gray\" sections (projects, contact), fun-fact cards"

/* Raka 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: #392396;
  --color-primary-hover: #523BAF;
  --color-on-primary: #FFFFFF;
  --color-secondary: #523BAF;
  --color-on-secondary: #FFFFFF;
  --color-accent: #E14817;
  --color-on-accent: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #FAFAFF;
  --color-surface-2: #F1F1F7;
  --color-ink: #000000;
  --color-ink-muted: #7B88A8;
  --color-line: #FFFFFF17;
  --color-line-strong: #FFFFFF29;
  --color-line-nav: #FFFFFF7A;
  --color-inverse-canvas: #392396;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-surface: #000333;
  --color-shape: #3E289C;
  --color-control: #221E41;
  --color-field: #FFFFFF;
  --color-field-ink: #444444;
  --color-overlay: #392396C4;

  /* Fonts */
  --font-sans: "Hind Vadodara", sans-serif;
  --font-hind-vadodara: "Hind Vadodara", sans-serif;

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

/* Raka 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: #392396; /* Default .button ("Let's talk"), tag text, scrolled logo */
  --color-primary-hover: #523BAF; /* .button:hover, and the hero's "View on Webflow" button */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #523BAF; /* .button:hover, and the hero's "View on Webflow" button */
  --color-on-secondary: #FFFFFF;
  --color-accent: #E14817; /* "Buy now", "Send message", the CTA-band button, the progress line on the scroll rail */
  --color-on-accent: #FFFFFF; /* Text on accent */
  --color-canvas: #FFFFFF; /* Page background and default sections */
  --color-surface-1: #FAFAFF; /* Alternate "gray" sections (projects, contact), fun-fact cards */
  --color-surface-2: #F1F1F7; /* Section tag chips, dropdown-link hover (#F3F3F7 in CSS) */
  --color-ink: #000000; /* Headlines, nav links once scrolled, list items, names */
  --color-ink-muted: #7B88A8; /* All paragraph copy and roles (--light-slate-grey) */
  --color-line: #FFFFFF17; /* 1px bottom border of the transparent nav over the hero */
  --color-line-strong: #FFFFFF29; /* 1px footer divider */
  --color-line-nav: #FFFFFF7A; /* 2px underline under nav links */
  --color-inverse-canvas: #392396; /* Hero, CTA band, team name plates */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-inverse-surface: #000333; /* Footer (also #030638 inside it) */
  --color-shape: #3E289C; /* Rotated rounded-square decorations on indigo bands */
  --color-control: #221E41; /* Square slider arrows in the hero */
  --color-field: #FFFFFF; /* Contact inputs (no border) on the #FAFAFF section */
  --color-field-ink: #444444; /* Text on field */
  --color-overlay: #392396C4; /* Gradient from transparent to indigo on project images */

  /* Fonts */
  --font-hind-vadodara: "Hind Vadodara", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 65px;
  --text-display-hero-font: var(--font-hind-vadodara);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1.03;
  --text-display-hero-tracking: 0px;
  --text-headline-lg: 50px;
  --text-headline-lg-font: var(--font-hind-vadodara);
  --text-headline-lg-weight: 700;
  --text-headline-lg-line-height: 1.04;
  --text-headline-lg-tracking: 0px;
  --text-display-metric: 50px;
  --text-display-metric-font: var(--font-hind-vadodara);
  --text-display-metric-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

Hind Vadodara · display-hero

Hind Vadodara · headline-lg

Hind Vadodara · title-lg

Hind Vadodara · body

Hind Vadodara · label

Hind Vadodara · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Raka style

More design systems like this

Card

Digi

Dolce

Kliko

Bring any of them to your AI tool