diff -r 9d3c5621cbe5 nuxeo-studio-ui/src/main/java/org/nuxeo/studio/client/modules/global/branding/ui/BrandingExtensionEditor.java
--- a/nuxeo-studio-ui/src/main/java/org/nuxeo/studio/client/modules/global/branding/ui/BrandingExtensionEditor.java	Thu Jan 14 19:06:49 2010 +0100
+++ b/nuxeo-studio-ui/src/main/java/org/nuxeo/studio/client/modules/global/branding/ui/BrandingExtensionEditor.java	Tue May 18 18:59:18 2010 +0200
@@ -64,6 +64,8 @@
     protected Map<String, TextBox> fontPalettes;
 
     protected Map<String, TextBox> borderPalettes;
+    
+    protected Map<String, TextBox> colorPalettes;
 
     public boolean acceptInput(Object inputObject) {
         return inputObject instanceof BrandingExtension;
@@ -95,6 +97,7 @@
         workingModel.setBackgroundPalettes(getPalettesAsMap(backgroundPalettes));
         workingModel.setFontPalettes(getPalettesAsMap(fontPalettes));
         workingModel.setBorderPalettes(getPalettesAsMap(borderPalettes));
+        workingModel.setColorPalettes(getPalettesAsMap(colorPalettes));
     }
 
     private Map<String, String> getPalettesAsMap(
@@ -115,6 +118,7 @@
         vpanel.add(createBackgroundPalettesEditor());
         vpanel.add(createFontPalettesEditor());
         vpanel.add(createBorderPalettesEditor());
+        vpanel.add(createColorPalettesEditor());
         return vpanel;
     }
 
@@ -253,6 +257,65 @@
         panel.setContent(backgroundPalettesPanel);
         return panel;
     }
+    
+    private Widget createColorPalettesEditor() {
+        DisclosurePanel panel = new DisclosurePanel("Color Palettes");
+        panel.getHeader().addStyleName("section-header");
+        VerticalPanel colorPalettesPanel = new VerticalPanel();
+        colorPalettesPanel.setSpacing(4);
+        colorPalettes = new HashMap<String, TextBox>();
+        colorPalettesPanel.add(createPaletteEntry(
+                "Black color used for default words and feedback messages", "black",
+                "#000000",
+                colorPalettes, workingModel.getColorPalettes(), false));
+        colorPalettesPanel.add(createPaletteEntry(
+                "Black lite use for button links", "black.lite",
+                "#333333",
+                colorPalettes, workingModel.getColorPalettes(), false));
+        colorPalettesPanel.add(createPaletteEntry("Gray Dark used for titles, subtabs, footer and current item description",
+                "gray.dark",
+                "#5c5c5c",
+                colorPalettes, workingModel.getColorPalettes(), false));
+        colorPalettesPanel.add(createPaletteEntry("Gray used for breadcrumb links, dataList tables, and comments author",
+                "gray",
+                "#666666",
+                colorPalettes, workingModel.getColorPalettes(), false));
+        colorPalettesPanel.add(createPaletteEntry("Gray color used for disabled buttons",
+                "gray.medium",
+                "#92999e",
+                colorPalettes, workingModel.getColorPalettes(), false));
+        colorPalettesPanel.add(createPaletteEntry(
+                "Gray used for header text", "gray.neutral",
+                "#cecece",
+                colorPalettes, workingModel.getColorPalettes(), false));
+        colorPalettesPanel.add(createPaletteEntry(
+                "White used for links on dark background like header or RSS button", "white",
+                "#ffffff",
+                colorPalettes, workingModel.getColorPalettes(), false));
+        colorPalettesPanel.add(createPaletteEntry(
+                "Blue used for links and tabs", "blue.link",
+                "#0066cc",
+                colorPalettes, workingModel.getColorPalettes(), false));
+        colorPalettesPanel.add(createPaletteEntry(
+                "Blue used for info messages", "blue.dark",
+                "#003399",
+                colorPalettes, workingModel.getColorPalettes(), false));
+        colorPalettesPanel.add(createPaletteEntry(
+                "Blue used for visited links", "blue.night",
+                "#112b8c",
+                colorPalettes, workingModel.getColorPalettes(), false));
+        colorPalettesPanel.add(createPaletteEntry(
+                "Red color for warning information", "red",
+                "#f56200",
+                colorPalettes, workingModel.getColorPalettes(), false));
+        colorPalettesPanel.add(createPaletteEntry(
+                "Green used for unlocked document state ", "green",
+                "#1caa00",
+                colorPalettes, workingModel.getColorPalettes(), false));
+        panel.setContent(fontPalettesPanel);
+        return panel;
+    }
+
 
     private Widget createPaletteEntry(String tooltip, String id,
             String defaultValue, Map<String, TextBox> palettesEditors,
diff -r 9d3c5621cbe5 nuxeo-studio-ui/src/main/java/org/nuxeo/studio/core/builders/theme_template.xml
--- a/nuxeo-studio-ui/src/main/java/org/nuxeo/studio/core/builders/theme_template.xml	Thu Jan 14 19:06:49 2010 +0100
+++ b/nuxeo-studio-ui/src/main/java/org/nuxeo/studio/core/builders/theme_template.xml	Tue May 18 18:59:18 2010 +0200
@@ -325,7 +325,7 @@
     <style name="default buttons">
       <selector path="input.button">
         <font preset="default (${presets.fonts.name})"/>
-        <color>#333333</color>
+        <color preset="black.lite (${presets.colors.name})" />
         <border preset="buttons (${presets.borders.name})"/>
         <background preset="buttons (${presets.backgrounds.name})"/>
         <margin>5px 10px 10px 0px</margin>
@@ -337,7 +337,7 @@
         <border-color>#92999e</border-color>
       </selector>
       <selector path="input.button[disabled=disabled], input.button[disabled=disabled]:hover">
-        <color>#ccc</color>
+        <color preset="gray.medium (${presets.colors.name})" />
       </selector>
     </style>
     <style name="breadcrumbs style">
@@ -354,17 +354,17 @@
         <padding>0</padding>
       </selector>
       <selector path="a">
-        <color>#666666</color>
+        <color preset="gray (${presets.colors.name})" />
         <text-decoration>none</text-decoration>
       </selector>
       <selector path="a:visited">
-        <color>#666666</color>
+        <color preset="gray (${presets.colors.name})" />
       </selector>
       <selector path="a:active">
-        <color>#666666</color>
+        <color preset="gray (${presets.colors.name})" />
       </selector>
       <selector path="a:hover">
-        <color>#666666</color>
+        <color preset="gray (${presets.colors.name})" />
         <text-decoration>underline</text-decoration>
       </selector>
       <selector path=".breadcrumbs a, .breadcrumbs a:link, .breadcrumbs a:visited">
@@ -414,7 +414,7 @@
         <float>left</float>
       </selector>
       <selector path=".tabsBar a, .tabsBar a:hover, .tabsBar a:visited">
-        <color>#0066CC</color>
+        <color preset="blue.link (${presets.colors.name})" />
         <border preset="tabisnotselected (${presets.borders.name})"/>
         <background preset="white (${presets.backgrounds.name})"/>
         <text-decoration>none</text-decoration>
@@ -424,12 +424,12 @@
         <float>left</float>
       </selector>
       <selector path=".tabsBar li.selected a, .tabsBar li.selected a:hover, .tabsBar li.selected a:visited">
-        <color>#ffffff</color>
+        <color preset="white (${presets.colors.name})" />
         <border preset="tabiselected (${presets.borders.name})"/>
         <background preset="tabiselected (${presets.backgrounds.name})"/>
       </selector>
       <selector path=".tabsBar li a:hover">
-        <color>#ffffff</color>
+        <color preset="white (${presets.colors.name})" />
         <background preset="tabiselected (${presets.backgrounds.name})"/>
       </selector>
       <selector path=".subtabsBar">
@@ -437,15 +437,15 @@
         <font>normal 11px 'Lucida Grande', Verdana, sans-serif !important</font>
       </selector>
       <selector path=".subtabsBar a, .subtabsBar a:hover, .subtabsBar a:visited">
-        <color>#0066CC</color>
+        <color preset="blue.link (${presets.colors.name})" />
         <border preset="subtabisnotselected (${presets.borders.name})"/>
       </selector>
       <selector path=".subtabsBar li a:hover">
-        <color>#5f6265</color>
+        <color preset="gray.dark (${presets.colors.name})" />
         <background preset="subtabiselected (${presets.backgrounds.name})"/>
       </selector>
       <selector path=".subtabsBar li.selected a, .subtabsBar li.selected a:hover, .subtabsBar li.selected a:visited">
-        <color>#5f6265</color>
+        <color preset="gray.dark (${presets.colors.name})" />
         <border preset="subtabiselected (${presets.borders.name})"/>
         <background preset="subtabiselected (${presets.backgrounds.name})"/>
       </selector>
@@ -483,7 +483,7 @@
         <width>470px</width>
       </selector>
       <selector path=".infoMessage">
-        <color>#003399</color>
+        <color preset="blue.dark (${presets.colors.name})" />
         <border>1px solid #0066cc</border>
         <background>url(/nuxeo/icons/tip.gif) 2px 3px no-repeat #f2f7fc</background>
         <margin-bottom>5px</margin-bottom>
@@ -505,7 +505,7 @@
         <padding>0 5px !important</padding>
       </selector>
       <selector path=".error">
-        <color>red</color>
+        <color preset="red (${presets.colors.name})" />
         <font-weight>bold</font-weight>
       </selector>
       <selector path=".archiveTabContent">
@@ -579,7 +579,7 @@
         <background-color>#ddeeff</background-color>
       </selector>
       <selector path="a:visited">
-        <color>#112B8C</color>
+        <color preset="blue.night (${presets.colors.name})" />
       </selector>
       <selector path=".dataInput textarea, .dataInput .dataInputText">
         <width>500px</width>
@@ -714,14 +714,14 @@
         <width>40px</width>
       </selector>
       <selector path="a, a:link">
-        <color>#0066CC</color>
+        <color preset="blue.link (${presets.colors.name})" />
         <text-decoration>none</text-decoration>
       </selector>
       <selector path="a:active">
-        <color>#0066CC</color>
+        <color preset="blue.link (${presets.colors.name})" />
       </selector>
       <selector path="a:hover">
-        <color>#0066CC</color>
+        <color preset="blue.link (${presets.colors.name})" />
         <text-decoration>underline</text-decoration>
       </selector>
       <selector path="table">
@@ -781,7 +781,7 @@
         <margin>0px 3px 4px 0px</margin>
       </selector>
       <selector path=".slideShowControl span">
-        <color>#666666</color>
+        <color preset="gray (${presets.colors.name})" />
         <font-weight>bold</font-weight>
         <font-size>13px</font-size>
         <padding-right>10px</padding-right>
@@ -796,7 +796,7 @@
       </selector>
       <selector path=".foldableBox h3">
         <border-bottom preset="tabiselected (${presets.borders.name})"/>
-        <color>#fff</color>
+        <color preset="white (${presets.colors.name})" />
         <padding>3px 3px 3px 18px</padding>
         <font-size>11px</font-size>
       </selector>
@@ -804,13 +804,13 @@
         <background>url(/nuxeo/img/theme_galaxy/arrow_folded.gif) top left no-repeat</background>
       </selector>
       <selector path=".foldableBox h3 a:link, .foldableBox h3 a:visited, .foldableBox h3 a:hover, .foldableBox h3 a:visited:hover">
-        <color>#fff</color>
+        <color preset="white (${presets.colors.name})" />
       </selector>
       <selector path=".foldableBox h3.unfolded">
         <background>url(/nuxeo/img/theme_galaxy/arrow_unfolded.gif) top left no-repeat</background>
       </selector>
       <selector path=".foldableBox h3 a">
-        <color>#fff</color>
+        <color preset="white (${presets.colors.name})" />
         <display>block</display>
       </selector>
       <selector path=".foldableBox .boxBody">
@@ -875,7 +875,7 @@
       </selector>
       <selector path=".infoFeedback">
         <font>bold 11px Verdana, sans-serif</font>
-        <color>#003399</color>
+        <color preset="blue.dark (${presets.colors.name})" />
         <border>2px solid #0066cc</border>
         <background>url(/nuxeo/icons/info.gif) 4px 5px no-repeat #f2f7fc</background>
         <padding>7px 7px 7px 24px</padding>
@@ -887,7 +887,7 @@
         <width>80px</width>
       </selector>
       <selector path=".commentAuthor">
-        <color>#666</color>
+        <color preset="gray (${presets.colors.name})" />
         <background>url(/nuxeo/icons/comment.gif) no-repeat 4px 4px</background>
         <font-weight>bold</font-weight>
         <padding>5px 3px 3px 24px</padding>
@@ -1038,7 +1038,7 @@
         <float>left</float>
         <text-decoration>none</text-decoration>
         <border preset="buttons (${presets.borders.name})"/>
-        <color>#333333</color>
+        <color preset="black.lite (${presets.colors.name})" />
         <padding>4px 7px</padding>
         <margin-right>10px</margin-right>
         <cursor>pointer</cursor>
@@ -1195,7 +1195,11 @@
         <float>right</float>
       </selector>
       <selector path=".summary_locked">
-        <color>#f56200</color>
+        <color preset="red (${presets.colors.name})" />
+        <font-weight>bold</font-weight>
+      </selector>
+      <selector path=".summary_unlocked">
+        <color preset="green (${presets.colors.name})" />
         <font-weight>bold</font-weight>
       </selector>
       <selector path=".lockDetail, .DetailList, .contributors_table">
@@ -1223,7 +1227,7 @@
         <padding-left>5px</padding-left>
       </selector>
       <selector path=".dataOutput th, .dataList th">
-        <color>#fff</color>
+        <color preset="gray.lite (${presets.colors.name})" />
         <background-color>#E0E0E0</background-color>
         <padding>4px 5px</padding>
         <text-align>left</text-align>
@@ -1235,7 +1239,7 @@
         <float>none</float>
       </selector>
       <selector path="a:link, a:visited">
-        <color>#333</color>
+        <color preset="black.lite (${presets.colors.name})" />
         <background>transparent</background>
         <text-decoration>none</text-decoration>
       </selector>
@@ -1294,7 +1298,7 @@
       element="page[1]/section[1]/cell[2]/fragment[1]|page[3]/section[1]/cell[2]/fragment[1]" inherit="default buttons">
       <selector path="div" view="User services (Galaxy theme)">
         <font preset="small (${presets.fonts.name})"/>
-        <color>#cecece</color>
+        <color preset="gray.neutral (${presets.colors.name})" />
         <margin>0</margin>
         <padding>2px 2px 0px 0px</padding>
         <line-height>185%</line-height>
@@ -1320,7 +1324,7 @@
         <text-decoration>underline</text-decoration>
       </selector>
       <selector path="a, a:link, a:visited, a:hover, a:active" view="User services (Galaxy theme)">
-        <color>#ffffff</color>
+        <color preset="white (${presets.colors.name})" />
       </selector>
       <selector path="img" view="User services (Galaxy theme)">
         <margin-left>5px</margin-left>
@@ -1373,17 +1377,17 @@
         <padding>0</padding>
       </selector>
       <selector path="a" view="nuxeo5 tree explorer">
-        <color>#112b8c</color>
+        <color preset="blue.night (${presets.colors.name})" />
         <text-decoration>none</text-decoration>
       </selector>
       <selector path="a:visited" view="nuxeo5 tree explorer">
-        <color>#112B8C</color>
+        <color preset="blue.night (${presets.colors.name})" />
       </selector>
       <selector path="a:active" view="nuxeo5 tree explorer">
-        <color>#112b8c</color>
+        <color preset="blue.night (${presets.colors.name})" />
       </selector>
       <selector path="a:hover" view="nuxeo5 tree explorer">
-        <color>#0066CC</color>
+        <color preset="blue.link (${presets.colors.name})" />
         <text-decoration>underline</text-decoration>
       </selector>
       <selector path=".dropInto" view="nuxeo5 tree explorer">
@@ -1450,17 +1454,17 @@
         <font preset="small (${presets.fonts.name})"/>
       </selector>
       <selector path="a" view="nuxeo5 clip board">
-        <color>#0066CC</color>
+        <color preset="blue.link (${presets.colors.name})" />
         <text-decoration>none</text-decoration>
       </selector>
       <selector path="a:visited" view="nuxeo5 clip board">
-        <color>#112B8C</color>
+        <color preset="blue.night (${presets.colors.name})" />
       </selector>
       <selector path="a:active" view="nuxeo5 clip board">
-        <color>#0066CC</color>
+        <color preset="blue.link (${presets.colors.name})" />
       </selector>
       <selector path="a:hover" view="nuxeo5 clip board">
-        <color>#0066CC</color>
+        <color preset="blue.link (${presets.colors.name})" />
         <text-decoration>underline</text-decoration>
       </selector>
       <selector path=".dropInto" view="nuxeo5 clip board">
@@ -1493,7 +1497,7 @@
         <padding>2px 2px 2px 2px</padding>
       </selector>
       <selector path=".clipboardEmptyMessage" view="nuxeo5 clip board">
-        <color>#666</color>
+        <color preset="gray (${presets.colors.name})" />
         <font-style>italic</font-style>
         <font-size>9px</font-size>
         <padding>0 2px 2px 2px</padding>
@@ -1542,7 +1546,7 @@
       </selector>
       <selector path="" view="Nuxeo EP footer (Galaxy Theme)">
         <font preset="small (${presets.fonts.name})"/>
-        <color>#5c5c5c</color>
+        <color preset="gray.dark (${presets.colors.name})" />
         <padding>5px 15px 5px 5px</padding>
       </selector>
       <selector path="div" view="Nuxeo EP footer (Galaxy Theme)">
@@ -1552,17 +1556,17 @@
         <font-size preset="small (${presets.fonts.name})"/>
       </selector>
       <selector path="a" view="Nuxeo EP footer (Galaxy Theme)">
-        <color>#0066CC</color>
+        <color preset="blue.link (${presets.colors.name})" />
         <text-decoration>none</text-decoration>
       </selector>
       <selector path="a:visited" view="Nuxeo EP footer (Galaxy Theme)">
-        <color>#112B8C</color>
+        <color preset="blue.night (${presets.colors.name})" />
       </selector>
       <selector path="a:active" view="Nuxeo EP footer (Galaxy Theme)">
-        <color>#0066CC</color>
+        <color preset="blue.link (${presets.colors.name})" />
       </selector>
       <selector path="a:hover" view="Nuxeo EP footer (Galaxy Theme)">
-        <color>#0066CC</color>
+        <color preset="blue.link (${presets.colors.name})" />
         <text-decoration>underline</text-decoration>
       </selector>
       <selector path="select.langSelect" view="Nuxeo EP footer (Galaxy Theme)">
@@ -1589,12 +1593,12 @@
         <height>30px</height>
       </selector>
       <selector path="div.syndicationButton div.syndicationLinks" view="facelet region">
-        <color>rgb(241, 242, 243)</color>
+        <color preset="gray.lite (${presets.colors.name})" />
         <font preset="small (${presets.fonts.name})"/>
         <padding>2px 4px</padding>
       </selector>
       <selector path="div.syndicationButton div.syndicationLinks a" view="facelet region">
-        <color>rgb(255, 255, 255)</color>
+        <color preset="white (${presets.colors.name})" />
         <text-decoration>none</text-decoration>
       </selector>
     </style>
@@ -1612,12 +1616,12 @@
         <float>right</float>
       </selector>
       <selector path="div.syndicationButton div.syndicationLinks" view="facelet region">
-        <color>rgb(241, 242, 243)</color>
+        <color preset="gray.lite (${presets.colors.name})" />
         <font preset="small (${presets.fonts.name})"/>
         <padding>2px 4px</padding>
       </selector>
       <selector path="div.syndicationButton div.syndicationLinks a" view="facelet region">
-        <color>rgb(255, 255, 255)</color>
+        <color preset="white (${presets.colors.name})" />
         <text-decoration>none</text-decoration>
       </selector>
     </style>
